How to Manage WooCommerce Product Image Sizes

Images are one of the most important parts of any online store. It’s one of the reasons we built WooThumbs for WooCommerce, a plugin for presenting your product images in the best possible way.

However, there’s so many different image sizes used in WooCommerce. It’s not always easy to figure out where you can change them to suit your specific needs.

This guide should help you see through the fog and get you well on your way.

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

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 pre-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/. This means they already set the best image sizes for your theme.

But often you’ll find these settings elsewhere in the admin area. Either in your theme’s settings page, or the theme settings inside Customizer. If they’re nowhere to be found, then your theme may be very strict on the sizes it uses and not allow them to be easily changed.

I Want Control of the Single Image Size Again

If you’re a happy user of our WooThumbs plugin, then changing your WooCommerce image sizes 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

You can also set the size of the single product gallery image thumbnails when using WooThumbs. The sizes you set in WooThumbs will only ever affect the images on the single product page.

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.

You can add the code to your theme’s functions.php file temporarily, then load your website. Once you’ve loaded the website, you can remove or comment out these lines of code so they don’t run every time.

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 the most recent versions of WooCommerce 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!

42 Comments

  1. Karolína Vyskočilová says:

    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

    • James Kemp says:

      Thanks!

      On Mac I take the initial screenshot of the browser (cmd + shift + alt + 4), then press “space” and click the window. This captures the full frame and shadow. The rest is me going wild in a photo editor.

      • Karolína Vyskočilová says:

        I see 😀 I was wondering about the zoom-in effect and hoped for a plugin or so. Thanks anyway, it looks really cool – does perfetly two things on a small space – showing where at the page and detail with the setting. Good, I usually endup with big images.

  2. Hans says:

    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 the grid right. What would be your advice for this? Right now it seems the current solution gives less control on the presentation than before. Needing another plugin to change that would add to an already heavy system, so I’m not sure that would be the best solution for me.

    Thanks,

    Hans

    • James Kemp says:

      Hey Hans, actually, images in the catalog now use the “thumbnail” size. Which means if you have them set to square crop or a 1:1 ration, they will be cropped as a square like before. You may find they need regenerating, so you can either change the size and then change it back, or use an image regeneration plugin.

      • Hans says:

        Hey James,

        thanks for the tip. I will look further into it, but my bloated LMS theme might interfere in some way and doesn’t seem to reflect what you’re saying and might use some custom functions and templates. Good to know how it should work. Changes that break stuff are a bit of a nuisance, but we have to deal with them as they come. Just a cosmetic problem fortunately. Thanks again.

        Cheers, Hans

      • Hans says:

        Hi James,

        To make the circle round again… I found out that my LMS theme replaced the WooCommerce loop with own custom functions and used the shop_single thumbnail size in stead of the shop_catalog. After replacing it with the correct shop_catalog size it worked well again, at least on the catalog grid layout.

        Still remains that on the single pages the image has a varying height now and doesn’t have a consistent presentation anymore, by removing the previous functionality for cropping the shop_single size. That was always the default setting, but could be changed in admin. I suppose I could now make a custom single template, replacing the shop_single by a custom size, but getting the shop_single size to hard crop again would be preferable to me. I’ll find a solution for that too, I guess.

        Pity that WooCommerce decided to change functionality like that, since I know and own more theme’s who’s design builds on fixed single product image size. Perhaps something for Woo support…

        Thanks for the help, Hans

        • James Kemp says:

          Hey Hans,

          Yeah, there’s no cropping for shop_single anymore, if they don’t add it back in soon based on feedback then I’ll add it as an option to my WooThumbs plugin.

          In terms of the image sizes, they are now named woocommerce_thumbnail and woocommerce_single – best to use those names as the others will be removed eventually.

          Thanks,
          James

          • Hans says:

            Hi James, thanks for that warning, I’ve changed it to woocommerce_thumbnail now and will check the rest of the theme on that soon.

            I find that in any general theme I buy I have to check how they handle thumbnails and that often it is incomplete or imperfect. Things like the usage of the correct size (often they even use full when a smaller size is needed) or support of retina displays and such. This theme especially seems flawed, since I have found and corrected a lot of errors in it. At some point I will replace it, but most themes out of the box only support some of the plugins I use and there is some lock in effect. I probably end up having to customize or build a theme myself.

            i will try your plugin too at some point. It seems useful. But I rather slim down the number of plugins if I can, since I’m told above 60 plugins will slow down a website too.

            Thanks again, Hans

          • James Kemp says:

            Yep, a lot of plugins can indeed slow down the site – it ultimately depends how well they’re coded.

            Give it a try some time!

  3. Klaus-Dieter Weber says:

    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 since this WC update.

    Even worse: Because of this feature that thumbnails are produced automatically in the background, even changing the thumbnails directly via ftp is not an option, as they are simply deleted/recreated by Woocommerce!

    So I am stuck, had to go back to 2.6 and would not be able to make any further update anymore.

    Can your plugin produce uncropped thumbnails considering also a maximum height? Or any other solution?

    “Simple image sizes” does not work with 3.3 anymore, as the height parameter – that the plugin accesses – simply not exists anymore.
    Thanks!
    Klaus

  4. Hans says:

    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

  5. Jerry says:

    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 this accessible from my somewhere within my dashboard?

    2): What size and aspect ratio we should make our main image before uploading? 600×600? (I’m using adobe lightroom so I can easily adjust the size and aspect ratio.) So what are the recommendations? Will the Main Image display in the aspect ratio in which they are uploaded? If I do upload all images in 600×600, will the thumbnails be automatically generated and re-sized from this?

    Thank you!

    • Hans says:

      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 WooThemes Storefront theme. Perhaps the storefront theme documentation will give you some further information about settings or how to customize.

      The answer on Question 2 depends on the sizes you need for your theme-design and if you want to support Retina displays. I myself use the Retina 2x plugin that makes cropped versions of double the size for every image defined in woocommerce. It means that the upload image must have at least double the size of the largest size that is defined by the theme for normal display. On retina displays this dubble sized version will be displayed instead of the normal versions.

      If you cannot define the height of the single product image that may define the dimensions (width vs height) you will want to use for upload. So if the single image is defined as 600 width and you want an image that is also displayed as 600 height in the single product page, you will have to upload an image that is equally heigh as it is wide and has to be at least 600 wide or for retina display (if you support that in the theme or with a plugin) 1200 px. In case the theme displays the image elsewhere in larger sizes, you need to adapt the upload sizes accordingly offcourse.

      It is standard in WordPress that on upload any new image is cut and cropped to all the defined image dimensions, so this will also be done to the sizes your theme defines for WooCommerce. The new functionality as of WooCommerce 3.3 is (as I understand it) that when WooCommerce image settings are changed in the customizer that you don’t need to have a plugin to cut existing images to the new dimensions.

      Does that make sense? I hope it will help somewhat.

      Regards, Hans

      • Jerry says:

        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 size and aspect ratio should make my main image before uploading?

        • Hans says:

          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 gallary thumbnail size is defined as a square with sides of 100px.

          You can set the dimensions for the thumbnail size (used in the catalog) in customizer. It can be either cropped to same height as width (1:1) or set to a custom aspect ratio or set to not crop at all (which means the aspect ratio will be whatever you choose to upload).

          This leads to the simple answer that your upload image must be at least 416px wide and the height depends on your settings, but should probably be at least 416px high.

          If you have installed some plugin like Retina 2x then it would be wise to let your uploaded images be at least 832px * 832px.

          Since the image on the single product page will show in the same aspect ratio as the image you upload, it really up to you what ratio you like. The thumbnail size that is used in the product catalog will be cropped according to the settings in customizer, so that will display fine as long as the full image is large enough. I myself use 1:1 to make the catalog thumbnail square.

          You might want to use larger images than the above mentioned if f.i. you want to enable users to zoom the product image, but that is up to you.

          Like I said, the aspect ratio is not hard cropped anymore in the single product page, so is really up to you. If you like the height to be larger than the width, just choose the aspect ratio you like in the single product page and set the woocommerce image settings in customizer to hardcrop to your preference for the catalog.

          Better? Perhaps otherwise you could ask someone that can look at the specifics of your configuration or theme support.

          Cheers, Hans

          • James Kemp says:

            This answer from Hans is perfect really!

          • Hans says:

            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 of the same aspect ratio, making it preferable
            to have as much image sizes on your website having the same ratio, while
            presentation might dictate that other ratio’s are probably better presentation for
            different devices. It’s a work in progress and the developers should
            preferably shield users from that sort of issues, while aiming for the smallest page-loading time. It might be(come) more and more a specialist game with the investments that requires. We’ll see

            Cheers, Hans

          • Jerry says:

            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 says:

            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.

  6. Ann says:

    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 image sizes as in the demo instructions. I’ve asked Support from where I bought the theme and, despite them already knowing that their instructions are outdated, they only showed me where the missing input boxes used to be (!) and told me to read the Woo instruction files. Great support – not!

    Any help you can give would be very much appreciated, thank you.

    • James Kemp says:

      Hey Ann,

      Yes, you should be able to just add it to your child theme’s functions.php file. You’re right in thinking it shouldn’t be added to the parent theme.

      You may find you have to wait for the images to regenerate. If you go to WooCommerce > Status > Logs, there’s usually a regeneration log in there which will show you how far along it is. It regenerates automatically.

      Of course, the ideal solution is to use my WooThumbs plugin as this now has options to set the single image width and thumbnail image sizes without affecting anything else. https://iconicwp.com/products/woothumbs/

  7. ctek says:

    Thanks For code

  8. Mike Stott says:

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

  9. Axel Metayer says:

    Thanks, that save me a lot of time to know where to change the WooCommerce image sizes. I’m going to opt for 300 Pixel with so the cart buttons are next to images. A recommendation of a good default product and thumbnail size cold be added.

    • James Kemp says:

      Hey, it’s hard to recommend default sizes as it depends on your theme really. All themes use different sizes. I’d usually suggest setting your image to the largest size that the image will ever be displayed at when inspecting it on a responsive website.

  10. Bruno says:

    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 width = 300px + no crop results in
    – horizontal thumbnails of 300 x 200px (width x height) – correct
    – vertical thumbnails of 300 x 450px (width x height) – too large (height >300px)

    Setting width = 200px + no crop results in:
    – horizontal thumbnails of 200 x 133px (width x height) – too small (width and height)
    – vertical thumbnails of 200 x 300px (width x height) – correct

    I think I would need a container of 300 x 300px into which the image should be placed at its maximum dimension (no dimension is allowed to be >300px, either in length or in width).

    Just as when you take a rectangular object (e.g. a matchbox or a sheet of paper): if you rotate the object by 90° it will not change its size – why should an image?

    Does anybody have a suggestion on how to achieve this?

    Thanks

    • Bruno says:

      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 says:

        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”

  11. Rapjho says:

    oh this is an oooooold thread i think. I can not find anything like this. and want to customize the images them all by my own.

  12. Julie says:

    We recently upgraded to 3.5 and PHP 7.2. Our main image on a VARIABLE PRODUCT is now defaulting to gallery thumbnail size when a user selects option(s) from the drop-down. Do you have any suggestions on how to ensure that the main image width remains at 600 and does not shrink to gallery thumbnail when user selects options for a variable product?

    • James Kemp says:

      Hey, your best bet would be to regenerate the image sizes – there’s a few plugins around which can do that for you.

  13. louis says:

    Hey, how to do the same thing for mobile / handheld devices, in the functions.php ?

  14. Alexander says:

    Oh thank you so much for the code to deactivate theme-support for image sizes! I spent so much time in searching for a solution. You realy helped me a lot!

  15. Luc says:

    A question on that item and I hope you can help me. It concerns the square where you fill in the ordered quantity. Say you want to order 1000 pieces of the item. In that square you see only 2 digits. How can I increase that square .
    See the shop page on my website.
    Thank you for your help.

Leave a Reply

Your email address will not be published. Required fields are marked *