WooCommerce Single Product Gallery
The Single Product Gallery refers to the Featured Image area on the Single Product page. This can be a single image or multiple images which can be cycled through as a slider. There are several features and options that you should know about if you’re setting up an online shop with Avada and WooCommerce.
Notably, WooCommerce 3.0 introduced a new zoom feature for the single product image gallery, and in Avada 5.1.5 we added support for this feature. This will allow your shoppers to get a close up view of your product simply by hovering over the product image on the single product page. See below for more details.
WooCommerce Product Gallery Size
This option controls the width of the single product page image gallery, as you can see in the screenshot below. You’ll find this setting in Avada > Theme Options > WooCommerce > General WooCommerce.
WooCommerce Product Gallery Thumbnails Columns
This setting allows you to choose the number of columns your thumbnails below the product gallery slider will use. You’ll find this setting in Avada > Theme Options > WooCommerce > General WooCommerce.
Important points for this setting and how other settings may affect the appearance of your single product gallery thumbnails:
Product Gallery Sliders
There are two Product Gallery Slider styles to choose from; The default WooCommerce style and the Avada style. See below for details on each of these sliders.
Single Product Gallery Zoom Effect
This effect will allow your shoppers to get a close up view of your product simply by hovering over the product image on the single product page. The Zoom effect will only be available for Avada 5.1.5 or higher with WooCommerce 3.0 or higher. Please check each point below for information on settings and options which will affect the product image zoom feature on your site.
Once the zoom effect is enabled and your image sizes are set correctly, you’ll be able to hover over the product image and it will zoom-in to show more detail. (compare the top example image to the bottom example image which is on hover) The point of focus will follow your mouse cursor. Just move your cursor over the area you would like to see more closely.
How To Adjust WooCommerce Product Image Size Settings
WooCommerce includes settings to change the width of product images for the Main Image and for Thumbnail 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 theme 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 frontend 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.