How to Fix Blurry Images in WooCommerce 97

This entry was posted in ecommerce Geeky Stuff Thinking Allowed WordPress and tagged fixes image manipulation ugly graphic to fix later WooCommerce on

Photo Re-Sizing for Your Ecommerce Shop

After HOURS of pouring through documentation from WordPress, WooCommerce, forums, YouTube and Google buds, I finally understood how to fix blurry images in WooCommerce on a client site. I figured it was resolution, but adding hi-res images didn’t fix anything. Once I understood what the WooCommerce plugin was trying to do, I decided to make a really fast instructional graphic for any other confounded souls working through the same issue. [Turns out there are quite a few!]

Thanks to WooCommerce for putting a text and video fix out there, but it didn’t go far enough to explain their image naming convention, why it doesn’t match up in Settings > Catalog and why the settings are not in an intuitive (ascending or descending) order.  Maybe next update. Also, more people use Chrome than the Firefox fix they showed, so I took screen shots of mine in Chrome. So.. that said, I still love WooCommerce.

Maybe someday I’ll make this graphic look better. It’s UUUUGGGLY! I just did it to help me understand and remember the process.

Step-by-Step to Correcting Blurred Images

First: If your theme is WooCommerce-ready, it may help to uncheck the box on WooCommerce > Settings > General tab. Checking it allows for WooCommerce CSS to take over if your theme is NOT WooCommerce ready. Unchecking it lets your WooCommerce-ready theme take over; that’s what we want.  [This seems to have been fixed with WooCommerce 2.2]

Overview: Determine at exactly which size your particular theme is trying to render the types of images. Write these dimensions down. Then, take those numbers for each of three image settings and make sure you set those dimensions EQUAL TO OR LARGER than what your theme wants.

How: Use Chrome right click > Inspect Images or Firefox right click > View Image Info onto each of the three sizes in WooCommerce. Then we compare what we see.

Woocommerce Image Fix

Thanks also, to Pirate Mighty (and Nic Bommarito) whose YouTube video helped a lot of people. I just have to know WHY I’m doing things in my webwork.

Also, Woo suggested the plugin “Regenerate Thumbnails” and I suggest the plugin “Force Regenerate Thumbnails” because it is current with WordPress 3.8.1 and the other is 2 years old. :-/

Hope this helps, peeps!

Val

Chief Enthusiasm Officer,
ZenDogWebServices.com

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

