Tips, WooCommerce Tutorials

How to Manage WooCommerce Product Image Sizes in 2022

Images are one of the most important parts of any online store. However, there are so many different WooCommerce product image size types used in WooCommerce, it’s not always easy to figure out where you can change them to suit your specific needs. 

Because WooCommerce images can get a little complicated, we’ve put together this guide to go over each aspect of WooCommerce images, so you can skip ahead to the part that suits you.

The plugins mentioned in this guide:

Start your 14-day free trial of WooThumbs

Start your free trial now to instantly change image sizes and improve your product gallery.

or learn more

In this guide we’ll show you:

What are the benefits of setting your WooCommerce product image sizes?

Before we dive into the ‘how’, you may be wondering about the why. After all, it’s extra effort and time that you could be spending on your business, right?

The primary benefits of setting your WooCommerce product image sizes are:

  • Preventing image blurriness — images that are the wrong size can appear blurred, giving a bad first impression to your buyers. 
  • Speed — the larger an image, the longer it takes to load, and it’s a well-known fact that slow websites result in less revenue and unhappy users. 

So now we know why you should be spending some time on your WooCommerce product images, now let’s dive into the how.

What’s the best size for WooCommerce product images?

The best size for WooCommerce product images largely depends on the theme you’re using for your store and if you’re using an image zoom plugin like WooThumbs or not.

If you’re selling a simple product like a plain t-shirt, you may be able to get away with an image size that’s 800 – 1000px wide. 

WooCommerce image zoom
Image Zoom using WooThumbs for WooCommerce

If you have a product that’s detailed or complicated, however, uploading a larger image will allow potential customers to zoom in and see those details up close. In that case, an image that’s 2000px wide may work better for you.

Note: Never upload an image that’s too large. An image that’s oversized will slow your site down and as a result, will likely affect sales.

How to set WooCommerce product image sizes

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 width, Thumbnail 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.

Depending on your theme, you might see image thumbnail width options, or you might only see thumbnail cropping options. 

If your theme is controlling the size of your images, the default is usually as follows:

  • The image thumbnail (this usually shows on the category pages and includes the category image itself) – 300px by 300px.

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.

WooCommerce image regeneration

How to set the WooCommerce category image size

In WooCommerce 3.3+, catalog image sizes have been removed. Instead, the catalog uses the same settings as the thumbnail settings. To change this, go to Appearance > Customize > WooCommerce > Product Images > Thumbnail Width.

WooCommerce product image size settings

Add WooCommerce product image hover effects to your category pages

Once you have your product images sized on the category page, it’s worth exploring how you can maximize their ability to make you sales.

With Image Swap for WooCommerce, you can add product image hover effects to your category pages. These will allow customers to hover over, or click your product images and be shown additional images right from the shop page.

You’ll also have the option to add a zoom effect to these images so customers can see your product in detail before clicking through.

Thumbnails effect using Image Swap for WooCommerce

With Image Swap installed, you’ll save customers time, unnecessary clicks, and frustration.

Curious? You can get a 14-day free trial of Image Swap for WooCommerce here:

Start your 14-day free trial of Image Swap for WooCommerce

Start your free trial right now and instantly add product image effects to your WooCommerce store.

or learn more

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

image width and thumbnail width fields are missing

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

If in doubt, contact your theme developer or use their support system to double-check.

How to change your image size with a WooCommerce product image plugin

If you’d like to have more control over the image sizes in your WooCommerce store, then you can download a WooCommerce product image plugin to help with that.

WooThumbs for WooCommerce allows you to change your WooCommerce image sizes on the single product page with a few easy settings.

As a bonus, it also allows you to:

woocommerce video

Install WooThumbs

To get started, start your 14-day free trial of WooThumbs from the Iconic store:

Then follow these steps:

  1. Go to Plugins > Add New > Upload Plugin.
  2. Choose the zip file you downloaded, upload, and then click ‘Activate’.
  3. Once activated, you’ll need to enter your license key.

