Try this at the bottom of plugins / woocommerce / assets / css / woocommerce.css
.woocommerce div.product div.images,.woocommerce-page div.product div.images,.woocommerce #content div.product div.images,.woocommerce-page #content div.product div.images{width:auto;}
.woocommerce .related ul.products li.product img,.woocommerce-page .related ul.products li.product img,.woocommerce .upsells.products ul.products li.product img,.woocommerce-page .upsells.products ul.products li.product img,.woocommerce .related ul li.product img,.woocommerce-page .related ul li.product img,.woocommerce .upsells.products ul li.product img,.woocommerce-page .upsells.products ul li.product img{width:auto;height:auto;margin-right:10px;}
.woocommerce ul.products li.product,.woocommerce-page ul.products li.product{width:auto;}
The plugin authors have been too specific with their css and as a result the inline styles don’t over ride the external stylesheet. It’s a problem that appears to have been around for a long time. Net result: you see blurry images as your thumbnail or whatever is enlarged to the default size specified in the external stylesheet, often 48% or nearly half the width of the page.
Last bit of the puzzle (hopefully). Just remember to regenerate featured images or upload new ones.
.woocommerce .cart-collaterals .cross-sells ul.products li,.woocommerce-page .cart-collaterals .cross-sells ul.products li{width:auto;}
It should be easier than that…
1. change your thumbnail size in Woo to, say, 150 x 150
WC Settings >> Catalog >> Image Options
2. change your thumbnail size in WordPress to 150 x 150 also
WP Settings >> Media >> Image Dimensions
3. install and run Regenerate Thumbnails plugin
As this will only apply to new images, retrospective resizing should be done with Regenerate Thumbnails – its pretty easy
Your “related products” and “You may also like” images should be looking fine if you have uploaded your images larger than 150 x 150
[sig moderated as per the Forum Rules]
Hi richarduk,
I tried all three but the only one that worked with the WP-Clear theme I’m using was the related products one.
My related products were unbelieveably huge and fuzzy.
With your suggestion my related products are a normal small crystal clear size and perfect.
The only thing I need now is that my products page with all of the products are blurry. The detail item page is crystal clear.
I just need the products page with all of the products to be sharper.
Thanks,
chrisjackson
I have problem with blurry images as well. I am using Custom Community Pro theme.
I’ve noticed that for example I have Single Product Image size set to 300X300. (in WC Settings >> Catalog >> Image Options), but it is displayed as 330×330 instead of 300×300. I would think that my images are blurry because they are resized to 300X300, but stretched to 330×330. The same problem with Catalog Images and Product Thumbnails.
Any suggestions how to fix this?
@renoiriii You’re missing the point completely, no offence. This is nothing to do with regenerating thumbnails and all the rest of it, this is a fundamental CSS issue with WooCommerce where they’ve been far too specific in their external stylesheet, setting images to 48% of the width of the page, meaning that the inline styles can’t be over-ridden by the external styles.
@chrisjackson Sorry can’t help, the CSS I used applied to one particular method of including WooCommerce in a theme, it might be that your theme includes it in a different way and has different CSS?
@jamie771 I noticed that images weren’t exactly the size specified but after having images that were 48% of the width of the page I was grateful for anything that came close to working. These are issues that WooCommerce should be fixing and I posted here precisely because jameskoster (Plugin author) posted here and MIGHT be receiving these emails. I couldn’t be bothered registering with WooCommerce and going on a support forum, that was all.
Hi richarduk,
I followed this:
http://www.youtube.com/watch?v=HKdenKwhB6o&feature=youtu.be
It fixed the blurry images on the store front thumbnails.
It fixed the oversize related products without having to modify the woocommerce.css file.
Catalog
300×300
600×600
100×100
Again, I’m using the WP-Clear theme so all I know is it works very very well for me.
Thanks for your response!
chrisjackson
I am having exactly the same problem in a site I am building (http://a1sportsdistribution.co.uk/product/aero30-bottle/). I thought at first the issue was that I built my theme using ArtISteer 4.0. All of my images are 200 x 200 and I have set the WooCommerce image settings to 150×150, 200×200, and 90×90 respectively with the Hard Crop unchecked but they are all blurred,
richarduk, If I try your code below at the bottom of the coocomerce.css is that the best way to fix this:
Took a change and richarduk’s fix did the job, many thanks. I owe you one.
Guys, we work on it since weeks, sometime work sometime doesn’t. However we want follow up the instruction by @richarduk and have a question.
We just last (updated) WP with Woocommerce plugin on our Side.
#@richarduk you write; “Try this at the bottom of plugins / woocommerce / assets / css / woocommerce.css”
.woocommerce div.product div.images,.woocommerce-page div.product div.images,.woocommerce #content div.product div.images,.woocommerce-page #content div.product div.images{width:auto;}
.woocommerce .related ul.products li.product img,.woocommerce-page .related ul.products li.product img,.woocommerce .upsells.products ul.products li.product img,.woocommerce-page .upsells.products ul.products li.product img,.woocommerce .related ul li.product img,.woocommerce-page .related ul li.product img,.woocommerce .upsells.products ul li.product img,.woocommerce-page .upsells.products ul li.product img{width:auto;height:auto;margin-right:10px;}
.woocommerce ul.products li.product,.woocommerce-page ul.products li.product{width:auto;}
furthermore
.woocommerce .cart-collaterals .cross-sells ul.products li,.woocommerce-page .cart-collaterals .cross-sells ul.products li{width:auto;}
Note:
We re-write some php:`
<strong>Please help us, we are not Programmer, the Data in which CSS Sheet, on our Frontend we don’t have this Folder.
THANKS</strong>
/*To remove Sorting drop down */
.orderby {
display: none !important;
/*To remove Sale Logo */
}
and
body.woocommerce span.onsale, body.woocommerce-page span.onsale {
display: none;
}
.woocommerce span.onsale, .woocommerce-page span.onsale {
display: none;
}
For those looking for a solution to this, try re-saving your settings under WooCommerce > Settings > Catalog > Image Options. Perhaps even changing your values.
@richarduk thanks much for the code…. totally fixed the issue for me!!
@richarduk
Do you by any chance have an idea of how to fix exactly the same issue in Mystile-theme/with WooCommerce?
All images are showing just fine – except the catalog img. on the store front.
I’ve uploaded thumbnails 600x600px and the sizes are set to
150×150
300×300
90×90
– so it shouldn’t have anything to do with the measures…must be the same old css issue …
Hope you or anyone else are able to help, thanks:-)
@grafikbutik
The way I did it was to look at the class of the images – FireFox / Web Developer or FireFox / Inspect element.
Then I viewed the CSS (Web Developer /CSS /View CSS) and found the stylesheet that WooCommerce had created. It was pretty crammed but I pasted it into EditPad and searched through it for the relevant classes. It was immediately obvious that most of them had been set a large width (48% if I remember). I then extracted those selectors and declarations and changed the width from 48% to auto. I might have added a height:auto, can’t remember now.
You then paste the whole lot into the bottom of any relevant stylesheet or create an internal stylesheet and the new styles will over-ride the old.
Amendment to previous post of mine, not that anyone really cares 🙂
WooCommerce where they’ve been far too specific in their external stylesheet, setting images to 48% of the width of the page, meaning that the inline styles can’t be over-ridden by the external styles
should have been
WooCommerce where they’ve been far too specific in their external stylesheet, setting images to 48% of the width of the page, meaning that the inline styles can’t over-ride the external styles