WooCommerce Image Blurring Problem

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 [edit] I changed to OptimizePress Aug 2013 [/edit] – 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)


250 Business cards FOR FREE*

*************************************************
in wp-content/plugins/woocommerce/assets/css/woocommerce.css

change…
img{border:1px solid #ddd;background:#f5f5f5(or whatever your background colour is);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.

[WP Viral Attack="1" ]