Gallery Slider Suite Pro can replace the standard WooCommerce product page gallery with its own slider: swipe, arrows, a thumbnail strip, hover zoom and the lightbox, and it follows the images of the variation a shopper picks. This guide covers each setting and how to prepare variable products.
What You’ll Learn
- What you need before you start
- The four product gallery settings
- How to add images to each variation
- How to turn the slider off for one product
Before You Start
- WooCommerce is active.
- Products is ticked under Post Types on the Settings tab (see Enabling sliders on custom post types and WooCommerce Products). If it is not, the WooCommerce tab says so and links to Settings.
- The product has a product image and at least one image in its Product gallery.
The Product Gallery Settings
Open Gallery Slider > WooCommerce:
- Gallery Slider – replaces the product page gallery with the slider (on by default): swipe, arrows, dots and keyboard navigation.
- Hover Zoom – zooms into the part of the image under the mouse pointer. It works with a mouse only; on touch screens shoppers open the lightbox instead. Clicking an image opens the lightbox in the mode chosen on the Settings tab.
- Thumbnails – a strip of small images below the main image; clicking one shows it.
- Variation Galleries – an explanation of how variation images work (below).
The transition effect (slide or fade), its speed and autoplay come from the Appearance and Behavior tabs, so the product gallery matches your other sliders.
Images for Each Variation
For a variable product (for example a T-shirt in several colors), open the product, go to Product data > Variations, and add images to each variation. When a shopper chooses a variation, the slider, zoom and lightbox switch to that variation’s images, and switch back when the choice is cleared.
Adding several images to a variation needs WooCommerce 10.8 or newer. On older versions only the main image changes when a variation is picked.
Turning It Off for One Product
On the product edit screen, untick Enable gallery slider in the Gallery Slider Options box. That product keeps the standard WooCommerce gallery; every other product keeps the slider.
The WooCommerce product gallery slider is available in Gallery Slider Suite Pro.