3. Define WooCommerce Image Sizes

WooCommerce includes settings to change the size of product images for Catalog, Single Product and Thumbnail Images. When you install the theme, each of those settings will be set to the recommended sizes. If your product images are smaller than the set image sizes, then you may see some visual layout issues on the front-end shop pages. This is not a bug, it is simply a correlation between the set image sizes and your product images. It is preferred to upload larger product images to match our recommended image sizes in the WooCommerce settings. However, if this is not possible, you can fix it by changing the WooCommerce image sizes to match your product image sizes and then regenerating thumbnails using the Regenerate Thumbnails plugin. This is important to have a consistent design or layout. Please see the steps below for how to change the WooCommerce image size.

 

Recommend Product Image Size

 

Step 1 – Go to Appearance > Customize > WooCommerce > Product Images.

Step 2 – Change the size of Main Image to 600×600, Thumbnail to 480×480.

Step 3 – Click Publish.

 

 

 

Note: If you want to change the size of product images when you finished importing demo content or entering your data, please see the steps below:

Step 1 – Go to Appearance > Customize > WooCommerce > Product Images.

Step 2 – Change the size of Main Image to 600×600, Thumbnail to 480×480.

Step 3 – Click Publish.

Step 4 – Install the Regenerate Thumbnails plugin. Read our How to Install a plugin article to learn how to install a plugin.

Step 5 – Go to Tools > Regen. Thumbnails.

Step 6 – Click Regenerate All Thumbnails.

14