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!