Home » Tutorials » How to fix blurry product images in WooCommerce

How to fix blurry product images in WooCommerce

|

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.

Similar Posts

3 Comments

  1. This is a great reminder to regenerate those thumbnails!

    In order for this to work, you need to start with images that are the same size or larger. Smaller images that are magnified will become blurry even if you do resize them and regenerate them.

    Thanks for a great article Stephanie and Lauren!

  2. I don\’t see a \”Display\” option in my dashboard = Woocommerce > Settings > Products??
    Do you know if this has changed recently? I\’ve looked everywhere in all the settings options for where to change display and cannot find where I can do this.
    Thanks so much for this info. I\’m so glad I found this post as my images are looking blurry.

    1. Hi Sharon,
      Yes …. this has moved to the customizer. You’ll find it in Appearance > Customizer > WooCommerce > Product Images.

Leave a Reply

Your email address will not be published.