WooCommerce: How To Change Product Image Size

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:

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.

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:

1. Go to Appearance > Customize
2. Then go to WooCommerce > Product Images
3. Write your desired width in “Thumbnail width” field.
4. You can set the height of the images in “Thumbnail Cropping”
5. 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.