This article was last updated on the May 12, 2018.
WooCommerce images are set directly within WooCommerce itself rather than being controlled by the theme, this gives you greater scope in controlling the image size and how they display on the front-end of your site.
Setting The Product Images
To set the image sizes of the Woocommerce products you need to follow the steps below:
1) Go to WordPress Dashboard > Appearance > Customize:
2) In the customizer click on the Woocommerce menu item:
3) Click on the Product Images menu item:
4) Set the desired size for the images there:
You will also have an option to crop the thumbnail images as square, crop them with the custom aspect ratio or keep the thumbnails uncropped.
What size you'll want to set will depend on entirely on how you want them to display on your website and if you have any third party plugins/code that removes/modifies how images are shown.
For example by default both X and Pro use the slider support in WooCommerce, which means your single product page images would look like this:
You can remove the support for the Woocommerce Slider by adding the code below to the functions.php file of your Child Theme:
add_theme_support( 'wc-product-gallery-zoom' );
add_theme_support( 'wc-product-gallery-lightbox' );
add_theme_support( 'wc-product-gallery-slider' );
For more information on how to set up a Child Theme click here.
If you disable the support for the Woocommerce Slider the images will look different and you'll need to modify the sizes. If you remove theme support for the gallery slider, your single product page would then look like this:
Getting the exact image dimensions for your site will take some experimentation and factors will include custom code added, custom CSS, the type of product image (narrow, wide, large, small, etc.) along with a varying combination of other factors.
If you see your product images being blurry read this article for more information.
Finally, for more detailed information about the Woocommerce product images check this article.
Once you've modified the image sizes, you'll need to regenerate thumbnails for the changes to take effect. Luckily there's a range of plugins that can do this for you. Head on over to your wp-admin > plugins > add new in the search box type regenerate thumbnails and then press enter. On the results screen, the first plugin should just be called regenerate thumbnails and has 1+ million active installs.
Go ahead and install the plugin, once the plugin is installed and activated. You'll see a new option called Regen. Thumbnails under the Tools admin menu item.
Click that, and then on the next page, there is just one button to start the regeneration process. It'll go through your images one by one and a progress bar and running total will keep you updated on how close to completion the process is.
Note: Keep in mind that you will need to do this every time after updating your image sizes.