You are currently viewing How to Change Woocommerce Product Thumbnail Size?

How to Change Woocommerce Product Thumbnail Size?

For some reason, I couldn’t find a way to change the Woocommerce thumbnail size. I thought it was supposed to be changed in theme options or Woocommerce option but turns out it doesn’t completely work like that. Woocommerce uses PHP which I don’t have knowledge about to store thumbnails in specific sizes. In the below code, we are just going to change the Woocommerce php code to our specific size.

				
					// change woocommerce thumbnail image size
add_filter( 'woocommerce_get_image_size_gallery_thumbnail', 'override_woocommerce_image_size_gallery_thumbnail' );
function override_woocommerce_image_size_gallery_thumbnail( $size ) {
// Gallery thumbnails: proportional, max width 200px
return array(
'width'  => '300',
'height' => 150,
'crop'   => 0,
);
}

Code explanation with ChatGPT 

The provided code is a WordPress snippet used to modify the thumbnail image size for product galleries in a WooCommerce-powered online store. WooCommerce is a popular plugin for adding e-commerce functionality to WordPress websites.

Here’s a simple explanation of the code:

  1. The code begins with a comment for clarity, indicating its purpose: “change woocommerce thumbnail image size.”

  2. It uses the add_filter function, which is a way to hook into WordPress and modify or filter specific behaviors or data. In this case, it’s hooking into the woocommerce_get_image_size_gallery_thumbnail filter.

  3. The override_woocommerce_image_size_gallery_thumbnail function is defined and acts as the filter’s callback function. This function receives the current image size settings as its argument (in this case, the $size variable).

  4. Inside the override_woocommerce_image_size_gallery_thumbnail function, it returns an array with new image size settings that will replace the default settings for gallery thumbnails in WooCommerce. Here’s what each parameter in the array does:

    • 'width': It sets the width of the gallery thumbnail images to 300 pixels.
    • 'height': It sets the height of the gallery thumbnail images to 150 pixels.
    • 'crop': This parameter is set to 0, which means the images won’t be cropped to maintain their aspect ratio. Instead, they’ll be resized proportionally to fit within the specified width and height.

In summary, this code customizes the size of product gallery thumbnails in a WooCommerce store. Instead of using the default thumbnail size, it sets the width to 300 pixels and the height to 150 pixels while maintaining the aspect ratio. This can be useful for adjusting the appearance of product galleries to better match the design of your website.

Leave a Reply