Posted on Leave a comment

How to fix improper gallery image thumbnail size on WooCommerce product?

We can run WooCommerce on a WordPress site with a theme that doesn’t specifically designed for WooCommerce. And ignore the incompatibility notice in the dashboard for design preference reason.

If you know WordPress coding, a non-supported WooCommerce theme is missing add_theme_support( ‘woocommerce’ ) in its main function.

You will have some store-related problems when you use this kind of theme; for example, product image or gallery thumbnail size not properly configured. The thumbnail grid below the product images slideshow in single product page is usually broken as there is no fixed size specified.

To fix this issue while you don’t want to switch to WooCommerce supported themes, you can apply the below short snippet into your child theme’s functions or add it with the Code Snippets plugin.

add_filter( 'woocommerce_gallery_thumbnail_size', function( $size ) {
    return 'thumbnail';
});

Note that if you use Code Snippets plugin, ensure the snippet runs on the front-end.

Now you can visit the Settings menu > Media to specify your own size on thumbnail size.

If you have shared thumbnail size for posts or other post types, you can use this snippet instead.

add_filter( 'woocommerce_gallery_thumbnail_size', function( $size ) {
  return array(
      'width'  => 180,
      'height' => 180,
      'crop'   => 1, // Allow cropping. Use 0 to disallow cropping.
  );
});

P.S.:

You can do this method if you don’t have access to set a custom size for gallery thumbnail on WooCommerce product either via Customizer or theme’s settings panel.

Leave a Reply

Your email address will not be published. Required fields are marked *