It is not uncommon for us to see support tickets with issues with regarding WooCommerce product images appearing blurry, and the solution is actually super simple. I wanted to cover the steps today on how to fix this very common issue.
Let’s fix those blurry product images
The first thing you’ll do is go to the Image Sizes, Colors & Fonts page from the theme setup documentation for your particular theme. On this page there will be the exact dimensions that are best for all the thumbnails in your theme. A lot of our customers do not realize this page is available, but it is super helpful and not only will give you image sizes, but the colors used in our demo and fonts as well!
Once you have the exact image sizes you need for the products you can now navigate to Appearance > Customize > WooCommerce > Product Images from your WordPress dashboard. When you scroll to the lower part of this page you will insert the exact image sizes needed for your theme:
Now you are almost done . . just one more step!
Once you have added your specific theme sizes and saved the information you will want to run the Regenerate Thumbnails plugin. You’ll want to allow this plugin to run to 100% in order for it to work properly, so be patient if you have a lot of images.
If you are still seeing your product thumbnail images blurry at this point, don’t worry, you will likely just need to clear your browser cache.