WooCommerce: How To Change Product Image Sizes

WooCommerce lets you resize the product images on Single Product and Shop pages from Appearance > Customize > WooCommerce > Product Images.

Besides, you don’t have to manually regenerate the images after resizing them with an additional plugin, as WooCommerce can crop, resize and automatically regenerate image sizes out of the box.

Despite this seems easy enough, it often happens that themes or plugins may override the “Customizer” settings, and even hide them entirely, which causes a lot of confusion.

In this post, we’ll take a look at the default WooCommerce image settings, and finally with a list of FAQ we’ll try to cover all possible scenarios in case you can’t find a solution. Got a question? Feel free to use the comment area!

Resizing Single Product Page Featured Image

Follow these steps to change single product image size:

  1. Go to Appearance > Customize
  2. Then go to WooCommerce > Product Images
  3. Write your desired width in “Main image width” field.
  4. Click on “Publish

Note 1: Height of single or main product images will remain uncropped and not affected by the cropping settings.

Note 2: Read the FAQ if you don’t see this setting.

Resizing Shop Page Product Thumbnail Image

Follow these steps to change shop, catalog and product category image size:

  1. Go to Appearance > Customize
  2. Then go to WooCommerce > Product Images
  3. Write your desired width in “Thumbnail width” field.
  4. Click on “Publish

Note: Read the FAQ if you don’t see this setting.

Also, you can define the “height” of the shop thumbnails by setting up the width:height aspect ratio in the “Thumbnail cropping” section:

  •  1:1: If you select 1:1, your images will be cropped into squares
  • Custom: In Custom you can select the aspect ratio of the image. Here is some of the popular aspect ratio (1:1, 5:4, 4:3, 3:2, 16:9 and 3:1).
  • Uncropped: Height of the image will be untouched. Images will display using the aspect ratio in which they were uploaded.

FAQ (Frequently Asked Questions)

1. I can’t find Main image width and Thumbnail width sections?

One of the most common issues reported by store owners is that “I can’t seem to find the Main Image Width and Thumbnail Width Fields in my Appearance > Customize > WooCommerce > Product Images“.

The reason behind this is, your theme has declared WooCommerce support and defined those settings in its PHP functions. If it’s predefined then they are removed from the Customizer. So basically, If your theme declares image size in theme support, image width settings are not available.

2. How can I change Main image width and Thumbnail width if they are set by Theme?

You have to override the image widths set by your theme via code. For example, In Storefront, you will not find any Main image width or Thumbnail width settings because they have them set via storefront/inc/class-storefront.php:

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

In Storefront, Single Product Image has been set to 416px wide and thumbnail to 324px wide. In that case, you can override this call via your child theme. Make sure to manually regenerate the thumbnails afterwards, from WooCommerce > Status > Tools > Regenerate Thumbnails.

 * @snippet       Edit Image Sizes @ Storefront Theme
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 7
 * @community     https://businessbloomer.com/club/

add_filter( 'storefront_woocommerce_args', 'bbloomer_resize_storefront_images' );

