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.

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.

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

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

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

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

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

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