Problem with woocommerce images

[Matthew Sheridan]

Having strange woocommerce thumbnail sizing problems/overlapping images.

Links attached. Please advise.

Thanks.

[Zex]

Hello, Matthew!

Unfortunately, the link you provided is empty so I can’t see the issue.

Anyway, have you checked the woocommerce Product Images sizing options located in
Customizing-> WooCommerce-> Product Images ?

https://prnt.sc/t61z90

Regards

[Matthew Sheridan]

Hi, the link is the following https://www.nixsensor.com/shop/

[Zex]

Hello, Matthew!

Thank you. Now the link works.

From what I can see, you have created your shop using the WP Bakery page builder.
You need to increase the width of your product elements, somewhere in the element settings.
…or simply insert the following code into Customizing->General->Additional CSS:

.woocommerce .product{
    width:100%!important;
}

I hope this code will solve the problem you have.

Best Regards

[Matthew Sheridan]

Hi I’m still experiencing a similar issue on single product pages

Nix Mini 2 Color Sensor

[Zex]

Hello, Matthew!

I visited your website and saw that you created your single product page using the WP Bakery page builder. As far as I noticed the product image is fine but there is a problem in the thumbnail images.
https://prnt.sc/t7dxo8
There is probably an option in the element settings to fix this. (I can’t tell you exactly where since this element is not part of our theme).

Anyway, If you want to try, maybe the following code will help you solve it more easily(insert the codes into Customizing->General->Additional CSS):

.woocommerce div.product div.images .flex-control-thumbs li{
 width:8%!important;
    height: auto!important;
}
body:not(.single-product) .flex-control-nav{
    z-index: 8!important;
    width:95%!important;
}

Please let me know if the code is OK, or you want something else.

Regards

[Author]

Posts