If your products fit nicely into perfectly square images and they look good as they are in your theme, then you can probably skip this recipe. For some themes or some types of products, though, it's really beneficial to change how WooCommerce crops your images. If you're selling ties, for example, it's probably worth telling WooCommerce to crop them so they're long and skinny.
It's best if you have already created a couple of products and look at them to compare how the Featured Image and the Product Gallery look on their product pages. If you see gaps around the images, you may be able to increase the product image size and take advantage of that space.
Changing image sizes can be done in two parts. The first part will change the settings, and this will affect all future uploads. The second part will install a plugin that will force your website to recrop every image, which will affect all past uploads. Let's have a look at the following steps that depict these two parts:
- From the WordPress admin, go to WooCommerce | Settings.
- Click on the Products tab.
- Click on the Display tab and then scroll down to Product Image Sizes.
- Enter your new sizes.
- Catalog Images controls the size on the shop page and category pages.
- Single Product Image controls the size of the featured image on the product page.
- Product Thumbnails controls the size of the gallery thumbnails on the product page.
- When you're done, click on the Save changes button at the bottom of the page.
Now that you have the new images set, any future uploads will use those settings. We'll have to install a free plugin to resize all of the existing images. Let's have a look at the following steps that illustrate the step-by-step installation of this plugin:
- Add a new plugin under Plugins | Add New.
- Run a search for, and install and activate, the Regenerate Thumbnails plugin.
- Click on Tools | Regen. Thumbnails.
- Click on Regenerate All Thumbnails and wait for your site to process all of the images.
You should now be able to go back to any of your product pages and see the new image size. In my case, I made the main featured image tall and skinny by setting Single Product Image to 150 x 300.
We are now done with changing the image sizes for your products.
Tip
You might be able to see a little bit of distortion in my image. That's because I uploaded an image that's too small. WooCommerce blew it up to fit the dimensions I specified. If you don't want to have blurry images, the best piece of advice is to upload high-quality large images. You can also follow this video tutorial at http://docs.woothemes.com/document/using-the-appropriate-product-image-dimensions/. If you want to learn more about the different ways you can crop images and what the different types of cropping are, there is a great article on WPExplorer at http://www.wpexplorer.com/wordpress-image-crop-sizes/.