WooCommerce and image sizes

WooCommerce is possibly the most commonly used shopping cart used with WordPress, it’s a free plugin. The way the items and catalogs display is determined by the particular WordPress theme that the site is using. Each theme will determine the sizes of various thumbnails and images throughout the WooCommerce pages.

It’s not automatic when you install WooCommerce that the image and thumbnail sizes used by the theme will be correctly produced by WooCommerce.  This is documented by WooCommerce here.  If you have set the sizes you want in WooCommerce, and regenerated the thumbnails as explained below, you also need to modify your theme to display the images at those sizes.  More commonly though, the problem is that the theme doesn’t need to be changed but WooCommerce is not saving the images at the correct sizes to match the theme.

In your admin menu, WooCommerce -> Settings -> Products there are some thumbnail sizes you can set. These must agree with the thumbnail sizes used by your theme. It would be extra smart if the theme could set these via a hook, and the WooCommerce documentation explains how to do this, but we haven’t seen a theme that uses it, and that includes themes by WooThemes, the same company that produces WooCommerce.

If you don’t match the thumbnail sizes with the theme’s requirements, the images will appear blurry, because they will be displayed at a different size than the size of the image file – the browser will resize the image dynamically. This is particularly bad if the image is displayed at a larger size than the image file dimensions.

To fix the problem, you need to discover what size the theme is displaying the various thumbnails at. This is easily done with Chrome’s developer tools or Firefox’s Firebug. If you inspect the thumbnails, the debugger will show you the size on screen, and from the filename, you can see the size at which WooCommerce has saved the image. If these disagree, you need to change WooCommerce’s thumbnail sizes. You can find these at Woocommerce -> settings -> products -> scroll down to see three thumbnail image sizes. Adjust these to agree with the size your theme is displaying each thumbnail at. To work out which thumbnail matches which, look at the filename in the debugger (as the image is displayed on the front-end). The suffix to the filename is the thumbnail size. That will match one of the sizes in the Woocommerce settings. Adjust the settings so the size matches the actual display size used by the theme.

You also need to note the largest dimensions used, and make sure when you upload images they are at least this large. Otherwise the larger thumbnails will be blurry, even though you have matched the sizes with the theme.

This will cause new image uploads to be stored in the right dimensions. However you need to re-size any existing product images – images that you already uploaded. For this we use a plug-in called “Regenerate Thumbnails” which so far has done the job perfectly for us. Install this plugin, and then run it from The Tools admin menu item. You don’t need to run it again later after uploading new images – only run it at the time you change the Woocommerce thumbnail sizes.