How To Adjust WooCommerce Product Image Size Settings

Last Update: October 16, 2023

How To Adjust WooCommerce Product Image Size Settings

WooCommerce includes settings to change the size of product images for Catalog images and Single Product images. There are specific Avada settings which work in conjunction with your WooCommerce images sizes. When configuring these image size settings, it’s important to take into account the Avada global option settings as well. We’ll touch on each of these settings in detail below.

Note: If the images you’re uploading for your products are smaller at the source than the image sizes set in your WooCommerce settings, you may see some visual layout discrepancies on the front-end of the shop pages. This is not a bug. It is simply because your images were too small for WooCommerce settings to affect them. You can think of these settings as a max width and height for your images. Anything below the limit will not be resized.

While setting up your shop, be sure the WooCommerce image size settings and the actual size of your images are considered. In summary, your images should be equal to or larger than your WooCommerce image size settings

After any changes to your image size settings, you’ll need to regenerate your thumbnails for it to affect images already uploaded to your site. We recommend using the Regenerate Thumbnails plugin. Please see the steps below for details on changing WooCommerce image sizes.

  • Step 1 – Click on the ‘Appearance’ tab on your admin sidebar, and select the ‘Customize’ tab.

  • Step 2 – Click on the ‘WooCommerce’ tab of the page.

  • Step 3 – Under the ‘Product Images’ tab, you will find the Images setting for Single Product Images.

  • Step 4 – Main image width option is for your images on the single product pages. Thumbnail width is for your products in catalog. Enter your desired width value. (Note: Your image height is automatically scaled with the image’s aspect ratio.) If you’re using the Single Product Gallery Image zoom effect, the Special Notes section below for details on image sizes and setup.

  • Step 5 – When you make changes to the images sizes and save it, you will need to regenerate thumbnails using the Regenerate Thumbnails plugin. Install the Regenerate Thumbnails plugin and go to the WP Admin > Tools tab, and choose to regenerate your image thumbnails so the new image sizes will be created.

Special Notes on the Zoom Effect

In this article