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:
- WooThumbs for WooCommerce – Change your WooCommerce product image sizes without the hassle and improve your WooCommerce product gallery.
- Image Swap for WooCommerce – Add flip and hover product image effects to your WooCommerce category pages.
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.
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.
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.
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.
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.
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.
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:
- Have multiple images for each product variation.
- Add image zoom to your product images.
- Customize your WooCommerce product gallery.
- Add video to your product gallery and more.
To get started, start your 14-day free trial of WooThumbs from the Iconic store: iconicwp.com/woothumbs
Then follow these steps:
- Go to Plugins > Add New > Upload Plugin.
- Choose the zip file you downloaded, upload, and then click ‘Activate’.
- 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:
- Go to WooCommerce > WooThumbs > Display
- Scroll down to the Image Sizes section
- Enter your desired size in the Single Image Width (px) field.
- 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.
- 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.
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.
- Go to WooCommerce > WooThumbs > Display.
- Scroll down to the Image Sizes section.
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:
- 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.
- 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:
- Go to Appearance > Customize.
- Then go to WooCommerce > Product Images.
- Select the desired cropping setting in Thumbnail cropping. You can experiment here and see changes in real-time.
- Once happy, click Publish and your changes will be live.
My WooCommerce product images are blurry
If your WooCommerce product images are blurry then you’ll want to check a few things:
- 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.
- 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.