I do love a good challenge! After working on multiple WooCommerce websites and coming across the same issue, I decided to find a solution. Why in the world were the images pulled through from the WooCommerce products widget so blurry? The images weren’t blurry on the product pages and they were the same size. If you’ve come across this as well, read on for a solution.
Below is a step-by-step tutorial on how to fix blurry images within the WooCommerce products widget. If the images in your WooCommerce products widget are appearing blurry on the front end, but those same images aren’t blurry on the product pages, follow this tutorial to fix the blurry images.
NOTE: This tutorial includes making edits to several php files, so please be careful as editing php files can break your site if done incorrectly. I recommend you edit your php files via ftp in order to make any fixes if necessary.
Step 1: Once you have decided on how many images you will display in the WooCommerce products widget, you need to figure out the images’ actual size. Right click on one of the images and click ‘Inspect’. In the example below, you can see above the image that the size is a width of 300px and height of 406px.
Step 2: Navigate to your wp-content folder either via FTP or via File Manager
Step 3: Navigate to the content-widget-product.php file (wp-content/plugins/woocommerce/templates/content-widget-product.php)
Step 4: Open content-widget-product.php
Step 5: Navigate to line 28 and change it to:
Step 5 continued: Note the addition of ‘array( 300, 406 )’ on line 28. 300 is the width and 406 is the height. Change these to whatever sizes you identified in Step 1.
Step 6: Save the file
Step 7: Return to your page and clear your cache – voila, the images should now be clear!
Hopefully this was worthwhile. As with most things in the WordPress world, there are multiple ways to accomplish the same goal; this is one way. Feel free to drop any questions or comments in the comment box below and I’ll be happy to help.