97 thoughts on “How to Fix Blurry Images in WooCommerce”

  • Reply ↓
    Carmel

    I love you!!!! Your instructions should be forwarded to WooCommerce…. Surely all those super smart coders could have figured this out. I am convinced that they do this intentionally to torture us all!!!

    • Reply ↓
      Valerie Post author

      Glad it worked for you, Carmel! As stated, this is a compilation of all the pieces and parts I found, including some from woo’s videos. Happy selling!

  • Reply ↓
    Austin Web Development

    Thank you for a plain and simple guide on this oh-so-common image problem! It is frustrating when a recurring issue plagues forums and there are too many complex explanations to sort through.

    • Reply ↓
      Valerie Post author

      Thanks for your note. So glad it helped you! I agree that having all the info in one place was needed… so I created it. Cheers!

  • Reply ↓
    John

    Thank you for instructions, after hours of searching the internet for solutions and not finding any clear help you saved my sanity.
    The Woocommerce techs could do with a lesson on how to write help file in simple easy to understand language and not try to out do each other with tech gibberish.

    • Reply ↓
      Valerie Post author

      You are welcome, John. Years of technical writing taught me that software engineers need translators. Lol. (And I married one.)

  • Reply ↓
    Terhi

    Happy greetings from Finland!
    Thank you so much! I tried to fix images and I tried to understand all kind of tips about this issue, but after reading your blog, I realised what to do and it worked :). I’m so happy! Our webshop have good quality images now. Thanks for sharing this information.

  • Reply ↓
    ralphie

    your simply a Saint, thank you for taking the time and setting this up, easy to follow and effective. finally my images on my web page look great. thank you

  • Reply ↓
    Amir

    Hi. Thanks For this post , But I still have problem in product’s picture. some pictures cropped and I dont want to crop them . I just want all the pictures be in normal size or difined size ..
    Can you help me please?

    • Reply ↓
      Valerie Post author

      Hi Amir.

      It’s good that your images are not blurry. Your question is beyond the scope of this post, but related.

      I looked at your movie poster site (at least I think that is what you are selling) and I believe the cropping comes from the theme you chose. Notice that all the pictures are the same square size and must be for that theme to stack them correctly in the shop. When you click on them individually (category), they are still square, but when you click on the actual product, it can display the full-size photo.

      In my opinion, you have four options. None get you exactly what you want. 1) Choose another theme that allows for a larger rectangle photo, 2) Carefully center the photos you have so that when they are cropped to square more will be seen (LOTS of work), 3) Do nothing, but know that people understand what thumbnails are. When I see a photo of part of Archer and text that says “Archer” then I totally understand that this is Archer. After I click on it (twice) for the actual item, I can get the larger movie poster. 4) The other option is to use a reduced square photo so that the thumbnail looks really good, but this is not at all representative of what they might buy. When they click on the individual product it will still be small. Not good.

      Of course, you could always open a ticket with the guys at WooCommerce and see if they could code a rectangle thumbnail for you. Doubtful. The themes are meant to work around square thumbnails.

      I hope this at least confirms what you have already figured out. Success to you!

  • Reply ↓
    Ronnie M

    Thank you so much it worked!! Oh my goodness I have been looking for a solution to this problem for months and could not understand any of the other other explanations. There were only two pics that stayed the same and now I have to retake some of the pictures because they don’t look right with the new size (I had done a lot of cropping to try make them the same size when looking for a solution.). Thanks again!!

    • Reply ↓
      Valerie Post author

      Yay! Yes, I went through the same thing and came up with this fix for me. Glad it’s helping a few others. I might have to put a “buy me a coffee” donate button. I know when I was looking, I would have gladly paid for someone to help me out. Very frustrating, it was.

  • Reply ↓
    Phil

    THANK YOU SO MUCH!!!!! I’ve been trying to fix this problem for ages this is by far the best advice and helped me step by step to fix this problem!

  • Reply ↓
    Marieke

    You are the best! Thank you so much for this straight forward solution. I was rebuilding my webshop using Mystile by Woocommerce when I ran into trouble. I could not have fixed this on my own. I put a link to your site on both my blog and my FB page to help other webmasters. Thanks again!

    • Reply ↓
      Valerie Post author

      Awww! Thanks so much, Marieke, for the kind words and the linkups. Geesh! Now I have to go fix that UGLY graphic I threw up there. LOL! Much success to you! And your website is beautful! (Uw website is prachtig!) ~ Val

  • Reply ↓
    Eddie

    Hi valerie i came across this on wordpress site. i didnt make my site. a friend of mine did but when i ask him whats going on with the images i get this

    “I knew that. The danger with amending templates is that when the next version of WP comes out, it will be undone.”

    ive look at your video and on my Woocommerece i cant see a Cataloge tab in settings i only have
    General / products / tax / checkout / shipping / accounts / emails

    any help on this would be awesome. Thanks
    Ed

    • Reply ↓
      Valerie Post author

      Ed, Your friend is correct that creating a CHILD theme/template is better than altering a theme/template. It is true that the next update of WordPress will overwrite all the changes made. The topic here, however, has nothing to do with changing the code of the theme/template. This is simply configuring WooCommerce. Fire your webmaster and look for another! Success to you in your glass business.

  • Reply ↓
    Simon

    “First: If your theme is WooCommerce-ready, it may help to uncheck the box on WooCommerce > Settings > General tab”

    Could you please be more specific about which box should be unchecked?

    Thanks 🙂

  • Reply ↓
    Monica

    You are the BEST!! I have been struggling with this beast for far too long!!! Great explanation, step by step process that is so much better than any help I’ve received! Thank you so much!!

    Monica

      • Reply ↓
        Monica

        Valerie!

        You are my new hero! I didn’t see any email from you! 🙁 Could you resend it? By the way, I am redesigning the website using your tips on a test site! Pictures have great clarity and are not cut off … thanks to you!

        Monica

  • Reply ↓
    francis

    Hi Valerie,

    I was about to uninstall the WooCommerce plugins and move on to others carting plugins due to its awful image rendering despite many attempts to alter the image sizes, settings and regeneration. But I have decided give it another try to search for a solution online and after following your steps provided, it just appeared like a magic transformation to me after refreshing my product catalogue page!

    I can’t thank you enough for your generosity in sharing your knowledge from your many hours of researching and trial-an-error to fix the issue.

    • Reply ↓
      Valerie Post author

      Awesome, Francis. Yes, I think this little bit of instruction has saved a number of WooCommerce sites from going to other options. Thanks for saying so with such kind words, too! Continued success to you! ~Val

  • Reply ↓
    Gurj

    Hey Valerie, great article! Quick question, does regenerate thumbnails regenerate all thumbnails on the entire site? The reason I ask is because only the store section of my site uses WooCommerce, and the rest of the site uses different thumbnail sizes for articles.

    • Reply ↓
      Valerie Post author

      Gurj, to my knowledge it should regenerate all the thumbnails on the site. This is just like an update or a reboot. It doesn’t make them all the same size, it just tells the site to reset each thumbnail to what you told it to be, therefore, your thumbnails on the other parts of your sites SHOULD remain the same size. Let me know how it goes, if you can.

  • Reply ↓
    Genelle

    THANK YOU! THANK YOU! THANK YOU! I have been trying for weeks to sort this problem to no avail. This morning I set my intention to fix this problem of blurry images in my shop and I googled again and this time your blog came up! It’s worked and I will be sharing your blog with my network groups! You are a genius and no one cane persuade me otherwise

    • Reply ↓
      Valerie Post author

      Intentions are powerful things! I’m so glad I could be part of the solution. Yes, I’m pleased with the Google rankings this fix for blurry images is getting. I’m not a genius, just a persistent tinkerer, but thank you!

  • Reply ↓
    Oskar

    I can not change it..

    I have blurry images on my mac and i can not do anything..

    The proceeds don’t come in line like 3 in a row..

    They come like 2 and then 1 and then 2 again..

    Please HELP ME!!!

  • Reply ↓
    Alan

    Valerie – Thanks very much for this superb tutorial. You described everything clearly, and, with your guidance, I solved the blurry image problem. WooCommerce should hire you to produce more annotated graphics like this one! … Thanks again for your help!

    • Reply ↓
      Valerie Post author

      Haha! I love WooThemes, but I don’t think they put lots of effort into their documentation – most companies don’t which is too bad. Technical writing is becoming a dying art (as I demonstrated with my down-and-dirty-but-effective annotations. Ha! Thanks.

  • Reply ↓
    Darcy

    Hey Valerie, Is it possible to only regenerate some of the thumbnails on your website using this plugin? Or will regenerate all of the thumbnails? Because I want to keep some of the images the way they are, and only some of them are blurry that I want to change.

    Thanks in advanced for your help!

    • Reply ↓
      Valerie Post author

      Darcy, I believe it re-generates them all, but it should only affect the blurry ones. If they are correct, they should stay the same. It’s just like a reset.

  • Reply ↓
    Nigel

    As you say Woo is so good at most things. Why do they make images so painful? Sometimes their support is great but images….
    Many thanks for solving one of the mysteries of life!

  • Reply ↓
    satyasingh

    pheew. you made my day.
    Thank´s for your instructions. Helped me solve my old and ugly related-products-photo-problem.

  • Reply ↓
    Valerie Post author

    Thanks, Nigel, Meghan, Satya and Sharon for your comments. It’s good to know my little Woo tutorial is still helping people out!

  • Reply ↓
    Kelly

    Hello,

    I have a similar problem, I have been looking for a solution for weeks and I have no where else to go. I am trying to make my product catalog images larger but nothing seems to work for me.

    • Reply ↓
      Valerie Post author

      Kelly, the two products in your shop look perfect. The Whipped Lemon-Coconut Scrub looks good enough to eat! You mentioned you want them larger. Remember, you can’t enlarge a photo larger than it started out without blurriness. I hope you got it figured out.

  • Reply ↓
    Nettie

    Thanks Val….I have been trying to fix this issue more than I day until I stumbled upon your post. Very well illustrated. Works like a charm!

    • Reply ↓
      Valerie Post author

      Glad I could help, Nettie! Gotta love charms. 😉 I’ve been promising to do a better illustration, but I guess this one works. Thanks!

  • Reply ↓
    DEL

    Thank you so much for this detailed how-to. My issue is I cannot for the life of me figure out where to find the Catalog tab. When I go to Woocommerce settings I just have tabs labelled General, Products, Tax, Checkout, Shipping, Accounts, Emails, and API. I’m very much a newbie but would really appreciate any help!

    • Reply ↓
      Valerie Post author

      Thanks for the note Del. Glad it helped.
      Do you mean the Shop page? Or the category page? Perhaps the catalog page (which I don’t see on my themes or versions of Woo) is a COMPILATION page like the Shop page. It IS NOT a separate page, per se (usually), but is made up of all the posts/products/whatever that are flagged to go into that category/search/whatever. The rules for what the Catalog page displays are under other headings and will differ with your theme, but try Settings > General and also Products and see if those have the setting you are looking for.

      • Reply ↓
        DEL

        Thanks for your quick reply! I was just following your instructions above, step number 6, where you said to go to Woocommerce>Settings>Catalog tab. Unfortunately, going to the Settings>General also did not yield anything and there’s nothing with the product pages. So it might be my theme? I’m using Stained Glass. What I ended up doing is going to the Product page and edited the individual picture using your technique (ensuring that the smallest size in the ratio was large enough) and it seemed to work for the one I tried. Perhaps that’s what I need to do — so I’ll continue with that and see how it goes. Thank you once again! Now just need to see how I can get rid of things on the “pages” (categories) that I don’t want as I put widgets there instead — when I change the code with the Inspect Elements it just reverts back once I refresh the page… But thanks with this issues — one little step at a time!

  • Reply ↓
    Amy

    Amazing!! Thank you for saving me hours of time and frustration. I seriously was ready to quit WordPress and go back to hand-coding. I’m bookmarking your Blog, so you can’t ever remove it!!

    I’ll gladly buy you a cappucino!

    Amy

  • Reply ↓
    Richard

    Hi Valerie,the ariticle was very informative. I have the reverse problem that the images shown on the product details page (Single image is very large. I loaded the force regenerate plug in. Cheked the image sizes via chrome and got 527×702 natural 225×345 which are the sizes I want. I am not a programmer and have battled my way fixing all the problems on the site myself, but this one has me beat. If you can please help me make the images Smaller not bigger. Thanks Richard

  • Reply ↓
    Leigh

    OMG, I am so grateful to have stumbled onto your site! I just followed your directions, and it worked beautifully. You are a genius! Thank you so much for your generosity in sharing your knowledge with us newbies!

  • Reply ↓
    Sarah Hudock

    Omg I stumbled across your page too. For pity’s sake THANK YOU JESUS, THANK YOU VALERIE for this excellent explanation! Bookmarking YOU, for sure.

  • Reply ↓
    Mark Hetherington

    Thank you – I abandoned WooCom three years ago because after spending months developing my site I felt all the effort would be wasted if I had to put up with slightly blurry images. However my new theme is WooComm intensive so I decided to give it another go and nearly gave up again, having tried everything I could find including all those who advise changing the CSS code, which I know nothing about and don’t like tampering with.

    Then I found this – so simple and it WORKS! Outstanding, thank you.