
WooCommerce 3.3 introduced a new and easier way to resize the product images. You can now change the WooCommerce Product Image Size from Appearance > Customize > WooCommerce > Product Images.
And the great thing is you don’t have to regenerate the images after resizing them. From WooCommerce 3.3 you can now crop, resize and automatically regenerate images.
Resizing Single Product Page Featured Image
Follow these steps to change single product image size:
- Go to Appearance > Customize
- Then go to WooCommerce > Product Images
- Write your desired width in “Main image width” field.
- Click on “Publish”

Note: Height of single or main product images will remain uncropped and not affected by the cropping settings.
One of the cool features introduced in WooCommerce 3.3 is automatic thumbnail resizing. Meaning after setting the width all of your product images will be automatically resized and regenerated in the background. Previously we had to install “Regenerate Thumbnails” plugin to regenerate the images to new resolution.
Resizing Shop Page Product Thumbnail Image
Follow these steps to change shop, catalog or product category image size:
- Go to Appearance > Customize
- Then go to WooCommerce > Product Images
- Write your desired width in “Thumbnail width” field.
- You can set the height of the images in “Thumbnail Cropping”
- Click on “Publish”

Also, you can define the “height” of the shop thumbnails by setting up the width:height aspect ratio:
- 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.

Frequently Asked Questions:
Missing Main Image Width and Thumbnail Width Fields?
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.
How can I change it if it’s set by Theme Developer?
You have to remove or change the image width settings from your themes functions.php file. For example, In Storefront, you will not find any Main Image or Thumbnail field settings. Because they declared that beforehand in storefront/inc/class-storefront.php
// Declare WooCommerce support.
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
)
) ) );
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.
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
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
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.
Tried switching theme temporarily?
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
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/
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!
Sure, whatever you prefer. You can also use the Code Snippets plugin if you wish
Thanks for the article!
Welcome!
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
Hello Caine, this lesson should help: https://www.businessbloomer.com/lesson/cowmel01/