How to override WooCommerce Image Sizes

Image sizes are not always fun to deal with in WordPress.

Where are they set?  Where do I change them?  Why are my images not showing up as the right size?

In this guide, we’re going to cover all the basics of how image sizes are set, and how to override each individual image size to make sure your site has the right image sizes you need.

What are the image sizes?

Catalog Image
Image name: woocommerce_thumbnail
The catalog image is the image that shows in an archive page like the Shop or a Category page.

Archive page showing WooCommerce

Single Product Image
Image name: woocommerce_single
The single product image is the main image that will show when viewing a single product page:

Single Product Image

Product Gallery
Image name: woocommerce_gallery_thumbnail
The product gallery shows underneath the main product image on the single product page:

Where are the image sizes set?

Let’s take a default theme like Twenty Seventeen and look to see where the image sizes come from.

Interestingly, the sizes are not set on the theme!  WooCommerce has default image sizes for all the default themes:

add_theme_support( 'woocommerce', array(
'thumbnail_image_width' => 250,
'single_image_width' => 350,
) );
view raw seventeen.php hosted with ❤ by GitHub

As you can see, WooCommerce sets the thumbnail_image_width to 250, and the single_image_width to 350.  The gallery_thumbnail however, is not set so it uses the default 100 x 100 pixel size from WooCommerce.

What if my theme doesn’t declare a custom image size?

If that’s the case, the woocommerce_thumbnail and the woocommerce_single images will be set through the Customizer:

The gallery_thumbnailis going to use the default 100 pixels in this case.

What about the Storefront theme?

Storefront currently set’s the woocommerce_single and woocommerce_thumbnail sizes like this:

add_theme_support( 'woocommerce', apply_filters( 'storefront_woocommerce_args', array(
'single_image_width' => 416,
'thumbnail_image_width' => 324,
'product_grid' => array(
'default_columns' => 3,
'default_rows' => 4,
'min_columns' => 1,
'max_columns' => 6,
'min_rows' => 1
) ) );

How do I override an image size?


Here’s an example of how you can override the woocommerce-single image:

add_filter( 'woocommerce_get_image_size_single', function( $size ) {
return array(
'width' => 400,
'height' => '',
'crop' => 0,
} );

In this example, we’re setting the width to 400, the height to “automatic”, and we are not cropping the image by default.

If you wanted to set the image to a specific size and crop it to fit, you would do this:

add_filter( 'woocommerce_get_image_size_single', function( $size ) {
return array(
'width' => 500,
'height' => 500,
'crop' => 1,
} );


add_filter( 'woocommerce_get_image_size_thumbnail', function( $size ) {
return array(
'width' => 500,
'height' => 500,
'crop' => 1,
} );

This snippet will change the woocommerce_thumbnail image to 500 x 500 pixels and crop the image.


The snippet above will make the single product gallery images 400 x 400 pixels.

What if my image sizes are not showing up as the right size?

What most often happens is that the image sizes are being set correctly, but the theme files are still putting them in containers that are smaller.  For example, in Storefront, if I set the gallery_thumbnail size to 500, they still show smaller because they are given a percentage width based on how many gallery images there are.  If you have 4 images, for example, each one gets a width: 14.2857142857%;  so your images are much smaller than 500 pixels.

The best thing to do in these cases is to make sure the image size is being loaded properly in the markup, and then see if there are any CSS conflicts that are making the image load smaller:

When you change an image size, you might need to regenerate your thumbnails for the new sizes to be created.  To do that, you can use a plugin like Regenerate Thumbnails.

More helpful documentation can be found here:


9 responses to “How to override WooCommerce Image Sizes”

  1. Thanks for this. Look forward to future woocommerce articles.

  2. Thanks for the tips! But the single product image returns “Warning: A non-numeric value encountered in /Applications/AMPPS/www/server/temp/wp-includes/media.php on line 647” if I set the height “automatic”. Getting the same result with the Storefront theme too.

    1. What’s happening is that this requires a numeric value and doesn’t support CSS values like “automatic”. If you want to size it automatically, I would suggest setting one size in pixels here and then using CSS to change how it appears on the site.

  3. excellent help thanks a bunch, saved me hours of searching

  4. Hi Mikey, i have set my shop page to view Categories instead of products.
    Is it in some way possible to define a specific image size just for the category images and keep the product images set to 1:1 cropped ?

    1. This is possible! You would need to use `add_image_size` to set up a new size, hook that into `after_setup_theme` and then return that new image size in the `subcategory_archive_thumbnail_size` filter.

      1. Thanks for the hint. I got it working.

  5. Hi Mikey, thanks for the tutorial !

    I followed it and changed the woocommerce_gallery_thumbnails to 400, however it keeps showing blurry after thumbnails regenerated.
    can you please indicate where it is likely to find the code that force the size as described : “If you have 4 images, for example, each one gets a width: 14.2857142857%; so your images are much smaller than 500 pixels.”


    1. If they are showing blurry it sounds like maybe they were resized from a smaller image? I just tried this on my test site using just the latest version of WooCommerce and it did change the image size but it actually doesn’t change the display – that’s because the theme I am using on my test site set’s the size regardless of how large the image is.

      I would check your theme to see if it’s maybe respecting the right image size (switch to a default theme to see if it looks better?).

      I would also check to make sure you’re on the latest version of WooCommerce and that you don’t have other plugins interfering with your images.

Leave a Reply to mikeyCancel reply