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.

[vc_row row_type=’box’ text_align=’left’ background_color=” border_color=”][vc_column width=’1/1′]

.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

[/vc_column][/vc_row]

 

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