Blurry WooCommerce thumbnails are usually caused by uploading low-resolution images or using outdated thumbnail sizes. Make sure your images are at least 800x800px and regenerate thumbnails after adjusting size settings.
WooCommerce thumbnail size issues are one of the most frustrating yet common problems store owners face. Whether it’s blurry product images, inconsistent thumbnails, or layout glitches—your product gallery should never turn customers away. In this ultimate guide, we’re showing you how to fix all of it and keep your store looking sharp and professional.
What Are WooCommerce Thumbnail Sizes?
WooCommerce uses different image sizes for different purposes. Here’s a quick breakdown:
- Main image: This is the large image on the product detail page.
- Catalog image: Used in shop pages, category archives, and related product sliders.
- Thumbnail: These appear in widgets, galleries, and quick view popups.
Setting proper sizes for these elements ensures a consistent and sharp layout. Learn more about fixing blurry images on WooCommerce.
Common WooCommerce Thumbnail Size Issues
There are a few common issues most users face:
- Blurry product thumbnails
- Wrong aspect ratios
- Inconsistent image grid alignment
- Thumbnails not updating after changes
Most of these problems stem from either improper settings or outdated thumbnails that need regeneration.
How to Fix Thumbnail Sizes in WooCommerce
1. Use the WooCommerce Customizer
Navigate to Appearance > Customize > WooCommerce > Product Images. Here you can adjust:
- Main image width (recommended: 800px or higher)
- Thumbnail width (recommended: 300px)
- Thumbnail cropping: 1:1, custom aspect ratio, or uncropped
Once changes are saved, proceed to regenerate thumbnails using the method below.
2. Regenerate WooCommerce Thumbnails
To make your new sizes apply across existing product images, install and run the Regenerate Thumbnails plugin. This will recreate thumbnails based on your new settings.
Bonus tip: You can also use Simple Image Sizes to adjust other registered sizes in your theme.
3. Fixing Thumbnail Sizes via functions.php
If the Customizer doesn’t affect your thumbnails (due to theme overrides), you can control sizes directly in your functions.php:
add_filter( 'woocommerce_get_image_size_thumbnail', function( $size ) {
return array(
'width' => 300,
'height' => 300,
'crop' => 1,
);
});Don’t forget to regenerate thumbnails afterward.
Why Are My WooCommerce Thumbnails Blurry?
This is usually because your original image is too small, or your site is displaying a resized version beyond its resolution. Always upload product images at a minimum of 800x800px for best quality.
Advanced Troubleshooting for WooCommerce Thumbnail Size Issues
- Use a CDN? Clear all cache to ensure updated images load.
- Using Jetpack? Disable Site Accelerator (Photon) for media.
- Theme overrides? Check your theme’s image handling in
functions.php. - Developer stuck? Consider custom development—visit our Contact page.
Best Image Size Settings for WooCommerce (2025 Standards)
- Main product image: 1000 x 1000 px
- Catalog images: 800 x 800 px
- Thumbnail size: 300 x 300 px
Always use square images unless your layout requires something specific.
WooCommerce Image Optimization Tips for Better SEO
- Use descriptive file names (e.g.,
organic-coffee-bag-front.jpg) - Add alt tags with relevant keywords
- Compress images with TinyPNG or similar
Final Thoughts: Stop Letting Thumbnail Issues Kill Conversions
Fixing your WooCommerce thumbnail size issues might seem small, but it has a massive impact on your store’s user experience and conversion rate. A clean, crisp product grid invites trust—and trust drives sales.
Want more guides like this? Check out our comparison of website platforms or learn how to fix WordPress email issues.
Still stuck? Reach out to Babar Ilyas for expert help on WooCommerce, WordPress development, and custom fixes.
If you’re working on customizing your product display even further, check out how to add custom fields to WooCommerce product pages without plugins — perfect for adding specs, instructions, or upsell content. You can also boost conversions by learning how to customize the WooCommerce checkout page for a smoother, branded user experience.
