WooCommerce: How To Change Product Image Size

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: Height of single or main product images will remain uncropped and not affected by the cropping settings.

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

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:

/**
 * @snippet       Edit Image Sizes @ Storefront Theme
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 6
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */

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 thumbnail 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)

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.

14 thoughts on “WooCommerce: How To Change Product Image Size

  1. 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.
    Thanks

    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!

  2. 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

  3. 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?

  4. 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.

    Marco

    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/

  5. 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

  6. 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

Questions? Feedback? Support? Leave your Comment Now!
_____

If you are writing code, please wrap it between shortcodes: [php]code_here[/php]. Failure to complying with this (as well as going off topic, not writing in English, etc.) will result in comment deletion. You should expect a reply in about 2 weeks - this is a popular blog but I need to get paid work done first. Please consider joining BloomerArmada to get blog comment reply priority, ask me 1-to-1 WooCommerce questions and enjoy many more perks. Thank you :)

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