WooCommerce Product Images Wrong Size, Blurry or Cropped? Fixing Thumbnails, Gallery and Shop Images

On this page

1. Quick fix: try these first
2. How WooCommerce product image sizes work
3. WooCommerce product images wrong size: the common causes
4. Gallery and zoom problems
5. How to check which image size is being served
6. Fixing an existing catalogue without starting over
7. Uploads failing or images missing
8. Recommended photo setup for Indian stores
9. Quick check: after the fix
10. When to get help
11. FAQs

If WooCommerce product images are the wrong size, blurry, cropped or uneven on the shop page, the usual cause is a mismatch between your uploaded photos, the WooCommerce image settings and the image sizes your theme asks for. Changing a setting does not resize images already uploaded, so old thumbnails also need to be regenerated.

Start with the quick fixes below; they solve most stores.

To make every product photo the same size, use the free image resizer and cropper with its 800x800 WooCommerce preset.

Quick fix: try these first

1. Go to Appearance, Customize, WooCommerce, Product Images and set "Thumbnail cropping" to 1:1 or a custom ratio that matches your photos.
2. Check the "Main image width" and "Thumbnail width" values there. Very small numbers make images blurry when the theme shows them larger.
3. Regenerate thumbnails with a regenerate thumbnails plugin, or let WooCommerce do it in the background, then clear all caches.
4. Check the original photos: if they are smaller than the space they fill, nothing will make them sharp.
5. Test on mobile and desktop in a private window after clearing the page cache and CDN.

How WooCommerce product image sizes work

When you upload a photo, WordPress keeps the original and creates several resized copies. WooCommerce adds three of its own:

• Single (main) image: the large photo on the product page, not cropped by default.
• Thumbnail: the image in shop, category and related product grids, cropped to the ratio you choose.
• Gallery thumbnail: the small images under the main photo, usually square.

Your theme decides which size appears where, and many themes declare their own widths. If the theme asks for a 300 pixel thumbnail but shows it 450 pixels wide on a large screen, it looks soft. If the crop is 1:1 and your photos are portrait, tops and bottoms get cut off. Our WordPress image optimisation guide explains the size system for the rest of WordPress.

WooCommerce product images wrong size: the common causes

1. Mixed photo shapes

Product images of different ratios (some square, some portrait, some landscape) make the shop grid look uneven, with cards at different heights. Either crop all thumbnails to one ratio in the Customizer, or prepare photos at the same ratio before upload. Square works for most stores; fashion stores often prefer 3:4 portrait.

2. Thumbnails were never regenerated

Changing the crop ratio or width only affects new uploads unless thumbnails are regenerated. WooCommerce can regenerate in the background on some hosts, but it often stalls when WP-Cron is not running. Run a regenerate thumbnails plugin manually, or use WP-CLI if your host supports it. If background tasks never finish, see why WP-Cron tasks fail.

3. The theme overrides the sizes

Many themes register their own product image sizes and hide the Customizer options. If the Product Images panel is missing, the theme controls the sizes. Check the theme options panel, or add a small code snippet in a child theme to change them.

4. Small or low-quality originals

A photo uploaded at 600 pixels wide cannot fill a 1000 pixel main image without looking blurry. Upload originals at about 1200 to 2000 pixels on the longest side. Larger than that only wastes storage and upload time.

5. Compression set too high

Image optimisation plugins with "lossy" or "glossy" modes and heavy WebP conversion can make product photos look smudged, especially on fabrics, jewellery and text on packaging. Try a gentler setting on a few products and compare.

6. CDN or lazy loading serving the wrong size

Some CDNs and lazy loading scripts resize images on the fly or pick the wrong size from srcset. If the image looks right with the CDN off, adjust its resize settings. If images jump in size while loading, set width and height attributes; see how to fix layout shift on WordPress.

7. Page builder widgets

Elementor and other builders let you choose an image size per widget. A product grid widget set to "thumbnail" (150 pixels) will be blurry; set it to the WooCommerce thumbnail or medium-large size instead.

Gallery and zoom problems

