Some themes (and the default WooCommerce CSS) specify product image widths to ensure consistent layouts across multiple devices. The dimensions you specify on the Catalog tab of the WooCommerce settings screen affect the size of the thumbnails that the theme uses when displaying product images. They do not change the size the image is rendered.
Therefore if your settings aren’t appropriate (too small) for your theme, you could encounter image distortion. That may be a little tricky to get your head around, so here’s a graphic to help explain.
To ensure your images aren’t distorted make sure these settings are appropriate for your theme. If you’re using a WooTheme these settings should be updated upon activation. You will just need to run Regenerate Thumbnails to regenerate any previously uploaded thumbnails.
A working example
As a quick demonstration we’ll fix a hypothetical distortion issue using TwentyEleven. But before diving in, there’s a caveat: Make sure that your raw product imagery (the graphics you’re uploading) are of an adequate size. If they’re not, this is a pointless exercise. Anything from 800×800 and up would be appropriate for most themes.
Thumbnail types
In this example we’ll be using the terms ‘Single Thumb’, ‘Catalog Thumb’, and ‘Product Thumb’ as listed in the image settings. These thumbs are used in various areas;
- Single Thumbs are the largest thumbnails and are used on the product details page
- Catalog Thumbs are the medium sized thumbs and are used in all product loops e.g. categories, related products, up sells, cross sells etc
- Product Thumbs are the smallest thumbs, used in product galleries on the single product pages, the cart, and widgets such as featured / recent products
Find out the size your theme renders thumbnails
The first step to fixing any distorted images is to find the dimensions your theme renders each type of thumbnail.
The catalog thumb
To do this, find the place your theme renders catalog thumbnails the largest. In some cases this will simply be on the shop page, in Twenty Eleven however, it is in the related products loop.
If you’re using Chrome you can simply right click the image and select ‘inspect element’. A similar thing can be done in Firefox using Firebug. This will give you the dimensions.
Here we can see the catalog thumbs are rendered (at their largest) in Twenty Eleven at 280x280px. Make a note of this.
The single thumb
Repeat the process for the single thumb (large image on product details page).
It just so happens that in TwentyEleven that largest dimension the single thumb is rendered matches the catalog thumb; 280x280px.
The product thumb
The largest rendering of product thumbs is most likely in the product gallery. Repeat the inspection process to get the dimensions.
In this case, 86x86px.
Input the data and regenerate the thumbnails
Now that we know what size our theme is rendering the thumbnails, we can tell WooCommerce to make sure that all thumbnails created henceforth are of adequate size. (Adequate size being equal to or greater than the dimensions we just gathered from the theme).
In the catalog tab add the dimensions you made a note of and save the settings.
Any new product images uploaded will now have thumbs in accordance to these settings, and will appear without distortion/pixellation on the front-end.
Saving changes does not automatically update all previously uploaded product imagery. To update old images WordPress needs to regenerate the thumbnails. There’s a great plugin which does just that; Regenerate Thumbnails.