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
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.
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!
Chief Enthusiasm Officer,
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!!!
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!
EEEK. THANK YOU. I’ve been fighting those darn images, this worked wonderfully.
Yay! Glad I could help. Thanks for stopping by!
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.
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!
Thanks a lot for this tip 🙂 !!!
Glad to have helped, Vincent!
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.
You are welcome, John. Years of technical writing taught me that software engineers need translators. Lol. (And I married one.)
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.
Tervehdys! Thanks for taking the time to tell me it worked. Ja kiitos!
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
Oooooh! A saint! LOL I’m pleased that it helped. Success to you!
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?
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!
Thank you so much!!! This has helped tremendously.
Cheers, Bryan! Continued success to you (I don’t believe in Luck)!
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!!
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.
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!
Thanks, Phil, for leaving me a note. I’m truly glad I helped out. Hope all is still going swimmingly!
This works. And your guide is better than WC’s.
Thanks, Justin. I am sure WC will get their documentation in order soon. Let me know how it’s progressing.
thanks for this. Has been driving me nuts for the past 3 hours. Your awesome infographic fixed it!
What? Only 3 hours spent on this? LOL I am glad it helped, AndrewG.
Cheers love! Nice one 🙂
Thanks! Cheers backatcha, Jules M! I hope your site is meeting with TONS of success.
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!
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
Thank you so much Valerie – you are a star!
Now I just have to wait for my thumbnails to regenerate
Good Deal, James. I trust all went well after the Thumbnail regeneration process. Be well! ~ Val
Your tutorial worked for me. Thank you so much!!
Thanks for the note, Pauline. Yes, THAT’S what it is… a tutorial rather than an infographic. Glad it worked for you!
Sweet! THANK YOU Valerie. This is awesome!
Thanks, Chris F. You are awesome for saying so. Best, Val
It’s a pity you don’t have a donate button! I’d without a
Looks like a donate button is in order! Thanks for the push!
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, 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.
Awesome! Saved me pulling any more of my hair out!
Thanks for letting me know it helped. Cheers!
“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?
Looks like that option has been removed in WooCommerce 2.2. Good catch!
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!!
Thanks! Tell your friends! Haha. (Also, I just sent you an email about your kewl site.)
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!
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.
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
Thank you! I had been jumping through hoops trying to figure this out. VERY considerate of you to post this info 🙂
Awww, shucks! Thanks, Steev0! [Software hoops suck.]
Been having this problem for so long, didn’t think I’d ever solve it. Much thanks!
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.
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.
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
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!
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!!!
Oskar, The number of items in a row is usually a function of your theme. Looks like you solved the blurry image problem.
Like many, I have been beating myself bloody over this problem. Yours is the first fix that works – Cheers!
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!
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.
thank you!!!!!!!! I purchased a new theme and this was a huge problem!
Glad I could help, Melissa. New themes always need some kind of tweaking, it seems.
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!
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.
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!
It worked for me! Thank you so much!
pheew. you made my day.
Thank´s for your instructions. Helped me solve my old and ugly related-products-photo-problem.
I’ve been having issues with the blurry images for months and this tutorial fixed it! Thanks so much!
Thanks, Nigel, Meghan, Satya and Sharon for your comments. It’s good to know my little Woo tutorial is still helping people out!
Hey Val !
Thank you so much for your explanation, it works great !
Have a nice day !
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.
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.
Amazing!!!!! This really helped me a lot, couldnt sort that out for a long time, now my website looks amazing! Thank you!!!
So happy it helped you, Mel. And thanks for the note. Cheers!
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!
Glad I could help, Nettie! Gotta love charms. 😉 I’ve been promising to do a better illustration, but I guess this one works. Thanks!
Val, you legend, this helped me a lot.
All the best
Thanks, Harry. Am I a legend? Not hardly. Thanks for the note.
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!
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.
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!
Hi, just a note from https://docs.woothemes.com/document/using-the-appropriate-product-image-dimensions/
-> Since WC 2.3, these settings are located in WooCommerce > Settings > Products > Display
Which has the same settings that Val shows.
YAY!! Finally! There goes my cappucino fundage. LOL
Thank you so much for this. You’ve helped me solve a problem that has bothered me for a while.
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!
Awesome! Thank you very much, Amy!
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
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!
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.
Pingback: How the Ugliest Infographic Ever Keeps Me in Cappucinos - Valerie Hudgins
You’re a legend.. Thank you.
I was just looking for How to Fix Blurry Images in WooCommerce and got it. Thank you so much for this tutorial.
THANK YOU Valerie. This is awesome!
Thank you so much! The instructions were so clear and this has really helped me OU
You’re most welcome. Thanks for the cappuccino!
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.