Now that we have WooThumbs installed, we can move on to changing your image sizes.

To change your image sizes with WooThumbs, simply do the following:

  1. Go to WooCommerce > WooThumbs > Display
  2. Scroll down to the Image Sizes section
image sizes woocommerce
  1. Enter your desired size in the Single Image Width (px) field.
  2. Click Save and it will trigger the background image regeneration process for your single image thumbnails, and the WooThumbs image cache will be cleared automatically once complete.
  3. Here you can also determine the Single Image Crop Ratio. For example, you could enter 1:1, 4:6, or 16:9 to crop your image in different ways.
woocommerce product single image size

Start your 14-day free trial of WooThumbs

Start your free trial now to instantly change image sizes and improve your product gallery.

or learn more

How to set or change the image size of your WooCommerce product gallery

WooThumbs for WooCommerce also allows you to set the image sizes in your product gallery. 

  1. Go to WooCommerce > WooThumbs > Display.
  2. Scroll down to the Image Sizes section.
change the image size WooCommerce product gallery

Here you will see various settings that you can change for your WooCommerce product gallery. Including:

  • Thumbnail Image Width (px) – Width of the product gallery thumbnails. This won’t affect any other image sizes on your site.
  • Thumbnail Image Crop Ratio – How your product gallery thumbnails will be cropped. For example, 1:1, 4:6, 16:9.
  • Large Image Size – Choose a size for your large images. Hover, zoom, and full screen will both use the size you select here.

Common WooCommerce image problems

Sometimes when customizing your WooCommerce product images, you may run into a few problems, some of which can be fixed fairly quickly. 

We’ve put together some of the most common here, but if you have any more, please leave a comment below and we’ll see how we can help.

My WooCommerce product images are different sizes

If your product images are showing up as different sizes in your WooCommerce store, there are a few things you can do:

  1. Make sure all your product images are the same size before uploading them. Our recommendation is to create a template using an image editor that you can use for every product image. See ‘What’s the best image size for WooCommerce products?’ for the best image sizes to use.
  2. Ensure you’ve adjusted your WooCommerce product image settings to include thumbnail sizing and cropping.

How to set WooCommerce thumbnail cropping or hard crop in WooCommerce

To change how your thumbnails are cropped in WooCommerce, simply do the following:

  1. Go to Appearance > Customize.
  2. Then go to WooCommerce > Product Images.
  3. Select the desired cropping setting in Thumbnail cropping. You can experiment here and see changes in real-time.
  4. Once happy, click Publish and your changes will be live.
woocommerce product image size

My WooCommerce product images are blurry

If your WooCommerce product images are blurry then you’ll want to check a few things:

  1. Is your image quality good in the first place? Check the quality of your product image. If it’s low quality, when added to your WooCommerce store, it won’t look as crisp and clear as you’d like.
  2. Check your thumbnail settings. If your settings are looking for a 500px image for your product page and a 150px image on your catalog page, but you only upload a 150px image, then WooCommerce will automatically enlarge your image, causing it to look blurry. 

To fix this problem, our tutorial for fixing WooCommerce blurry images will help.

Get to grips with WooCommerce product images

In this guide, you’ve learned how to manage WooCommerce product image sizes. We’ve explained how to change product and gallery image sizes, how to improve these with a WooCommerce product image plugin, and gone through some common problems you may come across. 

We all know how important product images are when it comes to making sales in your online store, so make sure yours are working well with this guide.

Start your 14-day free trial of WooThumbs

Start your free trial now to instantly change image sizes and improve your product gallery.

or learn more


James is the founder of Iconic and an experienced WooCommerce plugin developer. He has been featured on numerous WordPress publications.

He is a keen photographer and currently shoots using his favourite mirrorless camera, a Fuji X-T20.

52 Responses

Naim islam 1 year ago

