If your WooCommerce product images look blurry, pixelated, or stretched, don’t worry — this is one of the most common issues store owners face. The good news? It’s super easy to fix once you understand the real cause.
In this guide, I’ll walk you through all the reasons WooCommerce images become blurry and how to fix each one, step-by-step. By the end of this article, your product photos will look crisp, sharp, and professional. If you’re also facing issues where WooCommerce is not redirecting properly after checkout, here’s a complete step-by-step fix you can follow: WooCommerce Not Redirecting After Checkout – Solution.
Why Are WooCommerce Product Images Blurry?
Blurry images happen when:
-
Your image size is smaller than WooCommerce thumbnail dimensions
-
You uploaded low-resolution photos
-
Your theme uses custom thumbnail sizes
-
You recently changed themes
-
WooCommerce thumbnails weren’t regenerated
-
Your image quality settings are low
-
Lazy-load or optimization plugins compressed images too much
Let’s fix all of these.
How to Fix WooCommerce Blurry Product Images
1. Upload High-Resolution Product Images
WooCommerce recommends:
-
800 × 800 px minimum
-
Ideally 1200 × 1200 px (square images look best)
-
Use JPG for products with color variation
-
Use PNG for text, logos, and transparent images
If your uploaded images are too small, WooCommerce stretches them — causing blur. Want to ensure your product photos stay sharp and optimized for fast loading? Check out our guide: How to Optimize WordPress Images Without Losing Quality.
2. Check WooCommerce Image Size Settings
Go to:
WordPress Dashboard → WooCommerce → Settings → Products → Display → Product Images
Set recommended sizes:
-
Main image: 1200 × 1200
-
Catalog image: 600 × 600
-
Thumbnail: 300 × 300
Click Save Changes.
3. Regenerate Thumbnails
Every time you change image sizes or switch themes, you must regenerate thumbnails.
Install this plugin:
➡ Regenerate Thumbnails (free)
Then go to:
Tools → Regenerate Thumbnails → Regenerate All Thumbnails
This rebuilds your image sizes based on your new dimensions. If your store is also having problems sending order emails, don’t miss this detailed guide: How to Fix WooCommerce Not Sending Emails.
4. Disable Over-Compression from Optimization Plugins
If you use:
-
Smush
-
ShortPixel
-
Imagify
-
EWWW Optimizer
They may compress images too much.
Steps:
-
Open the optimization plugin settings
-
Disable aggressive compression
-
Switch to lossless compression
-
Re-upload images if needed
Want to make sure your images look sharp and load fast? Check out our comparison of the best image-optimization plugins in WordPress: Image Optimization Plugin Comparison.
5. Check Your Theme’s Custom Image Sizes
Some themes (like Flatsome, Astra, Woodmart, etc.) have their own image size settings.
Go to:
Appearance → Customize → WooCommerce → Product Images
Use recommended theme sizes (usually 800–1200px).
6. Disable Lazy Load (If Causing Blur)
Lazy load sometimes loads a low-resolution placeholder first. For a complete guide on using lazy-loading properly without harming image quality, check out: Lazy Loading WordPress Guide.
If you see blurry images until scroll or hover → this is the issue.
Disable lazy load from:
-
Jetpack
-
WP Rocket
-
Smush
-
LiteSpeed Cache
7. Turn Off CSS Scaling
Some themes force images to resize using CSS such as:
This can stretch images.
If this happens, add this custom CSS:
8. Re-Upload Product Images in Correct Size
If nothing helps, your original image is likely too small.
Re-upload a higher resolution version of your product image and it will instantly become clear.
Your Images Should Now Be Sharp & Clear
After applying the above fixes, WooCommerce product images should look crisp on:
-
Product page
-
Shop page
-
Category page
-
Mobile & desktop
-
Quick view
If you still see blur, your theme may be using a custom ratio — contact the theme developer.
FAQs – Fixing WooCommerce Blurry Images
1. Why are my WooCommerce product images blurry on mobile?
Mobile views often show scaled-down thumbnails. Ensure you set correct image sizes and regenerate thumbnails.
2. How do I stop WooCommerce from cropping images?
Go to Customizer → WooCommerce → Product Images
Choose Uncropped.
3. Why are my product images sharp in media library but blurry in shop?
Because WooCommerce uses generated thumbnails, not original images. Regenerate thumbnails to fix this.
4. What is the best image size for WooCommerce?
-
1200 × 1200 px for product images
-
600 × 600 px for catalog images
5. How do I make WooCommerce product images look professional?
Use high-quality, bright, centered images with consistent background (white works best).
6. Can I hire someone to fix these issues for me?
Yes! Our team provides emergency WordPress and WooCommerce support for issues like blurry images, cart problems, or email errors. Get Emergency WordPress Support.
Related: If your WooCommerce cart is not updating or reflecting changes, here’s the complete solution — WooCommerce Cart Not Updating – Fixes.
