[WooCommerce] Changing Product Image Size

Evey online shop has different image size setting for their products. A fashion online shop might want to have portrait orientation size. WooCommerce allows you to set product images size right from the settings page. However a manual "regeneration" action is required after you made changes to the image sizes.

Changing image size

Navigate to WooCommerce > Settings > Products > Display, you would find a section called "Product Images". There are 3 options there:

  • Catalog Images: used in main shop and archive page.
  • Single Product Image: used in single product image, the big product image.
  • Product Thumbnails: used in additional product images thumbnail.

You can set the height to blank or zero (0) which means you allow dynamic height size of your product images, WordPress won't crop your image and keep the size ratio. And the "hard crop" option lets you choose between to crop your uploaded images precisely to the specified size, but it's recommended to have this option enabled to get you consistent image size after automatically cropped by WordPress.

Regenerate image size

After changing the image size on the settings page, it's required that you run this action. Otherwise, your previous uploaded images won't have the new image sizes. To do so, please install the Regenerate Thumbnails plugin first. After activated, please navigate to Tools > Regenerate Thumbnails, and run the process by clicking the "Regenerate" button.