Hi there,
I’m using Catch Sketch Pro together with WooCommerce. Recently, the thumbnails of product image were no longer displayed correctly: https://satellietoriginals.net/product/code-ac-galaxy-black Other WooCommerce were reporting this issue so I thought it was related to WooCommerce. However, as all the usual troubleshooting steps didn’t work out, WooCommerce plugin support took a deeper dive into this issue. In the end, it turned out that the issue is caused by some CSS code in the theme. Here’s a complete copy of the answer by the WooCommerce support team:
————–
I’ve looked into the issue, and it seems to be caused by the theme you are using. Specifically, there is some CSS code (flex-wrap: wrap) coming from the theme’s SASS folder, which forces the product gallery images to appear in a single line, leading to the increased image size as shown in this screenshot: https://go.screenpal.com/watch/cZXY6OnVuR2 Also, In this screenshot https://go.screenpal.com/watch/cZXY6unVuRz you can see when I disable that code images appearing fine:
As a test, could you please activate the default Storefront theme or the Twenty Twenty-Three theme to see if this resolves the issue? If the issue is resolved, we recommend contacting your theme provider for assistance in fixing it. They will be best equipped to address this.
Alternatively you can use the following CSS code to fix that issue.
.woocommerce-product-gallery ol.flex-control-nav {
flex-wrap: nowrap !important;
}
Please note that we are unable to provide support for custom CSS code. However, as an exception, I have shared the CSS code with you. If the issue persists, we recommend reaching out to the theme provider directly, as they are most familiar with the theme settings and can provide the best guidance to resolve the issue.
———-
Please note: de custom CSS code provided by WooCommerce fixes the issue, but in order to provide a clear example I of the issue I did not definitely add the CSS code yet.
.
