The WooCommerce Blurry Images Problem

DISCLAIMER: You SHOULD NOT edit theme or plug in files unless you know what you are doing. Whenever possible you should use child themes and custom CSS files, and back up your files.

I normally don’t get into coding or technical fixes here, so forgive me if this post isn’t formatted like other coding articles.

But this problem was far too frustrating, and it seemed that I wasn’t the only one so pissed by it that they were ready to throw their computers out of a window.

If you’re here, you already know the problem. You’re using Woo Commerce on a theme, not specifically built for it, and now all of your product, related product, and catalog images are blurry.

WTF? As far as we’ve come on the web, the reason that this is so frustrating is that it’s pretty damn 90’s. Why wouldn’t the plug in either have compatible CSS for its images, or just use the CSS styles of whatever theme you are using ?

So enough chit-chat, let’s get to it.

The Woo Commerce Docs Fix

The first “fix” I can across was on the Woo Commerce Docs and it involved finding the size that your theme displays thumbnails and making those changes in your Woo Commerce settings in your dashboard. Additionally, it suggested that you may need to use the Regenerate Thumbnails plug in as well, which made me pretty uncomfortable, but I did it anyway. It didn’t work.

The CSS-Tricks Forum Fix

Then on to a thread that I found on http://css-tricks.com/forums/discussion/15253/woocommerce/p1, and a fix that involved adding to your functions.php file (I added it to woocommerce-functions.php)  to force the images to size:

This actually did work, but only for my single product image. The related products and category product images were still blurry and I just didn’t believe that adding more code to the functions.php file was the easy way to get this done. I mean, it’s just images. Right?

The Design Guys Fix

On to The Design Guys. http://www.thedesignguys.co.uk/woocommerce-image-blurring-problem

What they suggested was a little simpler and more inline with how simple I thought this should be. The fix? Apparently Woo Commerce has it’s image CSS styles set for 100%, which conflicts with what my theme wants to do. So they suggested opening the file:
wp-content/plugins/woocommerce/assets/css/woocommerce.css

and changing

to…


First of all, when I opened woocommerce.css it wasn’t aligned and was a big jumble of code (still haven’t figured out if there is a way to format a file to make it display properly yet). So I placed the suggested code in my theme’s custom CSS area.

Still didn’t work. My catalog and related product images were still blurry. But , it at least pointed me in a direction.

So what I did was take the simple img CSS of both width and height of the the single product images, and related product and catalog images and set them to “auto” like this:

and…

Sucesss!

It worked! All of my product images are now normal. Yeah, I need to make some adjustments since one image is displayed in several different sizes, but at least they don’t look like they were uploaded back on the 90’s.

Well done Design Guys! Well done.

I’m not sure which will work for you, but the last one seemed to be what I needed all along for my particular theme and situation. Just to test it out, I went back and removed the addition to my woocommerce-functions.php file and all is still well.

Hope this helps you and if so, share it with others so that they don’t spend a week on this like I did.

Update:

So I ran into the same problem using a regular old WordPress 2012 Child  Theme. ARRRGGG!  Even more frustrating was that none of my own solutions worked.

However, I did find a fix.

  1. 1. First I changed the thumbnail dimensions in my media settings (Settings->Media)  from 150px x 150px , to 300px by 300px.  (My product images are around 600px by 600px).
  2. 2. Then I added this code to my theme’s custom CSS file
  3. 3. And then Regenerated Thumbnails
  4. 4. It worked! However it changed the size of my related product images and made them larger..probably because I changed the thumbnail size in my media settings. Without doing that, my related product images were clear, but small.  If you only have one product image for each, then this should work well for you.

Hope this helps.