There’s an issue with images showing blurry when they get automatically resized. Here are some steps to avoid this.

There are 3 image sizes to be concerned with here- Catalog Images, Single Product Image, and Product Thumbnails.

In this example, I’m focusing on the Single Product Image because it’s the largest one. This example will use a size of 400px x 400px. The other images will be automatically resized smaller, based on that one.

WooCommerce image settings

The first step is to configure the WooCommerce settings in the Admin control panel. Go to WooCommerce | Settings | Catalog tab.

Keep in mind that if you had images previously loaded in a media gallery, you’ll need to re-import them or resize them to take effect.

WooCommerce product image CSS settings

The other configuration to make is to the CSS style sheets. I add the following code to the end of the file:

/* -------------------------------------------
   WooCommerce override styles - Start
-------------------------------------------*/
/* -------------------------------------------
   Image sizes
-------------------------------------------*/
ul.products li.product a img {
    width:75px !important;
    height:75px !important;
}
#content div.product div.images img {
    width:400px !important;
    height:400px !important;
}
thumbnails {
    width:75px !important;
    height:75px !important;
}
/* -------------------------------------------
   Product widths across the page
-------------------------------------------*/
ul.products li.first {
    width: 12% !important;
}
ul.products li.product {
    width: 12% !important;
}

/* -------------------------------------------
   WooCommerce override styles - End
-------------------------------------------*/

I tried to create a separate style sheet for WooCommerce which would be loaded after the default one, but it didn’t work, so I added the CSS directly to the end of the default style sheet (style.css).