Blurry WooCommerce product images are one of the most common issues store owners run into after changing themes, updating WooCommerce, installing optimisation plugins, or redesigning product pages.

The good news: the problem is usually easy to fix once you identify the cause.

In this guide, we’ll explain why WooCommerce images become blurry, how to diagnose the issue quickly, and the best ways to fix it in modern WooCommerce themes.

Why WooCommerce Product Images Become Blurry

In most cases, blurry product images happen because your theme or page builder is displaying images at a larger size than WooCommerce generated them.

For example:

• WooCommerce generates a 300px thumbnail
• Your theme stretches it to 600px
• The browser enlarges the image
• The result looks soft or blurry

This often happens after:

• changing WordPress themes
• using Elementor or page builders
• switching image optimisation plugins
• enabling CDN image resizing
• importing products from another platform
• changing thumbnail settings
• using inconsistent image sizes

Retina and high-DPI displays also make low-resolution images appear worse than they did a few years ago.

Quick Diagnostic Checklist

Before changing settings, work through this checklist:

1. Check the Original Upload Size

Open a blurry product image in a new browser tab.

If the image itself is small (for example 300px wide), WooCommerce cannot display it sharply at larger sizes.

Recommended product image sizes

• Product catalogue images: minimum 800px wide
• Zoom-enabled product galleries: 1200–1600px wide
• Retina-ready stores: upload images at roughly 2× display size

2. Inspect the Displayed Image Size

Right click the blurry image and inspect it in your browser developer tools.

Compare:

• actual image dimensions
• rendered display dimensions

If the displayed size is larger than the source image, your theme is stretching the image.

3. Test Without Optimisation Plugins

Temporarily disable:

• image compression plugins
• lazy loading plugins
• WebP conversion plugins
• CDN image resizing

Popular optimisation tools sometimes generate overly aggressive compression settings.

4. Check Theme Image Settings

Modern WooCommerce themes often override default image sizes.

Check:

• Theme Customiser settings
• Elementor image widgets
• WooCommerce product grid settings
• Site Editor templates (block themes)

5. Regenerate WooCommerce Thumbnails

WooCommerce may still be using old image sizes from a previous theme.

Regenerating thumbnails forces WordPress to create correctly sized versions.

Go to:

WooCommerce → Status → Tools

Then run:

Regenerate shop thumbnails

How to Fix Blurry WooCommerce Images

Fix #1 — Upload Higher Resolution Product Images

This is the simplest and most effective fix.

If your store displays products at 600px wide, don’t upload 600px images.

Upload images at least 1200px wide so they remain sharp on retina displays.

Best practice

• Keep aspect ratios consistent
• Use high-quality JPG or WebP images
• Avoid screenshots or exported social images
• Don’t upscale small source images

Fix #2 — Prevent CSS Image Stretching

Some themes force product images to fill containers using CSS.

This often causes blurry thumbnails.

Problematic CSS

.woocommerce ul.products li.product img {
    width: 100%;
    height: 400px;
}

The fixed height distorts the image.

Better approach

.woocommerce ul.products li.product img {
    width: 100%;
    height: auto;
}

For modern responsive layouts:

.woocommerce ul.products li.product img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

This preserves image sharpness while keeping consistent layouts.

Fix #3 — Update WooCommerce Image Sizes

In newer WooCommerce versions, image sizing is controlled by the Customiser or Site Editor.

Classic themes

Go to:

Appearance → Customise → WooCommerce → Product Images

Adjust:

• thumbnail width
• cropping
• aspect ratio

Block themes

You may also need to check:

• WooCommerce product templates
• global styles
• block spacing and container widths

Fix #4 — Regenerate Thumbnails Properly

If your theme changed image dimensions, old thumbnails may still exist.

Regenerating thumbnails creates correctly sized versions.

You can use:

• WooCommerce built-in regeneration tools
• dedicated thumbnail regeneration plugins
• WP-CLI for large stores

Fix #5 — Check Retina & High-DPI Displays

A store can look fine on one monitor and blurry on another.

Modern MacBooks, phones, and 4K displays expose low-resolution images very quickly.

A good rule:

Upload images at roughly double their display size.

If your product card displays at 500px wide, upload images around 1000px–1200px wide.

Fix #6 — Review CDN & WebP Settings

Cloudflare, BunnyCDN, ShortPixel, Imagify, and similar tools can sometimes generate lower-quality resized images.

Check:

• compression quality settings
• adaptive image resizing
• mobile-specific optimisation
• automatic WebP conversion
• lazy loading placeholders

Aggressive optimisation is a common hidden cause of blurry WooCommerce images.

Modern WooCommerce Theme Example

Here’s a safer modern approach for product card images:

.woocommerce ul.products li.product img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    image-rendering: auto;
}

This:

• keeps layouts consistent
• prevents stretching
• preserves sharpness
• works well with responsive grids

Common Causes of Blurry WooCommerce Images

Theme conflicts

Many WooCommerce themes override default image handling.

Elementor or page builders

Custom product grids often use incorrect image sizes.

Old thumbnails after redesigns

WooCommerce may still serve outdated generated images.

Inconsistent product uploads

Different aspect ratios and resolutions create uneven results.

Over-compression

Performance plugins can reduce image quality too aggressively.

Final Thoughts

Blurry WooCommerce product images are usually caused by one of three things:

1. low-resolution uploads
2. CSS stretching
3. outdated thumbnail generation

The fix is normally straightforward once you identify which layer is responsible.

Modern WooCommerce stores also need to account for retina displays, optimisation plugins, responsive layouts, and page builders — all of which can affect image quality.

If your WooCommerce store still has image quality problems after trying the fixes above, we can help diagnose the issue and optimise your storefront properly.