Docs

[pdopchev]

Hi guys,

Been having issues with adjusting the image size on a single product on the Woocommerce shop page. After doing some research I did enable the Product Images section in the WooCommerce->Settings->Display (added the needed code to functions.php file) but still cannot get the product image to display correctly… It seems like the shop page might be inheriting settings from the Essential Grid plug in (or I might be totally wrong)

Link: http://www.dopchevproductions.com/test/product-category/stock-skis/

Also, is there an easy way to change the background color of the shop page and the products in it?

Link:http://www.dopchevproductions.com/test/shop/

Any suggestions would be greatly appreciate it!

Thanks

[pdopchev]

A quick add on about the background – managed to change it with the following code:

.archive .site {
background-color: #000000;
}

But it seems like the box of the product image still has white background. Any ideas on that?

[Rupok]

Hi there,

Thanks for writing in! Is it your uploaded image size (22×225 pixels)? – http://www.dopchevproductions.com/test/wp-content/uploads/2016/06/100.png

If yes then it’s not suitable to display on site by any means. You should use a larger image to get expected result.

If you think this is the right image size, you can add this under Custom > CSS in the Customizer.

.woocommerce li.product .entry-featured img {
  display: block;
  margin: 0 auto;
  min-width: auto;
}

To change the background of product (and all woocommerce pages), you can update your code to following :

.woocommerce .site {
  background: #000;
}

If you are interested to change the white background of Tabs as well, let’s add this :

.single-product .x-tab-content .x-tab-pane {
  background: #000;
}

.single-product .x-nav-tabs > .active > a, .single-product .x-nav-tabs > .active > a:hover {
  background-color: #555;
}

.single-product .x-nav-tabs > li > a {
  background-color: #333;
}

Let’s change the color codes with your own.

Cheers!

[pdopchev]

Thanks for the help, Rupok! It totally got me going on customization process!

One more thing – trying to figure out how to add a dropdown menu with different options like this one: http://www.rompskis.com/shop/product/stock-pintail/

I did add different product attributes thinking that would do it but the information is showing under “additional information”, not as a dropdown menu: http://www.dopchevproductions.com/test/product/stock-100s/

Would appreciate your opinion!

[Joao]

Hi there,

Please try https://docs.woothemes.com/document/variable-product/ or a similar plugin.

Hope that helps

Joao

[pdopchev]

Thanks Joao! Works like a charm!

[Joao]

I am glad to hear it 🙂

Let us know if you need help with anything else.

Joao

[pdopchev]

Joao, I did post another thread, if you want to check it out and see what could be done about it:
https://community.theme.co/forums/topic/additional-woocommerce-menu/

[Rue Nel]

Hello There,

Thanks for the updates! I already responded that topic. Please do check it out.

Regards.

[Author]

Posts