WooCommerce is a powerful eCommerce plugin that allows you to sell anything online. One of the great features of WooCommerce is that it allows you to regenerate your product thumbnails.
This can be useful if you change the dimensions of your product images or if you want to change the way your images are cropped.
In this article, we will show you how to regenerate thumbnails in WooCommerce.
Why Regenerate Thumbnails in WooCommerce?
As we mentioned, regenerating thumbnails is useful when you change the dimensions of your product images. By default, WooCommerce will generate 3 different sizes of each image that you upload:
- Thumbnail size (150x150px)
- Catalog size (300x300px)
- Large size (1024x1024px)
If you change the dimensions of any of these images, then your old images will look stretched or distorted. Regenerating your thumbnails will recreate all your product images in the new dimensions that you have set.
How to Regenerate Thumbnails in WooCommerce
- Upload New Images With Correct Dimensions:
The first step is to upload new product images with the correct dimensions. You can do this by going to “Products” > “Add New Product”. On the “Add New Product” page, scroll down to the “Product Images” section.
Then click on the “Add product image” button and select the new image from your computer.
Make sure that you upload images with the correct dimensions. For example, if you want your thumbnail images to be 150x150px, then make sure that all your thumbnail images are exactly 150x150px.
Once you have uploaded all your new product images, go to “Tools” > “Regenerate Thumbnails”. On this page, select all the thumbnail sizes that you want to regenerate and then click on the “Regenerate Thumbnails” button.
This process can take a while depending on how many products and images you have. Once it’s done, all your product images will be regenerated in the new dimensions.
.
- Crop Images With Correct Aspect Ratio:
If you have changed the aspect ratio of your thumbnail images, then you will need to crop them so that they fit correctly into their new dimensions. For example, if your thumbnail images are now 150x100px instead of 150x150px, then you will need to crop them so that they are 100px tall.
To crop your thumbnail images, go to “Products” > “Add New Product”. On the “Add New Product” page, scroll down to the “Product Images” section and click on any image that needs to be cropped.
This will open up the image editor. First, select all the thumbnail sizes that need to be cropped. Then click on the “Crop” button and crop your image so that it fits into its new dimension.
.
- Change Image Dimensions Without Cropping Images:
If you don’t want to crop your images when changing their dimensions, then there’s another option available in WooCommerce. Instead of going to “Tools” > “Regenerate Thumbnails”, go to “Settings” > “Media.”
On this page, scroll down to the “Image sizes” section and enter your new image dimensions.
Make sure that the checkbox next to each image size is checked so that WooCommerce regenerates these thumbnails when a new image is uploaded.
When you’re done, click on the “Save Changes” button at the bottom of the page.< br / >< br / >
After changing these settings, any time you upload a new image or change an existing one, WooCommerce will automatically generate these thumbnails for you without needing to go through the process of regenerating them manually. .
- < li style = "list - style - type : lower - alpha;" > < u style = "list - style - type : upper - alpha;" > < b style = "< list - style - type : lower - roman;" i >> Use an Image Resizing Plugin: > > > br >> There are also plugins available which can help automate this process for you. One plugin we recommend is WP Smush . It’s a free plugin which helps optimize and resize all your WordPress images . Once installed , simply go to “< iSmush settings >”. On this page , select “< iSmush originals >”. This setting will automatically resize any large image files when they are uploaded .
We recommend using this setting because it helps reduce file sizes without losing quality . You can also choose which file types should be smushed . We recommend leaving this setting as “< All media files ] ". When you're done , click on [ Save Changes ] at t he bottom o f t he p age . WP Smush wil l n ow automatical ly o ptimize an d re siz e a ll y our W ordP ress im ages .< br / >
