How To Adjust WooCommerce Product Image Size Settings

Last Update: July 23, 2024

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 image sizes and save it, you must regenerate thumbnails using the Regenerate Thumbnails plugin. Install the Regenerate Thumbnails plugin 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

  • To setup Single Product Gallery Zoom effect, you’ll need to be sure it’s enabled in Avada > Options > WooCommerce > General WooCommerce; WooCommerce Product Gallery Zoom
  • WooCommerce Product Gallery Size –
    Your Single Product Image size will need to be larger than your setting for WooCommerce Product Gallery Size in Avada > Options > WooCommerce > General WooCommerce. That setting will determine the width of the single product gallery’s container column. Once you’ve set that as needed, you’ll be ready to set your WooCommerce single product Image size.

  • WooCommerce Single Product Image Size – The WooCommerce Single Product Image size setting will control the actual size of the image used in the gallery. The larger your image size is set to, the stronger and more detailed your zoom effect will be. Note: If your image size in WooCommerce settings are equal to your WooCommerce Product Gallery Size in Avada’s global options, no zoom will be noticed on hover. Additionally, the size of the actual image you upload, will need to be as large or larger than your Single Product Image size setting.

  • Regenerate Thumbnails – After making changes to the WooCommerce Image sizes, be sure to regenerate your thumbnails. Doing so will apply your changed image sizes to images already uploaded on your site. You can use this plugin: Regenerate Thumbnails

In this article