Instagrams

From the Blog
TYLT Energi 2k
Robert Daigle | WordPress WooCommerce Grainy / Blurry Images
791
post-template-default,single,single-post,postid-791,single-format-standard,ajax_updown_fade,page_not_loaded,smooth_scroll,,wpb-js-composer js-comp-ver-4.1.2,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 - Rob

Web guru, marketing manager, adventure seeker and part-time blogger. Get to know me.

No Comment

0

Post A Comment

1 × five =