I want to start a new online business. I had a lot of questions about the appropriate image size of the eCommerce website, reading your block I got all my questions answered.
After reading this block, I got a lot of information that I needed very much. This post will be ‍also very useful for new online entrepreneurs.
James, Do you know of any plugin that can be taken for a one-month free trial


Product category images suddenly became vertically aligned, dropping down past my website footer. How do I get them back horizontally aligned again? Thank you.

Mayraj Fatima 1 year ago

Hey,kindly need solution for the same product image box.whwn image size is bigger. The image box became bigger too. So i want that all image boxes become of same size.kindly suggest me some solution.

Jhim admin 1 year ago

Hi Mayray,

Are you experiencing this in WooThumbs? we'll be happy to further assist you with this. Can you please raise a support ticket:- and explain the issue that you were experiencing.


I really appreciate your effort in providing this kind of content to us. Thanks for sharing this with us look forward to more contribution from your side. Get support click here... babashoppify

Learn WooCommerce Completely - Ultimate Guides For WooCommerce Mastery [2020] » RexTheme 2 years ago

[…] How to Manage WooCommerce Product image Sizes— by IconicWP […]

Travel Websites 2 years ago

this is really a useful blog . i think it will be beneficial to all .thank you for such a helpful blog.



thanks for the awesome article. Gave me a really good understanding after crawling the web for quite some time.

Only the code for deactivating theme-support does not work with my storefront theme.
I copied into the functions.php of my child theme, just at the botttom of it. Website still works but the options to size the images did not appear in my customizer -> woocommerce.

I saw above that it works fine for others. So has anybody a suggestions where my mistake is?

Thank you.




I think I am saying something similar to other people here, but I can't seem to find a good solution.

I am using
1. Woocommerce
2. Elementor page builder
3. The Ocean WP theme (accepts custom CSS/JS)
4. Woozone for Amazon Affiliates and Ebay affiliates to import and sync those products
5. Element pack by BD themes
6. Datafeedr to import and sync some products

I would like to make the size of the images in the product archives (displayed on my main page using Elementor widgets). I am also currently using Woocommerce to display all products, and by category, on their respective pages,and ideally settings would apply to all Woocommerce archive images.

1. I do not want to crop the images for the products. Doing so looks bad and unprofessional.
2. Images unfortunately come in several different sizes, and images are uploaded using plugins. They are also synced using those plugins as well.
3. I need to limit the height of the images, and I'm not sure what you mean when you say heights are intentionally removed, and based upon your settings.
4. The best solution would be to resize (but not crop) the images, into a container of a specific size; something like 214 x 214 px. In this way the width may be small in relation the height, but the images will fit completely into the same sizes boxes, giving a professional and uniform appearance on my site.

Is there any way to do this.

Thanks so much,



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.

James Kemp admin 3 years ago

Hey Luc,

This doesn't seem relevant to image sizes in WooCommerce?

Alexander 3 years ago

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!

James Kemp admin 3 years ago

No problem at all - glad you found it useful!


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

James Kemp admin 3 years ago

Hey, most themes are responsive, which means the code here will work across all devices.


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 admin 3 years ago

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


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.


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?



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;


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"

Axel Metayer 4 years ago

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 admin 3 years ago

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.

Mike Stott 4 years ago

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


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 admin 4 years ago

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.


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.

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? 600x600? (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 600x600, will the thumbnails be automatically generated and re-sized from this?

Thank you!


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



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?


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 admin 4 years ago

This answer from Hans is perfect really!


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


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.


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.


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.


Klaus-Dieter Weber 4 years ago

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.


hi, i am facing same problem, had you find any solution? if so plz reply


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.



James Kemp admin 4 years ago

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.


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


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 admin 4 years ago

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.



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 admin 4 years ago

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!

Karolína Vyskočilová 4 years ago

Hi, great article, thanks a lot. I have totally unrelated question - how do you do this type of screenshot? Thanks in advance. Karolina

James Kemp admin 4 years ago


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á 4 years ago

I see :-D 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.

Leave a Reply

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