WooCommerce Image Size Calculator

Work out the right catalog, single-product and gallery-thumbnail pixel sizes from your actual grid layout, plus the snippet to set them and the command to regenerate thumbnails.

Your details

Products per row on the shop/category grid

Grid container width

Your theme's main content width. Check your theme's customizer or CSS for "max-width" on the shop wrapper.

Gap between products

Single product main image width

Usually one column of your product page's two-column layout.

Additional image thumbnails shown at once

Width of the additional-image thumbnail strip

Generate retina (@2x) sizes too

Crop to square (WooCommerce's default)

Sizes, snippet and regenerate command

/**
 * Computed from a 4-column grid at 1200px wide, checked into your theme
 * or a small must-use plugin so it survives a theme switch.
 *
 * Catalog images (shop/category grid): 282 × 282px (upload at 564 × 564px for a sharp @2x on retina screens)
 * Single product image:                600 × 600px (upload at 1200 × 1200px for @2x)
 * Additional image thumbnails:         112 × 112px (upload at 224 × 224px for @2x)
 */

// Option 1: WooCommerce → Settings → Products → Display. Enter the widths (and heights, if
// "Crop to square" is off) above into Catalog images, Single product image and Additional images.
// This is the standard, no-code way to set them and is enough for most stores.

// Option 2: force it from code (a child theme's functions.php, or a small must-use plugin),
// using the same filter WooCommerce's own wc_get_image_size() runs every size through:
add_filter( 'woocommerce_get_image_size_thumbnail', function ( $size ) {
	return array( 'width' => 282, 'height' => 282, 'crop' => 1 );
} );
add_filter( 'woocommerce_get_image_size_single', function ( $size ) {
	return array( 'width' => 600, 'height' => 600, 'crop' => 1 );
} );
add_filter( 'woocommerce_get_image_size_gallery_thumbnail', function ( $size ) {
	return array( 'width' => 112, 'height' => 112, 'crop' => 1 );
} );

// After changing sizes, existing images were cropped to the old dimensions, so regenerate them
// (built into WP-CLI, no plugin needed):
// wp media regenerate --yes

"Crop to square" matches WooCommerce's own default product image ratio. Turn it off if your theme uses a taller 4:3 product photo instead.

Regenerating thousands of images can be slow and CPU-heavy on shared hosting. Run it at a quiet time, or in batches with "wp media regenerate <ID> <ID> ...".

Sizing from your actual layout, not a guessed theme default

Every theme's shop grid is a slightly different width, so a fixed "use these pixel sizes" table would be wrong for most stores. This tool works from the numbers that actually matter: how many products sit in a row, how wide your content area is, and the gap between them. From those it computes the catalog (grid) image width, and adds your single-product and gallery-thumbnail widths straight through.

catalog image width = (container width − gutter × (columns − 1)) ÷ columns

The same math your CSS grid or flexbox layout already does to fit N equal columns into a fixed width.

Applying it

01
Set the sizes in wp-admin
WooCommerce → Settings → Products → Display: enter the computed widths (and heights, unless you're cropping to square) into Catalog images, Single product image and Additional images. This alone is enough for most stores.
02
Or force it from code
The generated snippet uses woocommerce_get_image_size_{size} filters, the same filters WooCommerce's own wc_get_image_size() runs every image size through, so it works even if a theme or plugin resets the admin values.
03
Regenerate existing images
Changing sizes doesn't reprocess images already on the site. Run wp media regenerate --yes (a built-in WP-CLI command, no plugin required) to recrop everything to the new dimensions.

Pitfalls

Upload source images at least as large as the retina (@2x) size shown, or WordPress will upscale a smaller original and it'll look soft.
Regenerating thousands of images is CPU-heavy; on shared hosting, run it in smaller batches (wp media regenerate <ID> <ID> ...) or at a quiet time.
If your theme sets its own image sizes via the same filters, the snippet here needs a later priority to win; add a priority argument to add_filter() if it doesn't take effect.

Questions people ask

What if my theme doesn't use a square product image?

Turn off "Crop to square" and the tool computes a 4:3 height instead. WooCommerce's own default is a square (1:1) crop.

Where do I find my container width?

Open your shop page, inspect the element wrapping the product grid in your browser's dev tools, and check its computed max-width, or look in your theme's customizer for a "content width" setting.

Do I need the PHP snippet if I already set it in wp-admin?

No, the admin settings are enough for most stores. The snippet is for developers who want the value version-controlled in code, or whose theme overrides the admin setting.

Does this affect page speed?

Yes: serving images at the exact size they're displayed (instead of a much larger original scaled down by CSS) is one of the more reliable Core Web Vitals wins for a product grid.

Last reviewed 30 September 2026.

Sources: WP-CLI: wp media regenerate

Your details

Sizing from your actual layout, not a guessed theme default

Applying it

Set the sizes in wp-admin

Or force it from code

Regenerate existing images