How to Manage WooCommerce Product image Sizes in 3.3+

16 Shares

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!

 

16 Shares

Leave a Reply

27 Comments on "How to Manage WooCommerce Product image Sizes in 3.3+"

avatar
  Subscribe  
newest oldest most voted
Notify of
Karolína Vyskočilová
Guest
Karolína Vyskočilová

Hi, great article, thanks a lot. I have totally unrelated question – how do you do this type of screenshot? https://iconicwp.com/wp-con… Thanks in advance. Karolina

Hans
Guest
Hi James, thanks for the article and explanation. If I understood the article correct, it doesn’t solve my problem with the new functionality yet. I was looking for a solution for my product archive grid layout, that before showed mages of all the same dimensions, but after the update shows images of varying height. Is there still a way to hard-crop all the image sizes of woocommerce? I am not in the habit of resizing the full image-sizes before upload, so without hard cropping they will vary in height, it would now seem to be the only solution to get… Read more »
Klaus-Dieter Weber
Guest
Thanks a lot for this overview, I had to go the painful way to figure out all of these changes some weeks ago… I have a big issue since this update: I used the plugin “simpel image sizes” to produce UNCROPPED thumbnails, that considered not only a maximum width, but also HEIGHT. This is extremely important for my website, which shows art pieces that have partly extreme dimensions like 1:8. It is unthinkable to crop them as thumbnails, still it is also no option to show such objects with e.g. 200px width, because the thumbnails end up having 1600px height… Read more »
Hans
Guest

Hi James,

perhaps a bit off-topic, but do you perhaps know of a way to automatically cut the full image to a certain size on upload? That also would solve some problems, perhaps. Depending on manual cutting before upload seems a dependency that is only as reliable as the discipline of the users.

Regards,
Hans

Jerry
Guest
Ok, so I’m using the Storefront Theme and as you mentioned above, “main image width” and ” thumbnail width” settings are missing. You mentioned : “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/.” You say not to worry, well I am worried because I still don’t know what to do. Questions: 1: How and where can I find the info you reference under “woocommerce/includes/theme-support/.” ? Where / what is this? Is… Read more »
Hans
Guest
Hi Jerry, perhaps I can help a little bit with finding answers to your questions. The folder mentioned in question 1 is part of the plugin and can be found in the wp-content/plugins/ folder. You can access that with an ftp client or rather unzip the woocommerce plugin after download and look in the unzipped files for this info. I wouldn’t use the wp-admin for that, although perhaps it might be possible using the editor under the plugins menu. The theme-support I found there is for the twenty-xx themes that are served with any new wordpress installation, and not for… Read more »
Jerry
Guest
Hans, Thanks for your response. I know you are trying to help but you’re just confusing me. Let me recap. As I mentioned in my original post, I’m using the Storefront theme. ( Storefront theme is by auttomattic, the makers of woocommerce) It is indeed known and expected that if you are using the Storefront theme, the “main image width” and ” thumbnail width” settings are now missing from the woocomerce customizer image settings. The Question: (I’m looking for the best results that I can expect from the storefront theme WITHOUT any CSS mods or adding additional plugins, ) What… Read more »
Hans
Guest
Well it is not easy to give a simple answer to a question that also depends on the details of your installation. But I will give it another shot. Actually this should probably be a support question for the developers (WooThemes/Automatic), since the documentation of the theme doesn’t answer this basic question. I’ve looked into the theme files for you and found (in “themes/storefront/inc/class-storefront.php” line 118 and 119) that the storefront sets the width for the single product page to 416 and the thumbnail image width to 324. The height isn’t hard defined, so the aspect ratio isn’t either. The… Read more »
Hans
Guest
Thanks, James. Helas, the subject of images is no longer a simple subject. To be complete the subject of responsiveness should also be considered (to prevent a large image size is presented on a small device). But that is something theme- and plugin developers should consider, build and inform about. Using an array of plugins means it probably will never be perfect, although time will help this probably, since it will make connections and devices faster making size less a problem. When looking for answers myself I discovered that the responsive media functionality in WordPress itself only offers alternative images… Read more »
Jerry
Guest

Great answer Hans! You got it this time. Thanks dude!! You rock! Too bad the folks at Automattic have not provided the public with this detailed and necessary info, especially for folks who are using the Storefront theme.

Hans
Guest

Thank you. Glad it helped.

I agree that the docs should at least inform you about the sizes that are hard-coded in the plugin. The image ratio demands can vary between different parts of your website too, so that complicates it a bit further, but for Storefront and WooCommerce only, this is what it is.

Ann
Guest
Hi James, Thank you very much for the information, however I can’t get the code addition to the theme child functions.php to do anything – the adjustable size facility is still missing from the Woo interface. Should I add the code to the theme functions.php file itself? I thought it wasn’t a good thing to do, hence using child themes? The reason I want to do this at all is that I have a theme with a demo layout that’s absolutely perfect for me and, in order for the Woo products to look right, I need to input the exact… Read more »
ctek
Guest

Thanks For code

Mike Stott
Guest

Thanks James, this was useful following an update which seemed to revert all our images back to thumbnails in our product list 🙂

Bruno
Guest
Hi Thanks for the article. I have a problem that seems not to have been addressed. My product images are of either vertical or horizontal orientation (200 x 300px and 300 x 200px). All have the same aspect ration (3:2 the horizontals, 2:3 the verticals). I want all the thumbnails to be of the same size, whether they are horizontal or vertical. If I use the available options (width, ratio, no crop) I can only choose to have the horizontal images too small OR the verticals too large. Because I can only set width, the height will adjust accordingly: Setting… Read more »
Bruno
Guest

What worked for me:
Add to the theme’s functions.php file

function custom_woocommerce_gallery_thumbnail_size() {
return ‘thumbnail’;
}

function ratio_check_by_image_size($attachment)
{
$img_size = ‘ square’;

if(!empty($attachment[1]) && !empty($attachment[2]))
{
if($attachment[1] > $attachment[2]) //landscape
{
//only consider it landscape if its 1.7 times wider than high
if($attachment[1] > $attachment[2]) $img_size = ‘landscape’;
}
else //same check with portrait
{
if($attachment[2] > $attachment[1]) $img_size = ‘portrait’;
}
}

return $img_size;
}

add_filter(‘woocommerce_get_image_size_thumbnail’, ‘woocommerce_get_image_size_thumbnail_mod’, 10, 2);
function woocommerce_get_image_size_thumbnail_mod($size) {
global $product;
$image = wp_get_attachment_image_src( $product->image_id, ‘full’ );
$orientation = ratio_check_by_image_size($image);

if($orientation == ‘portrait’) {
$size[‘width’] = 200;
$size[‘height’] = 300;
} else {
$size[‘width’] = 300;
$size[‘height’] = 200;

Bruno
Guest

Edit:
the comment “//only consider it landscape if its 1.7 times wider than high”
should read
“//only consider it landscape if it’s wider than high”