Problem with WooCommerce images and product gallery

[scwfit]

Hello,

Quite a while ago I asked on this forum about disabling the automatic zoom on WooCommerce product images, and I was told to use the following code:

add_action( ‘after_setup_theme’, ‘remove_woo_features’, 999 );
function remove_woo_features(){
remove_theme_support( ‘wc-product-gallery-zoom’ );
remove_theme_support( ‘wc-product-gallery-lightbox’ );
remove_theme_support( ‘wc-product-gallery-slider’ );
}

It worked great for several years, however now I have some different kinds of products and I would like to use the default WooCommerce gallery features instead. I removed the code from my child theme, but the product image gallery is not working at all. See example:

https://scwfit.com/store/product/jump-ropes/

The image does not zoom, and when I click on the thumbnail images nothing happens.

How can I get the product gallery working properly?

Thanks in advance!

[prakash_s]

Hi Scw,

Thanks for writing to us,

Kindly check this code in the Theme option's CSS. To work properly product thumbnail zoom please remove this code.

    .woocommerce div.product div.images.woocommerce-product-gallery {
     pointer-events: none !important;
    }

The purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps you.
Thanks.

[scwfit]

Thanks, that worked. I didn’t realize there had been a CSS component to the original customization.

I have one more question: I made some CSS changes to improve the visibility of the thumbnails (see same product link above). For some reason, one of the thumbnails in the gallery isn’t cropping to a square, the rest are. I uploaded the image the exact same way as the others and don’t see a difference in the settings. Any idea why this is happening?

Thanks!

[prakash_s]

Hi @scwfit,

It seems that you have added height:80px in your custom CSS code for product gallery thumbnails. You should add the width of the image as well to display the product gallery thumbnail image in the square shapes.

.flex-control-nav.flex-control-thumbs img {
height: 80px;
}

Take a look at the screenshot too.

The purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps you.
Thanks.

[scwfit]

Hi,

Yes I did add the height, but the other images are horizontal as well, and they are automatically getting cropped to squares even with the width set to auto; it’s just that one that isn’t. I was wondering why that is. I would prefer the automatic cropping behavior rather than setting the width, because setting the width causes the image to distort.

[prakash_s]

Hi @scwfit

Please add this code in child theme’s functions.php file.

add_theme_support( 'woocommerce', array(
'gallery_thumbnail_image_width' => 100,
) );
} 

Feel free to change the value 100 to any size that you want to render for the product gallery image. Then regenerate thumbnails using this plugin https://wordpress.org/plugins/regenerate-thumbnails/

Hope it helps you.
Thanks

[scwfit]

Thank you!

[prakash_s]

Hello @scwfit,

Glad that we are able to help you

Have a great day
Thanks