OK this drove me NUTS! and searching online it’s driving a lot of other people nuts too, so here’s the answer:)
Now, I’m a big fan of WooThemes and Plugins (In fact, You’re looking at Woo’s Canvas right now) – They probably have the slickest looking themes on the market today and 99.99% of the time they’re just plug-and-play and everything works like a dream.
However, today I ran into an issue using the Daisy Theme (Not Woo BTW) with the WooCommerce Shopping Cart Plugin. My thumbnail images were being used as main images and stretched too large giving a blurry effect to all the products. Not Good.
After a good few hours of firebugging and code searching, here’s how to sort out your image blurring problems in woocommerce (I’m using it with the Daisy theme at http://www.popemusic.co.uk)
*************************************************
in wp-content/plugins/woocommerce/assets/css/woocommerce.css
change…
img{border:1px solid #ddd;background:#f5f5f5;padding:6px;display:block;width:100%;height:auto;}
to…
img{border:1px solid #ddd;background:#f5f5f5;padding:6px;display:block;float:right;}
*************************************************
In fact, if you go to wp-content/themes/(your theme)/css/ and edit the css files replacing all the {width:100%;height:auto;} with just { } …
To read more, click the Tweet or Google +1 Button below.
Hey, this works to make the thumbnail clear so thank you, however I don’t understand why the single product page is calling the thumbnail in the first place? Why wouldn’t it call the large/full-size image? Can’t seem to figure that one out.
Thanks anyways!
WOW, just figured it out.. woocommerce > settings > catalog > image options (near bottom).. just adjust the image size in there!! took me almost 5 hours to find that.
Hi Lauren, Thanks for your comments!! I tried that way before altering the woocommerce.css file and it didn’t have any result – odd.
Ain’t it grand when something you’ve been working on for hours falls into place
Lauren is right… however you must regenerate your thumbnails after. Or delete and add new. I used Regenerate Thumbnails and it worked great.
Cheers Adam, HERE is a link to the Regenerate Thumbnails plugin.
I’ve tried this suggestion multiple times and nothing is happening. Can you please help? How did you change the settings? I’ve been resizing images for hours and nothing makes any difference at all? I’ve e-mailed WooCommerce over this issue a week ago and gotten no response. Please help if you can?
Hi Dave, What’s the URL of your site?
First off try the Regenerate Thumbnails plugin HERE
If that doesn’t work, i’ll have a look at the CSS…
I have been going nuts for hours trying to figure this out! I have downloaded and installed the Regenerate Thumbnails plugin and it seems to work fine. The issue is in going into WooCommerce, then Settings, the Catalog, then going to the Image Options at the bottom of the page. I don’t really know what to set them at. I’ve tried everything I can think of and the main image always comes out blurry no matter what I pick.
The website is http://1worldcreations.com.
I am ready to pound my head into the wall, so I truly appreciate whatever you can do to help!
Hi Dave, I’ve sent you an email with a step by step fix:)
It took me 5 hours just to find a post mentioning this option, thanks Lauren!
Thanks so much! Ive been searching for the answer to this one for weeks!
Lauren’s suggestion wont work for me as my thumbnails are all different sizes. But the CSS hack works beautifully! Thanks so much! Http://freshstyles.net
Hey Melissa! Glad to be of help:)
How were you able to change the permission on the woocommerce.css file? I changed it in my FTP, but it would never stay due to a Critical failure. I’m assuming that I… don’t have permission to change the permissions. How did you get around that?
Hi Chris, no need to change permissions on the css file – they should already be writeable.
If you do need to change permissions and it’s not letting you, contact your hosting provider – they may have this feature disallowed.
Good Luck!
So frustrating. I’ve spent so many hours on this its driving me insane! Can you please help me?
Hi John, have you tried the Regenerate Thumbnails plugin and/or the css hack?
I”m going crazy! Been searching now for hours.. I cannot find the img{border:1px solid #ddd;background:#f5f5f5;padding:6px;display:block;width:100%;height:auto;}
In the CSS file… I redownloaded the plugin, and also in that css file i cant find this line.
Hi Giancarlo, search for
as the border colors etc will be different depending on the theme. The width/height is the code you need to change – cheers!!
Do I need the change only one line? Or everything that says width:100%;height:auto;
change it in
wp-content/plugins/woocommerce/assets/css/woocommerce.css
and let me know how you get on
I changed the values to 200 at 200px that worked for me! Thnx for explaining and replying.
No Problem – Glad you got it sorted:)
It works! Drop by to say thank you!
No problem! Feel free to spread the word
Still having problems
I am using the shelflife theme
I have regenerated thumbs
I changed
wp-content/plugins/woocommerce/assets/css/woocommerce.css
from
img{display:block;width:100%;height:auto;
to
img{display:block;width:100px;height:100px;
and from
img{width:100%;height:auto;
to
img{width:100px;height:100px;
changed all image options to 100×100
the regen changes the the size but the css is still blowing it up to another size
thanks for any help
Hi Damion,
I can still see at least 6 instances in the wp-content/plugins/woocommerce/assets/css/woocommerce.css file where the img attribute is “height:auto;”
Change these to height:100px; and let me know how you get on.
Richie
Hi, I am having similar problems, please help, I tried using the thumbnail regenerator and adjusting from Catalog section in woocommerce, none have helped, I tried to go in the css files that you mentioned, but I cant find the line to replace as mentioned from above in woocommerce.css. Please help. my website is http://www.greenonion.co.za.
Thank you! really appreciate your help
I Cannot figure out where to edit the file, if you could help me fix this blurry issue that would be greatly appreciated.
I feel like I must join the bandwagon…
II am just having no luck.
I have hundreds of photos of all diffrent sizes ranging from 200px to 2800px and they all look blury… I downloaded my CSS file made the changes and re-uploaded them. turns out the only thing that happened is I had a bunch of squished photos… I could really use some help.
THank you SOOO much!! this solved my problem after 2 weeks of stressing!!! GOD bless you!!!
i was having a similar problem it was on the shop page and the single item page. on the shop page i found a width100%;hight:auto; and just deleted it and it worked for the shop i just followed your directions for the rest thank you so much it!
By the was does anyone know how to still have the side bar on one side. It kicks it to the bottom on my page. karlgrittner.com
Hi Karl, glad to help – as for the sidebar problem, depends which theme you are using. sounds like it’s been caused by a stray closing div tag.
Thanks for the post. My problem was to resize the ‘dimensions’ of the related products not its ‘resolution’ . I did this by changing
width:100%;height:auto; to width:50%;height:auto;
But i’m yet to solve my sidebar problem as @karl mentioned. Any help? theme: Zenon lite
Thanks
Any idea how to fix it with the update to WooCommerce? I’m having no luck with my normal edits.
It didn’t help me :[ and now the pictures are different sizes. I don’t know what happened. And I give up. :[
Hi Candice, Looking at your woocommerce.css file, I can still see several intances of “width:100%;height:auto;” for your images.
If you follow the instructions given, this will embed your images at their actual size (make sure they are sized correctly eg in photoshop etc. beforehand)
and remember N.G.U
Hello,
I’m having trouble with my images being blurry too.
I hate to be the guy who asks the same thing everyone else does…
but I’m not exactly sure how to access woocommerce.css file – there’s only .php files under the editor.
Any help would be great.
Dan
Hi Daniel, No problem:)
There are 2 ways of accessing the css files.
1 – Use an FTP program such as Filezilla and browse to yourdomain.com/wp-content/plugins/woocommerce/assets/css
or if you have cPanel, here’s an easier way…
2 – Log in to your FileManager, and browse to public_html/yourdomain.com/wp-content/plugins/woocommerce/assets/css
You will be able to edit the css from here easily:) Hope this helps.
okay, I edited the css in my cpanel, regenerated the thumbnails and nothing has changed… any thoughts?
Hi Daniel, It looks fine to me – no blurring etc
Try refreshing your browser (F5 or CTRL/SHIFT R)
Let me know how you get on.
How many times is does this occur in the woocommerce/assets/css code? I only found it twice and corrected to width:100px;height:100px;.
Also made those the same dimensions on the catalog page and then ran thumbnails regenerator.
Nothing seems to working but, I suspect I may have missed more of those images in the woocommerce/assets/css.
This is driving me crazy, too! Thanks in advance for whatever help you can provide…
Hi Art!
Search for width:100%;height:auto; – i can see it 3 or 4 times in the css. Change these and you should be good to go.
Nice site BTW!
That totally worked!!! Thanks so much. I take back all my ugly thoughts about WooCommerce!
Thanks for finding this hack, it certainly works! But it’s not upgrade safe. I had this problem fixed, then WooCommerce updated and it was lost. This support doc skims over the idea of upgrade safe customizations. I don’t know enough to really implement this hack in the way they suggest. Any help?
Yikes…! Lately, Woo has been updating almost everyday. Guess I’ll get to know the woocommerce/assets/css code fairly well…!
Oops, this is the link to that support doc: http://wcdocs.woothemes.com/codex/css-structure/
May be too late for some, but for others running into this situation I wrote a guide which explains how to use the appropriate image dimensions (in the catalog tab of WooCommerce settings) for your theme. You can read it here.
Having the same problem website is hazelmaeboutique.com all pictures are messed up! i tried to change the size of photos in the catalog section (but not really sure what numbers they should be.) and then i regenerated them but no luck im not to sure of what im doing in css i searched for what you said and cant find it! Help please!!!
I was looking around to solve this but nothing helped. Thanks to you my mages look perfect now.
Hi I need help my pictures are coming out blurry when i click on the picture to get more information on it i like the way its in the products i have cropped it in photoshop to height 300 but when i click its blurry how can i change this i have tried all the steps everyone else is saying on this page but no luck can i get help please!!
Cart just started the blurring issue on newer added products. Need some help!
I’m using the Woocommerce plugin with the Dynamix theme.
Dear Design Guys,
I have the same problem with my catalog images.
First it was a column of 4 and I make it a column of 3 but i would like that the image will have a size 185px by 180px.
I tried the CSS tactic and the Regenerate Thumbnails but same options didn’t help.
It is strange because the related products have the good size:
http://www.condoomdeal.nl/condooms/my-size-condooms/my-size-64m/
See gerelateerde producten.
Looking forward to your email.
Kind regards.
Maarten
I look around a day and find this topic. It’s very usefull for me. Thanks everyone!
I was so ready to leave yet another “IT WORKED” review but it did not
does this fix still work? Anyone know what else I should change? Thank you
james koster – sorry but, you are absolute out of problem.
Thank you SO much for this fix, even though I haven’t tried it yet.. lol. When I started having this problem, I thought it was just me or the way I was using the plugin. I feel much more confident that I will be able to spruce up the site. Thanks again!!!!
http://wcdocs.woothemes.com/tutorials/using-the-appropriate-product-image-dimensions/
I read this really carefully… basically changing the “Catalog Images” under WooCommerce>Catalog>Catalog Images and I changed it to 300px by 300px and then regenerating the thumbs worked perfectly.
As it states in the above documentation: “Catalog Thumbs are the medium sized thumbs and are used in all product loops e.g. categories, related products, up sells, cross sells etc” That was important info considering it was the “related products” that were blurry.
Different themes could and will render “Catalog Thumbs” differently… in my case I’m using Twenty Eleven theme and as it says the largest size that theme renders those images is 280px.
Anyway suddenly it all made sense after reading that…
Hope that helps!
Hi, Can someone please email me some detailed instructions on how to fix this and what setting I’m suppose to be using????
You can look at my website and the test images I uploaded and they are all out of whack. I did the css thing and it worked for a little bit on the 2 of the 3 pictures and then I tried the one where I resize the images in the catalog and it screwed it all up even more…..
Can someone please let me know the best size to upload an image at as well??? I’ve read 800×800 so I tried doing that and they’re too big.
Big Thanks!!!
-Nick
And my slideshow is no longer working either among products….
Thank u from Russia, man
My Pleasure:) Please feel free to share – thanks!
awesome! thanks for the fix!
My Pleasure:) Please feel free to share – thanks!
Hey all, I’ve tried the remove height and width but unfortunately it doesn’t work. Like many on here it has cost me hours to change this and I really need to get this site running. Any suggestions any one?
Hi BD, thanks for your comment – You say “It doesn’t work”… However, It seems to work for most people. What is your site css URL and I can have a look for you.
Thanks:)
And also since I regenerated the thumbnails, my lightbox function stopped working. Is there a link between this?
Not as far as i’m aware – nobody has raised this issue before.
Hi,
I did exactly what you said – remove width:100%;height:auto; on the woocommerce.css files but the images are still blurry. Please advise what I did wrong. thanks so much! Its been so frustrating.
Hi Alicia, I can still see 4 instances of width:100%;height:auto; in your /wp-content/themes/abundance/woocommerce-config/woocommerce-mod.css file – try removing each one at a time and refresh the page to see what makes a difference.
Remember to save the original css file in notepad in case you can’t remember what you changed. Good luck & let me know how this works for you.
Hi there, thanks for your offer of assistance, I’m a rookie with wordpress and was excited to find your instructions… especially because you gave precise instructions about which file to edit. So I found the components in css that you suggested the hack for and changed width and height both to 200px… unfortunately this didn’t make any difference to the related product images but instead distort the product images on the category page and reduced the size of the main image on the product page. I’ve restored the default settings now and am hoping you can guide me through this. Ideally I’m wanting to reduce the size of the related products pics and make them clearer. I’m using Responsive theme and image settings in Woocommerce are: catalogue 150×150, single product 200×200, product thumbnails 90×90. I’ve installed Regenerate thumbs too
Thanks in advance for your help,
Denise
First; thanks for all your hard work admin!
I’m having a issue, I’ve tried the re-coding and it didn’t provide the desired results.
I first replaced all the height:auto’s with height:150px (found like 6 in woocommerce.css) and then I replaced all the width:100%;height:auto; with width:100%;height:150px; (found 2 in woocommerce.css).
Neither solution worked.
It did cut the height to 150px however the width was still like 400px & it also just cropped the image, it didn’t re-size it (I am deleting & reloading the images after each change to verify).
I am using Simplicity theme from WooThemes (you think it would be plug & play).
All I want it the photos to be like 150px on every page and it blow up to my 700px long side when in light box (clicked on single product page).
The theme is dictating the image size as changes in WC settings do nothing.
Any ideas?
And please can you post a “1>2>3″ how to do this coding? I feel like it’s spread all around and I maybe missed something.
Thanks!
Hi there,
I’ve been searching for WooCommerce.css to no avail. On WordPress, my steps were: Plugins>Editor>WooCommerce from the drop down menu. Please help!
Thanks,
Mike
I have read this topic, and it seems that developer of the shop I’m using have made a different hack, because I can use the options in the WooCommerce settings to control without blurry reactions.
Remember to check/uncheck the “crop” function behind the “size” dimensions and then regenerate the thumbnails with plugin. But have seen this CSS in my website, just not active.
Like another reader asked about.. HOW the hell is it possible to make the woocommerce NOT load the thumbnail image as the first image in the single product?.. I can’t find it anywhere, and I need to load different images because of the content in the images..
I’m really enjoying the design and layout of your blog. It’s a very easy on the eyes which makes it much more pleasant for me to come here and visit more often. Did you hire out a designer to create your theme? Outstanding work!|
I’ve changed it to (width:50%;height:auto) or delete (width:100%;height:auto), it worked, but the size become small.. how to fix it?
I tried all that was posted here but nothing seems to work could anyone please help me!
My website is: test.wildatartatelier.com
Thanks,
Sara
Hi Laura!
I’ve tried putting the code into my css but it doesn’t change anything. Could you maybe help me fix this??
Thanks,
Sara
YOU ROCK! It worked.. Thanks for saving time in my life!
Glad it helped Bridget! Feel free to share http://www.thedesignguys.co.uk around:)
Okay, after many hours (not listing how many) I removed {width:100%} in three places in the Woo ecommerce CSS and then used the regenerate thumbnails plugin and it’s AWESOME!!! Thank you, thank you, thank you!!!
Glad to be of help:)
Cheers for this info. As like others i love woo-commerce plugin. The regenerate thumbnails did not work for me so i edited the css in wp-content/plugins/woocommerce/assets/css/woocommerce.css
And change 100% to 50% and works for me. Been looking for a few hours and found you. Ain’t firebug just great for finding this stuff.
Cheers
Mike
Hi there, oh yes a very popular thread! I’m no web designer sadly, and in fact, my web designers have taken the money and run! Leaving me with this problem. I can see everything everyone is saying makes sense in a logical kind of way…. but I don’t touch CSS or anything hardcore as I’m a lay person and have NO idea what I’m doing and screwed up my last WordPress theme by trying to “fix” the CSS. I would absolutely appreciate assistance from someone who speaks the CSS language… so I don’t ruin my now complete web site.