If the main product image is blurry only when zoomed, the zoom uses the full-size original, so the original is too small. If zoom, the lightbox or the gallery slider is missing, the theme may have turned off WooCommerce's gallery features, or a script conflict is stopping them. Test with a default theme on staging, and check the browser console for JavaScript errors.

Gallery images that load slowly on mobile usually mean full-size originals are being loaded instead of resized copies. That hurts speed as much as appearance; see WooCommerce speed optimisation.

How to check which image size is being served

Guessing wastes time, so check what the browser actually loads. On desktop Chrome, right-click a product image in the shop grid and choose Inspect. The img tag shows the file name, which usually ends with the size, such as -300x300.jpg. Compare that with the size the image is displayed at, shown when you hover over the element. If a 300 pixel file fills a 450 pixel box, the generated size is too small. If a 2000 pixel original fills a 300 pixel card, the theme is loading the full image and slowing the page.

Repeat the check on a phone-sized view, because themes often switch to a two-column grid on mobile with larger images per card. Also look at the srcset attribute: it lists the sizes available. If your new size is missing from the list, thumbnails have not been regenerated yet.

Fixing an existing catalogue without starting over

For a store with hundreds of products, re-shooting is rarely practical. A sensible order is: set the crop ratio and widths, regenerate thumbnails on staging first and review the shop grid, then run it on the live site during a quiet hour. Next, replace only the worst originals, starting with your best-selling products. Products with a plain background can often be padded to a square canvas in a bulk image editor, which avoids awkward cropping. Keep file names descriptive while you do this; image SEO basics explains why.

Uploads failing or images missing

If images will not upload at all, or show an HTTP error, the problem is the server rather than sizes; follow the HTTP error image upload fix. If old thumbnails show a broken image after a migration, the resized files may not have been copied; regenerating thumbnails recreates them from the originals.

Recommended photo setup for Indian stores

Item	Suggested setting	Why
Original upload	1200 to 2000 pixels, one fixed ratio	Sharp on all screens without huge files
Thumbnail crop	1:1, or 3:4 for clothing	Even shop grid on mobile
Background	Same plain background for a range	Grid looks consistent
Format	JPEG or WebP, moderate compression	Small files without visible damage
File names and alt text	Describe the product	Image search and accessibility

Good photos sell more than any setting. For layout and what shoppers look for, read WooCommerce product page optimisation.

Quick check: after the fix

1. In WordPress, open Appearance > Customize > WooCommerce > Product Images and check the settings.
2. Regenerate thumbnails after any change.
3. Open the shop on a phone and check images are not stretched.

When to get help

If images are still uneven after setting the crop and regenerating, the theme or a builder is usually forcing its own sizes, and fixing it means editing theme settings or code. A WooCommerce developer can set consistent sizes and regenerate safely, a WordPress speed optimisation service can make sure the right sizes are served fast, and WordPress maintenance keeps updates from undoing the fix. Samverse handles all three for stores across India. You can also send the details through the contact form.

FAQs

Why are my WooCommerce product images the wrong size?

The theme, the WooCommerce image settings and your photos disagree, or old thumbnails were not regenerated after a change. Set the crop ratio, regenerate thumbnails and clear caches.

Why are WooCommerce product images blurry?

The displayed image is larger than the size generated, the originals are too small, or compression is too strong. Raise the thumbnail width, upload larger originals and use gentler compression.

How do I stop WooCommerce from cropping product images?

In Appearance, Customize, WooCommerce, Product Images, choose "Uncropped" for thumbnails, then regenerate thumbnails. Expect uneven grid heights if photo shapes differ.

Where are the WooCommerce image size settings?

Appearance, Customize, WooCommerce, Product Images. If that panel is missing, your theme controls the sizes through its own options or code.

Do I need to regenerate thumbnails after changing image sizes?

Yes. Changes only affect new uploads until existing images are regenerated, either in the background by WooCommerce or with a regenerate thumbnails tool.

What size should WooCommerce product photos be?

About 1200 to 2000 pixels on the longest side, all at the same ratio, with moderate compression. That keeps zoom sharp and files reasonably small.