![\"Recommended](\"https:\/\/thumbpress.co\/wp-content\/uploads\/2026\/06\/Recommended-WooCommerce-Product-Image-Sizes.webp\")
<\/figure>\n\n\n\nThree WooCommerce Image Size Slots<\/h3>\n\n\n\n
WooCommerce registers three image sizes for every store. Per the official WooCommerce developer documentation:<\/p>\n\n\n\n
- \n
- woocommerce_thumbnail<\/strong> – defaults to 300px width, square cropped. Used in product grids: the shop page, category pages, related products, upsells, and cross-sells.<\/li>\n\n\n\n
- woocommerce_single<\/strong> – defaults to 600px width, always uncropped. Used on single product pages for the main product image.<\/li>\n\n\n\n
- woocommerce_gallery_thumbnail<\/strong> – always 100\u00d7100px, always square-cropped. Used for the small navigation thumbnails below the main image in the product gallery.<\/li>\n<\/ol>\n\n\n\n
The WooCommerce developer docs<\/a><\/strong> also note that themes can declare their own image sizes, which means a theme can override these defaults entirely via add_theme_support()<\/strong>. When that happens, the width controls disappear from your Customizer. You can still adjust cropping, but the widths are locked in code.<\/p>\n\n\n\n
Why WooCommerce Creates Multiple Image Versions?<\/h3>\n\n\n\n
Every time you upload a product image, WooCommerce runs a background job to generate all three sizes. If your theme and plugins have registered additional sizes on top of those three, the number goes higher still. On a busy WooCommerce store, a single product photo upload can silently create 10 or more separate image files in your media library, most of which are never shown to a single customer.<\/p>\n\n\n\n
This is worth understanding because it explains two things: why your media library fills up faster than expected, and why changing your size settings does not automatically fix existing images.<\/p>\n\n\n\n
Recommended WooCommerce Product Image Sizes<\/h2>\n\n\n\n
The Dimensions Most Stores Should Use<\/h3>\n\n\n\n
There’s no single correct WooCommerce product image size that works for every store. But there are solid starting points based on how WooCommerce displays images.<\/p>\n\n\n\n
\nFor single product images<\/strong>, upload at a minimum of 1200\u00d71200px. WooCommerce displays these at 600px by default, but having a larger source file powers the zoom feature on the product page. If your source image is the same width as the display size, the zoom feature won’t work. You need headroom.<\/p>\n\n\n\n
For catalog thumbnails<\/strong> (the shop page grid), WooCommerce defaults to 300px, but that looks soft on modern high-resolution displays. Most store owners raise this to 600\u2013800px for a sharper grid.<\/p>\n\n\n\n
For gallery thumbnails<\/strong>, leave them at 100\u00d7100px. These are navigation-only. Customers tap them to switch the main image, not to inspect detail.<\/p>\n<\/div>\n\n\n\n
For a broader look at sizing across eCommerce platforms, this guide on best image sizes for ecommerce websites<\/strong><\/a> covers recommended dimensions for WooCommerce, Shopify, and Amazon<\/strong> in one place.<\/p>\n\n\n\n
How Your Theme Affects the Ideal Size<\/h3>\n\n\n\n
Your theme’s CSS controls the actual display dimensions on screen. What WooCommerce generates and what your theme renders can be two different numbers. Astra, Flatsome, and Storefront all render product grids at different widths.<\/p>\n\n\n\n
The most reliable way to find your theme’s actual rendered size: open your shop page in a browser, right-click a product image, and select Inspect. Your browser dev tools will show the rendered width and height. Per WooCommerce’s official image guide<\/a><\/strong>, set your Main image width to match or exceed that rendered size. For retina or HiDPI screens, double it.<\/p>\n\n\n\n
How to Change WooCommerce Product Image Sizes<\/h2>\n\n\n\n
1. Using the WordPress Customizer<\/h3>\n\n\n\n
You don’t need a plugin for this. WooCommerce builds the controls directly into the WordPress Customizer.<\/p>\n\n\n\n
Per the official WooCommerce image sizing documentation<\/a><\/strong>, here are the steps:<\/p>\n\n\n\n
- \n
- Go to Appearance \u2192 Customize<\/strong><\/li>\n\n\n\n
- Click WooCommerce \u2192 Product Images<\/strong><\/li>\n\n\n\n
- Set Main image width<\/strong> – this controls the single product page image<\/li>\n\n\n\n
- Set Thumbnail width<\/strong> – this controls the shop and category page grids<\/li>\n\n\n\n
- Choose your Thumbnail cropping<\/strong> setting<\/li>\n\n\n\n
- Click Publish<\/strong><\/li>\n<\/ol>\n\n\n\n
One thing to know – you only set the width. Height is calculated automatically from the uploaded image’s aspect ratio. WooCommerce removed the height control intentionally to prevent distorted images.<\/p>\n\n\n\n
Understanding the Three Thumbnail Cropping Options<\/h3>\n\n\n\n
The cropping option controls the shape of thumbnails on your shop and category pages. WooCommerce documents three choices<\/a><\/strong>:<\/p>\n\n\n\n
![\"Thumbnail](\"https:\/\/thumbpress.co\/wp-content\/uploads\/2026\/06\/Thumbnail-Cropping-Options.webp\")
<\/figure>\n\n\n\n- \n
- 1:1 (Square)<\/strong> – thumbnails are square-cropped. The most common choice is because it keeps the product grid uniform, regardless of what aspect ratio your photos were shot in.<\/li>\n\n\n\n
- Custom<\/strong> – you set a specific ratio (for example, 4:5 for portrait fashion photography, or 16:9 for wide product layouts).<\/li>\n\n\n\n
- Uncropped<\/strong> – images display at their original uploaded aspect ratio. Only use this if every single product image in your catalog was photographed at exactly the same ratio. Otherwise, your shop grid will look uneven.<\/li>\n<\/ul>\n\n\n\n
Note: <\/strong>The main featured image on the single product page is always uncropped. WooCommerce removed crop controls for that slot several versions ago.<\/p>\n\n\n\n
What to Do If Your Theme Locks Image Sizes<\/h3>\n\n\n\n
Some themes use add_theme_support() to declare fixed image widths in code. When this happens, WooCommerce’s developer documentation states<\/a><\/strong> that the store owner can no longer change the declared widths – only the cropping setting remains visible in the Customizer. Check your theme’s documentation to find what sizes it sets, then make sure your source images are at least as large as those dimensions.<\/p>\n\n\n\n
Regenerating Thumbnails After a Size Change<\/h2>\n\n\n\n
Why Existing Images Don’t Update on Their Own<\/h3>\n\n\n\n
This is the most common source of confusion after a size change. When you update your settings and hit Publish, WooCommerce applies those new dimensions only to images uploaded from that point forward. Photos already in your media library keep their old sizes and crops.<\/p>\n\n\n\n
Per WooCommerce’s official blurry image documentation<\/a><\/strong>, “Any time you activate a new theme or change image dimension settings, you need to regenerate previously created thumbnails.” Skipping this step is why store owners end up with a shop grid that’s half new thumbnails and half old ones – inconsistent sizes, inconsistent cropping.<\/p>\n\n\n\n
Two Ways to Regenerate Thumbnails<\/h3>\n\n\n\n
\nOption 1: WooCommerce built-in tool:<\/h4>\n\n\n\n
WooCommerce introduced background thumbnail regeneration in version 3.3. Per the WooCommerce thumbnail regeneration documentation<\/a><\/strong>: “When you make changes to image sizes\/aspect ratios in the customiser, WC will detect these changes and queue a background regeneration job.”<\/p>\n\n\n\n
If you need to trigger it manually, go to WooCommerce \u2192 Status \u2192 Tools<\/strong> and click Regenerate<\/strong> next to “Regenerate shop thumbnails.”<\/p>\n\n\n\n
To check progress, go to WooCommerce \u2192 Status \u2192 Logs<\/strong> and filter for entries beginning with wc-image-regeneration.<\/p>\n\n\n\n
Option 2: Regenerate Thumbnails using a free plugin:<\/h4>\n\n\n\n
The free Regenerate Thumbn<\/a><\/strong>ails plugin<\/strong><\/a> by Codexpert, Inc<\/strong>., handles all WordPress-registered image sizes, not just WooCommerce ones. This matters when multiple plugins have registered their own size slots that are also out of sync. After you install the plugin, go to Thumbnails \u2192 Regenerate Thumbnails<\/strong> and run it across all images.<\/p>\n\n\n\n
![\"\"](\"https:\/\/thumbpress.co\/wp-content\/uploads\/2026\/06\/regenerate-thumbnails-1024x543.webp\")
<\/figure>\n<\/div>\n\n\n\nIn a small store, regeneration finishes in a few minutes. In a store with thousands of products, you can use the option to run in the background; you don’t need to keep the page open.<\/p>\n\n\n\n
WooCommerce Product Image Optimization<\/h2>\n\n\n\n
Why Pixel Dimensions Are Only Half the Job<\/h3>\n\n\n\n
Getting the right dimensions is the foundation. But a correctly sized JPEG at 3MB still drags your shop page down.<\/p>\n\n\n\n
According to Google’s mobile page speed research<\/a><\/strong>, 53% of mobile users abandon a site that takes more than 3 seconds to load. For a WooCommerce store running paid ads, that means budget wasted before a single product is seen.<\/p>\n\n\n\n
Product images are almost always the largest contributor to page weight on a WooCommerce shop page. If you want to understand the full financial picture behind this, the breakdown of the hidden revenue cost of unoptimized images<\/strong><\/a> connects the dots between image performance and lost revenue directly.<\/p>\n\n\n\n
File Size Targets to Aim For<\/h3>\n\n\n\n
- \n
- Single product images:<\/strong> under 200KB<\/li>\n\n\n\n
- Catalog thumbnails:<\/strong> under 50KB<\/li>\n\n\n\n
- A 1200\u00d71200px image converted to WebP typically hits both targets with no visible quality loss for most product types<\/li>\n<\/ul>\n\n\n\n
WebP Is the Right Format in 2026<\/h3>\n\n\n\n
WebP lossless images are 26% smaller than equivalent PNGs. Lossy WebP images are 25\u201334% smaller than comparable JPEGs at equivalent visual quality. For a WooCommerce catalog with hundreds of product images, switching to WebP is one of the largest single reductions in page weight you can make.<\/p>\n\n\n\n
ThumbPress converts existing product images to WebP and handles new uploads automatically, without sending your images to a third-party server. It also detects oversized images sitting in your media library, so you can address the bloated DSLR photos that slipped through before optimization was set up. The step-by-step process for how to compress images in WordPress<\/a><\/strong> covers the full workflow if you want to understand the approach first.<\/p>\n\n\n\n
3 Common WooCommerce Image Problems (and How to Fix Them)<\/h2>\n\n\n\n
1. Blurry Product Images<\/h3>\n\n\n\n
Blurry product images are “usually caused by theme styling that specifies image dimensions incompatible with your uploaded images.” Your theme is trying to display images at a larger size than what WooCommerce generated.<\/p>\n\n\n\n
![\"Blurry](\"https:\/\/thumbpress.co\/wp-content\/uploads\/2026\/06\/Blurry-Product-Images.webp\")
<\/figure>\n\n\n\nThe fix:<\/strong><\/p>\n\n\n\n
- \n
- Inspect your shop page with browser dev tools. Note the rendered image dimensions.<\/li>\n\n\n\n
- Go to Appearance \u2192 Customize \u2192 WooCommerce \u2192 Product Images<\/strong> and set Main image width to match or exceed that number.<\/li>\n\n\n\n
- Regenerate thumbnails.<\/li>\n\n\n\n
- For retina screens, double the rendered size.<\/li>\n<\/ol>\n\n\n\n
For a broader look at image display problems in WordPress, the guide to fixing common image issues in WordPress<\/a><\/strong> covers blurry images alongside duplicate images, broken gallery thumbnails, and other recurring problems.<\/p>\n\n\n\n
2. Inconsistent Shop Grid Thumbnails<\/h3>\n\n\n\n
Two causes. <\/strong><\/p>\n\n\n\n
First: <\/strong>product images were uploaded at different aspect ratios, and cropping is set to Uncropped, so each thumbnail is a different shape. <\/p>\n\n\n\n
Second:<\/strong> you changed image size settings but didn’t regenerate thumbnails, so old and new images have different crops sitting side by side.<\/p>\n\n\n\n
Fix the first by switching Thumbnail cropping to 1:1 and regenerating. <\/p>\n\n\n\n
Fix the second by regenerating after every settings change. If your source images vary dramatically in shape, normalize them before uploading.<\/p>\n\n\n\n
3. Product Images Slowing Down the Shop Page<\/h3>\n\n\n\n
A shop page showing 24 products, each with an uncompressed JPEG at 500KB, is loading 12MB of images before any other page assets. WooCommerce’s own performance optimization documentation<\/a><\/strong> lists image optimization as a primary recommendation for improving store speed and increasing conversion rates.<\/p>\n\n\n\n
The combination of compression, WebP conversion<\/strong><\/a>, and removing unused thumbnail sizes<\/strong><\/a> makes the biggest difference. ThumbPress’s thumbnail manager lets you disable size slots your theme never actually displays. Every registered size you stop generating is disk space and page weight removed on every future upload. You can also use ThumbPress to delete unused WooCommerce images<\/a><\/strong> that have built up in your media library over time.<\/p>\n\n\n\n
Conclusion<\/h2>\n\n\n\n
WooCommerce product image size is one of those things that’s easy to get wrong once and then spend time wondering why the shop looks off.<\/p>\n\n\n\n
The short version, upload source images at 1200\u00d71200px minimum. Set your Customizer thumbnail widths to match your theme’s actual rendered dimensions, not the WooCommerce defaults. Regenerate thumbnails every time you change settings. And compress everything before it reaches your media library.<\/p>\n\n\n\n
Get the dimensions right, then compress and convert to WebP. Those two steps together keep a growing product catalog from becoming a performance problem as your store scales.<\/p>\n\n\n\n
ThumbPress handles WebP conversion, bulk compression, thumbnail management, and unused image cleanup in one plugin. No stacking separate tools, no jumping between dashboards. Download the free version on WordPress.org<\/strong><\/a> and start with WebP conversion and thumbnail control – the impact shows up on your first PageSpeed run.<\/p>\n\n\n\n
Frequently Asked Questions<\/h2>\n\n\n\n
What image size should I upload for WooCommerce products?<\/h3>\n\n\n\n
Upload at 1200\u00d71200px minimum for most products. WooCommerce generates its three registered thumbnail sizes from the source file you upload, so starting larger means all three come out sharp. It also gives the zoom feature on the single product page something to work with. Compress the file to under 200KB before uploading, and convert to WebP if your setup supports it.<\/p>\n\n\n\n
Why do my WooCommerce images look blurry after changing the size settings?<\/h3>\n\n\n\n
You need to regenerate thumbnails. Changing size settings in the Customizer only applies to images uploaded after you save. Previously uploaded images keep their old crops until you regenerate. Use ThumbPress<\/a><\/strong> to regenerate thumbnails for your WooCommerce store.<\/p>\n\n\n\n
Does WooCommerce product image size affect SEO?<\/h3>\n\n\n\n
- Catalog thumbnails:<\/strong> under 50KB<\/li>\n\n\n\n
- Custom<\/strong> – you set a specific ratio (for example, 4:5 for portrait fashion photography, or 16:9 for wide product layouts).<\/li>\n\n\n\n
- Click WooCommerce \u2192 Product Images<\/strong><\/li>\n\n\n\n
- woocommerce_single<\/strong> – defaults to 600px width, always uncropped. Used on single product pages for the main product image.<\/li>\n\n\n\n