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
 * @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 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)