From the Blog
Robert Daigle | WordPress WooCommerce Grainy / Blurry Images
single,single-post,postid-791,single-format-standard,ajax_updown_fade,page_not_loaded,smooth_scroll,,wpb-js-composer js-comp-ver-3.6.12,vc_responsive

WordPress WooCommerce Grainy / Blurry Images

Need a quick and easy fix for your Related Products having grainy or blurry images? This is caused by WooCommerce using a thumbnail image instead of the original image size. I have seen many post on this issue ย while using the WooCommerce plugin with a different WordPress theme. Many of the fixes either did not work or where more complicated than they needed to be so I came up with a quick and easy fix.

Step 1. Open woocommerce.css

Log into your server via FTP and locate “/wp-content/plugins/woocommerce/assets/css/woocommerce.css” . Open this file with ย Dreamweaver (or your preferred editor).

Step 2. Edit the width of the container

Do a find and replace search to locate the following code.

.woocommerce .related ul.products li.product, .woocommerce .related ul li.product, .woocommerce .upsells.products ul.products li.product, .woocommerce .upsells.products ul li.product, .woocommerce-page .related ul.products li.product, .woocommerce-page .related ul li.product, .woocommerce-page .upsells.products ul.products li.product, .woocommerce-page .upsells.products ul li.product


After you find this code, change the width percentage from 48% to something like 20%. This will effectively make the images smaller on the page but closer to their actual thumbnail size. It’s not a perfect solution but, a quick and easy fix.


*Note: This is not update proof so if you update your WooCommerce you will more than likely have to re-do this unless you find a way to put your CSS changes in your child theme. Hope this helps!

Before / After

AUTHOR - robert

I am a web designer and business consultant. Currently I am working on my Masters in Business Administration from East Carolina University. I also received my Bachelors in Business Administration with a concentration in Management Information Systems from East Carolina University. My passion is found in my faith, friends and becoming a positive impact on our society. I specialize in helping businesses establish and maintain their web and social media presence. How may I help you?

No Comment


Post A Comment