WooCommerce Single Product Gallery

WooCommerce Single Product Gallery

16/05/2018

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. 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.

Sections Overview

    • WooCommerce Product Gallery Size - The WooCommerce Product Gallery Size setting is available in Avada 5.1.5 or higher. This allows you to set a custom width for the product image area on your single product page.
    • WooCommerce Product Gallery Thumbnails Columns - This covers details on the WooCommerce Product Gallery Thumbnails Columns setting in Avada Theme Options.
    • Avada's WooCommerce Product Gallery Slider This is the Avada style product image gallery slider. When this is active, the product gallery will have the Avada lightbox as well as some other Avada specific gallery functionality. More details on this below.
    • Single Product Gallery Zoom Effect - The Zoom effect is available in Avada 5.1.5 or higher, with WooCommerce 3.2 or higher. The zoom effect will allow users to mouse over your product image to automatically zoom in and get a closer look. More details on this below.
    • How To Adjust WooCommerce Product Image Size Settings This covers how to adjust your various image sizes in WooCommerce.
    • Special Notes - This section covers specific points on image sizes for the Zoom effect and the Thumbnails image size.

    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

    WP Admin > 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.

    • Avada's WooCommerce Product Gallery Slider - When using the Avada style Gallery Slider, the Product Gallery Thumbnails Columns setting will control the max number of visible thumbnail images at one time in the row. Additional images will be scrollable through the thumbnail carousel as seen in this section's example image.
    • Default WooCommerce Product Gallery Slider - When Avada's WooCommerce Product Gallery Slider is disabled, the default WooCommerce slider will be used. The Product Gallery Thumbnails Columns setting will control the max number of thumbnail columns as it does for the Avada slider. The difference is any remaining images will break down to a new row since WooCommerce default doesn't use a carousel for the thumbnails. This can be seen here.
    • Choosing Thumbnail Image Sizes - In order to avoid blurry thumbnails, make sure the Product Thumbnails size setting in WooCommerce Settings is large enough. It has to be at least the number in your WooCommerce Product Gallery Size setting divided by this number of columns. These sizes are in pixels. You can find more details on setting the image sizes in WooCommerce here.

    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.

    • Avada's WooCommerce Product Gallery Slider When Avada's WooCommerce Product Gallery Slider is enabled, clicking anywhere on the image will open your product gallery in the Avada Lightbox gallery which looks like this. In the Lightbox, you'll be able to scroll through each image in the gallery. The Avada lightbox has an array of theme options for changing the lightbox style and color scheme. For more information on the Avada Lightbox, see our post here.
    • Default WooCommerce Product Gallery Slider The default WooCommerce product gallery slider will be used if Avada's is disabled. The WooCommerce default slider will use the default WooCommerce lightbox. To launch the image in the WooCommerce Lightbox, you'll need to click the zoom icon in the top right corner. The WooCommerce Lightbox will look like this. If the image is larger than what is currently being viewed, you can click to zoom-in while in the WooCommerce Lightbox gallery mode. (eg. If you have a 1000px wide image and the whole image is already in view, there will be no additional zoom ability. However, if you have a 2000px wide image and only 1000px width is showing, you can click to zoom-in further.) When zoomed-in, you can click and drag your mouse cursor over the image to change the point of focus.

    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.

    • WooCommerce Product Gallery Zoom - You can enable/disable this feature in WP Admin > Avada > Theme Options > WooCommerce > General WooCommerce; WooCommerce Product Gallery Zoom
    • WooCommerce Product Gallery Size - This option will allow you to set the width of the actual product image container on the single product page. You can set this in WP Admin > Avada > Theme Options > WooCommerce > General WooCommerce. Your setting here will determine the image width needed for your products. It's important to set this as desired, then configure your WooCommerce product image settings accordingly. This will default to 500px.
    • Image Size Requirements - In order for the zoom effect to work correctly, your single product image size will need to be larger in width than the WooCommerce Product Gallery Size setting of the above section.
    • Strength of Zoom - The larger your image is than the Product Gallery Size, the more zoom you'll notice on hover. (eg. With the WooCommerce Product Gallery Size set to 500px, a 1000px image width would yield a closer more detailed zoom effect). We have a detailed guide for configuring your image sizes in WooCommerce here.

    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.

    IMPORTANT NOTE: Your catalog image size and single product image size need to be large enough to fit the size column you want to use. For example, if you want to use a shortcode in a one-half column, then you should have a Catalog Image size of at least half your site width as set in WP Admin > Avada > Theme Options > Layout; Site Width.
    Additionally, since the WooCommerce 3.0 zoom effect was added, your Single Product Image size requires special consideration for the zoom effect to be noticeable. You'll find this section below the image size instructions, or click here to skip to our special notes on Single Product Image size requirements and the zoom effect.

    How To Adjust WooCommerce Product Image Size Settings

    WooCommerce includes settings to change the size of product images for Catalog images, Single Product images and 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.

    • Step 1 - Click on the 'WooCommerce' tab on your admin sidebar, and select the 'Settings' tab.
    • Step 2 - Click on the 'Products' tab at the top of the page. Directly below those menu tabs, switch to the 'Display' tab.
    • Step 3 - Under the 'Product Images' section, you will find the Catalog Images, Single Product Images, and Product Thumbnails options.
    • Step 4 - Catalog Image is for your images on the shop page and for shortcodes. Single Product Image is for your images on the single product pages. Product Thumbnail is for your smaller product images used in widgets and the thumbnail gallery below the Single Product Gallery Slider. Enter your desired width and height value. (Note: The height value can be left blank if you want your image height to be 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 3 various 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

    • To setup Single Product Gallery Zoom effect, you'll need to be sure it's enabled in WP Admin > Avada > Theme 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 WP Admin > Avada > Theme 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 theme 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.

    Recent Posts

    Recent Tweets

    For privacy reasons Twitter needs your permission to be loaded. For more details, please see our Privacy Policy.
    I Accept