function bbloomer_resize_storefront_images( $args ) {
   $args['single_image_width'] = 999;
   $args['thumbnail_image_width'] = 222;
   return $args;

3. What’s the ideal upload format for WooCommerce product images?

Square shape, white background, PNG or JPG, min 600 * 600 pixels (no more than 1000 * 1000 pixels)

4. My shop images are all over the place. What’s wrong?

Did you enable “1:1 thumbnail cropping”? That’s the only way to make them consistent (which takes you back to answer #3 – the ideal upload size is a square image!).

If 1:1 thumbnail cropping is not for you or does not work, either:

  • resize all images and make them consistent in ratio (all 4:3, all 2:5, etc., depending on your “Thumbnail cropping” > Custom settings
  • make sure image sizes are not BELOW the ones defined in the settings. If your Thumbnail width is 350px and you upload an image that is less than 350px wide, your theme may either stretch it (it will show pixelated) or not (it will take a height that is less than the rest of the images)

Related content

  • WooCommerce Visual Hook Guide: Single Product Page
    Here’s a visual hook guide for the WooCommerce Single Product Page. This is part of my “Visual Hook Guide Series“, through which you can find WooCommerce hooks quickly and easily by seeing their actual locations (and you can copy/paste). If you like this guide and it’s helpful to you, let me know in the comments! […]
  • WooCommerce: Disable Variable Product Price Range $$$-$$$
    You may want to disable the WooCommerce variable product price range which usually looks like $100-$999 when variations have different prices (min $100 and max $999 in this case). With this snippet you will be able to hide the highest price, and add a “From: ” prefix in front of the minimum price. At the […]
  • WooCommerce: Hide Price & Add to Cart for Logged Out Users
    You may want to force users to login in order to see prices and add products to cart. That means you must hide add to cart buttons and prices on the Shop and Single Product pages when a user is logged out. All you need is pasting the following code in your functions.php (please note: […]
  • WooCommerce: Add Custom Field to Product Variations
    Adding and displaying custom fields on WooCommerce products is quite simple. For example, you can add a “RRP/MSRP” field to a product, or maybe use ACF and display its value on the single product page. Easy, yes. Unfortunately, the above only applies to “simple” products without variations (or the parent product if it’s a variable […]
  • WooCommerce: Show Number Of Products Sold @ Product Page
    WooCommerce database already stores the number of products sold for you. Therefore, you may want to show such number on the product page, close to the Add To Cart button. As we’ve seen in my book Ecommerce and Beyond, showing the number of sales for each product can increase your sales conversion rate. All you […]

Rodolfo Melogli

Business Bloomer Founder

Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as an independent WooCommerce freelancer since 2011. His goal is to help entrepreneurs and developers overcome their WooCommerce nightmares. Rodolfo loves travelling, chasing tennis & soccer balls and, of course, wood fired oven pizza. Follow @rmelogli

16 thoughts on “WooCommerce: How To Change Product Image Sizes

  1. Is there a way to keep a 300×300 square picture container and have the Images display “centered” using the aspect ratio in which they were uploaded within that container? I have some products that are long and some tall. I just want all of my Pics to line up perfectly.

    1. Yes, you need to disable thumbnail cropping and they will show with their ratio. In regard to centering them, CSS is also required

  2. Hello!
    Im having a problem with blurry images in my shop page.
    They are all blurry, but if i click on the image and go to the single product page and then go back to the shop page the image is crystal clear. I cant seem to find any answers online so i would be very grateful for an answer.

    1. That’s odd, Cato. I’m afraid this is custom troubleshooting work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  3. Hi Rodolfo
    The article was helpful and solved my problem. Thanks for your detailed instructions. I know it is not relevant, but do you know any good plugin for zooming in product images on hover over the product image, please? also, my theme is called enfold. I’m looking to have small gallery-like thumbnail images under the main product image. Ideally, a plugin that does both?

    Thanks for your time, Cheers

    1. Hey Sam, that’s default WooCommerce, as soon as you upload a featured image that is big enough, zoom will activate. Also, if you add product gallery images, they will show under the featured image. Have you tried it yet? Otherwise it means Enfold has its own way, but I doubt it in this case

  4. I have the product images set to have the thumbnail cropping set to 1×1. It had worked previously and now the change doesn’t stay. Even though it is published when you visit the site the product images are still all different sizes and don’t line up nicely.

    1. Tried switching theme temporarily?

  5. Hi Rudolfo, Can you tell me where to edit the variation thumbnails? https://d.pr/i/uWFS4Q. I want them to be 150px X 225px.


    1. Hi Marco, that’s the “Product Gallery”. Maybe by changing the number of them? https://www.businessbloomer.com/woocommerce-change-no-thumbnails-per-row-product-gallery/

  6. Hello!

    Isn’t there a way I can insert my new code via e.g. a plugin like MyCustomFunctions

    The plugin basically adds code VIA the WP dashboard?

    This way, upon theme update, the inserted code would remain

    Thank in advance!

    1. Sure, whatever you prefer. You can also use the Code Snippets plugin if you wish

  7. Thanks for the article!

    1. Welcome!

      1. Hello,

        I am using theme in which the developer have obviously set the image size
        But the problem is that he told me to upload images of same proportions to avoid stretchy images
        The problem I am currently facing is that the developer support meant on proportions 700 px x 850 px
        The question is how could I get all of my images resized to these proportions if they were uploaded 800 px x 800 px
        Is it possible to resize them to 650 px x 800 px instead of 700 px x 850 px and how should I do that

        Please help me because my store is showing images with bigger height than weight and the images look silly on the single product page

        Thank you in advance

Leave a Reply

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