How to Manage WooCommerce Product image Sizes in 3.3+

I’m sure you’ve noticed the new update to WooCommerce rolling out. With it came a few interesting changes, one of which, was a big change to how product image sizes are handled.

Previously you could set all of you product image sizes in WooCommerce > Settings > Products > Display, but that entire section has now vanished.

So how do you set the product image size in WooCommerce now?

Image sizes can now be configured under the Customizer. Go to Appearance > Customize > WooCommerce > Product Images.

WooCommerce product image size settings

Here you can set the Main image widthThumbnail width, and Thumbnail cropping.

Image heights have intentionally been removed, as they are calculated automatically based on your settings. It’s worth noting here that your main, or “single”, product image no longer has any crop settings; they will always show uncropped.

As soon as you make any changes to these settings, WooCommerce will automatically generate the new image sizes. This may take a little while to process, but it runs in the background.

If you want to see the status of the background regeneration, you can go to WooCommerce > Status > Logs and select the log from the dropdown beginning with wc-image-regeneration.

The Main Image Width and Thumbnail Width Fields are Missing

You may notice that the Main image width and Thumbnail width settings are missing from your customizer screen.

Not to worry, if your theme has declared WooCommerce support and defined those settings, then they are removed from the customizer. WooCommerce also comes packaged with some popular theme support declarations, which can be found under woocommerce/includes/theme-support/.

I Want Control of the Single Image Size Again

If you’re a happy user of my WooThumbs plugin, then in v4.6.10 this is simple!

Along with the other awesome benefits of using WooThumbs, like multiple images per variation and inline video players, you can also easily set your single product image size.

Simply go to WooCommerce > WooThumbs > Display and enter a value in the Single Image Width (px) field. On save it will trigger the background image regeneration process, and the WooThumbs image cache will be cleared automatically once complete.

What are you waiting for?

If you're not using WooThumbs yet, then what are you waiting for? Try the 14-day free trial and gain access to all of the awesome benefits of using WooThumbs instantly!

Get Free Trial

If you’re not using WooThumbs, and you still want to change the image sizes in your theme, then you can either remove or modify the theme support values.

In your child/custom theme’s functions.php, or in a custom plugin, you can use the following code to remove the theme support and have the options show again in customizer:

Alternatively, you can change the values to something else like so:

If you’re building a custom theme with no existing WooCommerce support declaration, you’d just add support like so:

How Do I Set Catalog Image Sizes?

In WooCommerce 3.3+, catalog image sizes have been removed. Instead, the catalog uses the same settings as thumbnails.

How to Set WooCommerce thumbnail Cropping Programatically

It’s possible to set the cropping value programatically. You can simply run an update_option() call like so:

The values can be any of the following:

  • uncropped
    Don’t crop thumbnail images at all.
  • 1:1 (any ratio)
    Crop images based on the thumbnail width and this ratio.
  • custom
    Custom is also based on the thumbnail width, and comes alongside two other options:

    • woocommerce_thumbnail_cropping_custom_width
      A width ratio, for example 4.
    • woocommerce_thumbnail_cropping_custom_height
      A height ratio, for example 3.

To set the cropping to custom, for example, you can do this:

Note: WooCommerce watches for changes to any of these options and will automatically begin a background image regeneration process if they are changed.

Conclusion

There were some big changes to how image sizes are handled in WooCommerce, and it may come across as confusing at first.Click To Tweet

I hope you now understand how to deal with these changes, and how to customise them to suit your needs.

In my opinion, one of the best things to come from this is the background image regeneration. This will save users a lot of time and confusion!

Is there anything I’ve missed? Let me know in the comments!