WooCommerce Product Image Sizes
WooCommerce registers three image sizes and gives you a Customiser panel for two of them. Almost every blurry or inconsistent catalogue is a theme overriding that panel, or originals that were too small to begin with.
WooCommerce registers exactly three image sizes, and two of them are controlled from one Customiser panel. Almost every complaint about blurry, stretched or inconsistent product images traces back to one of three causes: the theme has taken those controls away, the sizes were changed but existing images were never regenerated, or the originals were smaller than the size being asked for. Work through those in order and the problem is usually gone before any plugin is installed.
The three sizes
| Registered size | Where it appears | Default behaviour |
|---|---|---|
woocommerce_thumbnail |
Shop, category archives, related and upsell listings | Cropped to a consistent shape |
woocommerce_single |
The main image on the product page | Scaled to a width, height left proportional |
woocommerce_gallery_thumbnail |
The small strip beneath the main product image | Square |
The important asymmetry is that the catalogue thumbnail is cropped and the single product image is not. That is deliberate: archives want a tidy grid, product pages want the whole photograph. It also explains why a catalogue can look perfectly uniform while individual product pages show wildly different image heights.
Where to change them
Appearance then Customise then WooCommerce then Product Images gives you a main image width, a thumbnail width, and a cropping choice for the thumbnail: square, a custom ratio you specify, or uncropped. That is the whole native interface, and for most stores it is sufficient.
If that panel is missing or partly missing, the theme has declared its own image widths in its WooCommerce theme support. This is normal for well-built commerce themes — their grids are designed around specific dimensions and letting you change them would break the layout. The fix is not to hunt for a hidden setting but to override the declaration from a child theme, which is the same discipline as any other theme customisation. The gallery thumbnail has no Customiser control at all in any case; it is changed through the image size filter WooCommerce exposes for it.
Regeneration is not optional
Changing a size only changes what WooCommerce asks for. Files already on disk were cut to the old dimensions. WooCommerce queues a background regeneration when the settings change, and on a small store you may never notice it happening. On a catalogue of any size, do it deliberately:
- Change the sizes first, all of them, so you regenerate once.
- Run the regeneration tool from WooCommerce then Status then Tools, or a command line media regeneration pass.
- Confirm it completed, rather than assuming. Background processing on WordPress depends on the site being reachable and on cron actually running.
- Clear caches, including any image CDN, which will otherwise keep serving the old files.
If you skip this, half the catalogue is served at the old dimensions and scaled by the browser, which is exactly what "blurry after I changed the settings" means.
Upload size, and why images look soft
WordPress crops and shrinks. It never enlarges. Ask for a 600 pixel main image from a 400 pixel original and you get the 400 pixel file stretched by the browser. Modern displays make this worse, because WordPress builds a srcset from the sizes available and a high-density screen will happily request the largest one it can find.
Upload comfortably above your display sizes — roughly double the single image width is a reasonable working rule — while remembering that WordPress scales very large uploads down on arrival and keeps the scaled version as the working original. Between those two boundaries there is plenty of room, and the file size cost is handled by image optimisation rather than by uploading small files. If images are already soft across the site and not only in the shop, work through blurry images in WordPress first, because the cause may not be WooCommerce at all.
Consistency, cropping and layout shift
A catalogue looks professional when every card is the same height, and that comes from the thumbnail cropping setting rather than from disciplined photography. Choose a ratio and let WooCommerce enforce it. Custom ratios are there for stores whose products are genuinely not square — tall bottles, wide rugs — and the ratio matters more than the pixel width, because the width also depends on your grid.
Whatever you choose, product images must reserve their space before they load. Missing dimensions on catalogue images are one of the most common sources of cumulative layout shift on commerce sites, and the symptom is the add-to-cart button moving under a finger that was already on its way down.
When images do not appear at all
A missing product image is a different problem from a wrongly sized one. If placeholders are showing where photographs should be, the size settings are not involved and the causes are the ordinary ones covered in images not showing in WordPress: permissions, a broken uploads path, a rewritten URL after a migration, or files that were never transferred.
The short version
Set all three sizes once, before uploading a catalogue. Regenerate deliberately and verify. Upload originals larger than anything you display. Pick a thumbnail crop and never change it again, because every change means another regeneration pass and another round of cache invalidation across every device that has already cached the old files.
Frequently asked
- Because the active theme declares its own image widths in its WooCommerce theme support, which hides the controls so the theme's layout stays consistent. Change the values in a child theme's theme support declaration, or in a filter, rather than looking for a setting that has been deliberately removed.
- Yes, for images already uploaded. WooCommerce queues a background regeneration when the sizes change, but on large catalogues it is more reliable to run the regeneration tool or a command line pass and confirm it finished.
- Comfortably larger than the biggest size you display, because WordPress will crop and shrink but never enlarge. Around double your single product image width is a sensible working rule, and anything above the WordPress large image threshold gets scaled down on upload anyway.