WooCommerce: fixing distorted / blurry product images

The image in this post may be a familiar sight. Image quality seems to be a recurring problem for many WooCommerce users who mis-understand the image dimension settings on the catalog tab of the WooCommerce settings screen. Or at least mis-understand how it will work with their theme.

Most people seem to expect this setting to be rendered on the frontend regardless (which I concede isn’t an unrealistic expectation). However that’s not always the case. In many of our themes for example we force the images in product loops to be 100% the width of their container (ul.products li.product) – this is mainly for responsive design purposes but also to cure a pesky IE8 bug. Therefore, if you’ve set your image dimensions in WooCommerce to be 100×100, but your theme renders products in the loop at 200×200 you’re going to see blurry images as they are stretched to twice the size.

TL;DR – make sure the image dimensions you specify in WooCommerce are appropriate to your theme. I wrote a more detailed guide with a working example for the WooCommerce Documentation.