WooCommerce Product Image Size: The Three Sizes and How to Actually Change Them

WooCommerce generates three image sizes for every product photo you upload, and only two of them are editable in the WordPress admin. woocommerce_thumbnail is the catalog grid image, woocommerce_single is the large image on the product page, and woocommerce_gallery_thumbnail is the small strip of thumbnails underneath it. You change them at Appearance > Customize > WooCommerce > Product Images — and if that panel shows you a cropping dropdown but no width boxes, your theme has locked the widths in code on purpose.

The three sizes

Size name	Where it shows up	Cropping	Editable in customizer
woocommerce_thumbnail	Shop page, category grids, related products, cross-sells	Hard-cropped to a square by default	Width and ratio
woocommerce_single	Main image on the single product page	Uncropped — original aspect ratio kept	Width only
woocommerce_gallery_thumbnail	Small strip under the main product image	Hard-cropped square	No

These sit on top of the standard WordPress sizes. A single product photo will typically produce thumbnail, medium, medium_large, large, the three WooCommerce sizes, and possibly extras registered by your theme through add_image_size. That is a lot of files per upload, and it is why a 300-product import takes so long.

The gallery thumbnail is the one that surprises people: it has no admin control at all. On a default install it is a small square, historically 100px, and it is the size most likely to look soft on a retina screen because the physical file is genuinely tiny.

Where the settings actually live

Appearance > Customize > WooCommerce > Product Images gives you three controls:

• Main image width — the width of woocommerce_single. Height is automatic, so the original aspect ratio is preserved.
• Thumbnail width — the width of woocommerce_thumbnail.
• Thumbnail cropping — 1:1 (square, the default), Custom (you type a ratio like 4:3), or Uncropped.

Note what is missing: there is no height field for the catalog thumbnail, because the height is derived from the cropping ratio. And there is nothing for the gallery thumbnail at all.

Before you change anything, it helps to see exactly which derivatives a given file will produce — drop a real product photo into the WordPress image sizes tool and you get the full list, including whether your source is big enough to fill each size without upscaling.

Why your catalog images look wrong

The catalog thumbnail hard-crops to a square. Hard crop means WooCommerce takes a centre square out of your photo and throws the rest away — it does not letterbox, and it does not squash. A 2000x1200 product shot becomes a 1200x1200 slice taken from the middle, then scaled down.

That is fine for a bottle photographed dead centre with margin around it. It is a disaster for:

• Long products (skis, cables, curtain rods) — you see the middle third and nothing else
• Off-centre compositions — the product drifts to the edge of the frame and gets sliced
• Photos where the item fills the frame edge to edge — the top and bottom are cut off
• Lifestyle shots with the product in a corner

The common advice is “switch cropping to Uncropped.” That works, but be honest about the cost: uncropped means every thumbnail keeps its own aspect ratio, so a grid of mixed-orientation photos becomes visually ragged, and rows no longer line up unless your theme’s CSS handles variable heights. Most themes assume squares.

The better fix, if you can afford it, is at the source: standardise on square product photos with the item centred and even padding. Then a square hard crop is a no-op and everything downstream is predictable. Changing the crop setting is the workaround; consistent source images are the actual solution.

When the theme locks the widths

If your Product Images panel only offers cropping, your theme declared fixed widths when it registered WooCommerce support:

add_theme_support( 'woocommerce', array(
    'single_image_width'    => 800,
    'thumbnail_image_width' => 400,
) );

When a theme passes those values, WooCommerce removes the width controls from the customizer and leaves only the ratio. This is not a bug and it is not the theme being hostile — the theme’s product layout CSS is built around those exact pixel widths, and letting you change them would break the grid.

You can override them from a child theme’s functions.php using the per-size filter:

add_filter( 'woocommerce_get_image_size_single', function ( $size ) {
    $size['width']  = 1000;
    $size['height'] = '';
    $size['crop']   = 0;
    return $size;
} );

add_filter( 'woocommerce_get_image_size_gallery_thumbnail', function ( $size ) {
    $size['width']  = 150;
    $size['height'] = 150;
    $size['crop']   = 1;
    return $size;
} );

The same pattern works for woocommerce_get_image_size_thumbnail. This is also the only way to change the gallery thumbnail, since it has no UI.

Real cost, stated plainly: overriding a locked width means the file WooCommerce generates no longer matches what the theme’s CSS expects. Usually the image just scales in the browser and looks fine because it is now larger than the box. Sometimes the theme has a fixed-height container and you get letterboxing or overflow. Test on one product before you regenerate 2,000.

Changing sizes means regenerating

Every size setting only affects new uploads. Existing products keep serving the files that were generated when they were uploaded, so nothing visible changes until you rebuild them.

WooCommerce kicks off a background regeneration when you save the customizer. On a small catalog that is enough. On a large one it depends on WP-Cron firing reliably, which on a low-traffic store it often does not, and you end up with a half-regenerated library. Run it yourself instead:

wp media regenerate --yes

To rebuild only product images:

wp media regenerate --yes --post_type=product

If you want the background job out of the way while you do it manually:

add_filter( 'woocommerce_background_image_regeneration', '__return_false' );

Two things regeneration will not do. It does not delete the old files — your uploads directory keeps every orphaned derivative from the previous settings, and it will grow. And it cannot create a size larger than your source, because WordPress does not upscale. If you set the main image width to 1200 but your product photos are 800px wide, no 1200px file is created; the browser gets an 800px file and stretches it, and srcset has nothing better to offer.

The size to actually upload

Aim for square source images at roughly twice your largest configured width — 1200x1200 for a 600px main image, 1600x1600 if your theme uses 800px. That covers 2x retina displays and gives WordPress enough pixels to build every derivative without upscaling. Keep every product at the same dimensions so the grid stays even.

Still stuck?

If the sizes are configured correctly, you have regenerated, and a product still looks wrong, open the image in a new tab and read the filename. A dimension suffix that does not match any size you configured means something else registered it. No suffix at all means WooCommerce fell back to the full-size file, which almost always means the source was too small for the size you asked for. Run that source file through the image sizes tool and compare what WordPress should generate against what the browser actually loaded — when those disagree, an optimizer plugin or a CDN image resizer is usually sitting in between.