How to Use Product Gallery Slider for WooCommerce

WooCommerce Product Gallery Slider enables you to upgrade your WooCommerce product gallery with sleek sliders, zoom, lightbox, thumbnails, and social sharing—all fully customizable. Boost engagement and showcase your products in style with just a few clicks.

Configurations

↑ Back to top

Go to WooCommerce > Gallery Slider. Here, you will find all the configuration settings for the Gallery Slider plugin to control the behavior of the product image gallery on product pages.

General Settings

↑ Back to top

Go to WooCommerce > Gallery Slider and Click General Settings Tab.

1. Enable Gallery Slider – Enable or disable the custom product gallery slider functionality on product pages.
2. Gallery Layout – Choose the layout for the gallery slider like
   • Horizontal
   • Vertical Left
   • Vertical Right
3. Transition Effect – Select the animation style for transitioning between images.
   • Fade
   • Slide
4. Autoplay – Automatically advance through gallery images without user interaction.
5. Pause on Hover – Pause the autoplay feature when the user hovers over the gallery.
6. Autoplay Speed – Set the duration each image is displayed before moving to the next in autoplay mode. Set value like 1000 milliseconds.
7. Slide Speed – Set the transition speed between individual slides. Set value like 300
   milliseconds.
8. Lazy Load Images – Improve performance by loading images only as they come into view.
9. Filter by – Choose whether to apply the gallery slider to Specific Categories or specific Products.
10. Choose Category or Product – Select the product categories or specific products where the gallery slider should be active.
11. Select User Roles – Restrict gallery slider visibility to specific user roles.

Thumbnail Settings

↑ Back to top

Head to WooCommerce > Gallery Slider > Click Thumbnails Tab

Here, you can control how thumbnail images look and behave on single product pages.

1. Show Thumbnails – Enable or disable thumbnail navigation below or beside the main
   product image.
2. Items Per View – Define how many thumbnails are visible at once in the navigation slider.
3. Thumbnail Size – Set the width and height (in pixels) for each thumbnail.
4. Thumbnail Border – Enable this option to apply a border around each thumbnail image.
5. Thumbnail Border Color – Choose the color of the border applied to inactive thumbnails.
6. Thumbnail Active Border Color – Set the border color for the currently active (selected) thumbnail image.

Arrows Settings

↑ Back to top

Browse to WooCommerce > Gallery Slider and Click Arrows Tab

Customize the navigation arrows for both the main gallery slider and the thumbnail slider here.

1. Enable Arrows – Show or hide navigation arrows on the main product gallery slider.
2. Enable Arrows on Thumbnails – Display arrows for navigating the thumbnail slider (useful when thumbnails exceed the visible area).
3. Arrow Style – Select the visual style of the arrows.
   • Circular
   • Square
4. Arrow Color – Set the default color of the navigation arrows.
5. Arrow Hover Color – Define the arrow color when hovered over by the user.
6. Arrow Background Color – Set the background color behind the navigation arrows.
7. Arrow Background Hover Color – Set the background color of the arrows when hovered.
8. Arrow Size – Specify the size of the arrows in pixels.

Bullets Settings

↑ Back to top

Go to WooCommerce > Gallery Slider > Click Bullets Tab.

Configure the display and style of bullet (dot) navigation indicators for the product gallery slider here.

1. Enable Bullets – Toggle to show or hide bullet navigation indicators beneath the product gallery.
2. Bullet Type – Choose the style of bullet indicators:
   • Dots
   • Numbers
3. Bullet Color – Set the default color for inactive bullets.
4. Active Bullet Color – Define the color of the currently active (selected) bullet.
5. Bullet Size – Set the diameter of the bullets in pixels.
6. Bullet Position – Choose where bullets are displayed in relation to the slider.
   • Bottom
   • Inside
7. Position Spacing – Define the spacing between the bullet group and the edge of the slider container.
8. Bullet Spacing – Set the space between each bullet.

Lightbox Settings

↑ Back to top

Navigate to WooCommerce > Gallery Slider > Click Lightbox Tab.

Personalize the lightbox functionality for product images. When enabled, clicking a product image opens it in a full-screen overlay for better viewing.

1. Enable Lightbox – Enable or disable the lightbox feature for product gallery images.
2. Lightbox Icon Position – Set the position of the lightbox icon overlay on product images.
   • Top Right
   • Top Left
   • Bottom Right
   • Bottom Left
3. Lightbox Background Color – Choose the background color of the lightbox overlay that appears behind the image.
4. Lightbox Icon Color – Set the default color of the lightbox icon.
5. Lightbox Icon Hover Color – Define the color of the lightbox icon when hovered over.

Zoom Settings

↑ Back to top

Browse to WooCommerce > Gallery Slider > Click Zoom Tab.

Here, you can enable and adjust zoom on product images to improve user interaction and detail visibility.

1. Enable Zoom – Toggle to enable or disable the zoom effect on product images.
2. Zoom Type – Choose the style of zoom interaction.
   • Lens
   • Window
   • Inner
3. Zoom Level – Set the magnification level for the zoom, expressed as a percentage.
4. Zoom Box Width – Define the width of the zoom preview box (in pixels).
5. Zoom Box Height – Define the height of the zoom preview box (in pixels).
6. Zoom Box Border Radius – Set the border radius for the zoom box corners (in pixels).
7. Zoom Box Border Width – Set the thickness of the zoom box border (in pixels).

8. Zoom Lens Size – Specify the size of the lens area (in pixels) used in lens-style zoom.
9. Zoom Lens Border Color – Set the border color of the zoom lens.
10. Zoom Lens Shape – Choose the shape of the lens for lens-style zoom.
    • Square
    • Round
11. Disable Zoom on Mobile – Disable the zoom feature for users on mobile devices, improving usability on touch screens.

Social Sharing Settings

↑ Back to top

Access WooCommerce > Gallery Slider > Click Social Sharing Tab.

Here you can enable and configure social media sharing buttons for product pages, making it easy for customers to share products with their networks.

1. Enable Social Sharing – Toggle to enable or disable social sharing buttons on product pages.
2. Share Platforms – Select which social media platforms you want to display for product sharing. Options are Facebook, Twitter, Pinterest, Instagram, WhatsApp.