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