VARGAL – Additional Variation Gallery for Woo


Created: 04/2025

Latest update: 04/2025 – Updated version: 1.0.0

By VillaTheme Thank you for using our plugin. If you have any questions that are beyond the scope of this documentation, please feel free to request support at our Support Forum.

Thanks so much!    

System Requires:

Make sure that those limits are to a minimum as follows for free-trouble while installing:

  • WordPress 5.0 or higher
  • Woocommerce 7.0 or higher 
  • PHP Version 7.0 or higher

 

Install the plugin: 

Go to Dashboard >> Plugins >> Add Plugin >> Upload the zip file vargal-additional-variation-gallery-for-woo.zip downloaded from this official source

Or search the key word: VARGAL – Additional Variation Gallery for Woo

 

 

By default, WooCommerce allows inserting only one photo per product variation. Additional variation gallery for WooCommerce is a feature that allows store owners to display a custom set of images for each product variation – such as different colors, sizes, or styles. Instead of showing just one image per variation, it creates a full image gallery tailored to each option a customer selects.

Introducing VARGAL – an essential solution for stores where visuals play a key role – fashion, beauty, furniture, electronics, and more. It is a powerful and customizable plugin that brings all the essential features of an additional variation gallery – and more – to your WooCommerce store. With VARGAL, you can:

  • Upload and display multiple images/videos for each variation
  • Enable image zoom on hover and lightbox viewing, choose transition effects (fade, slide, zoom) and enable autoplay
  • Show thumbnails of the gallery with advanced layout options (spacing, position, hover swap)
  • Include/Exclude the main product image and/or default gallery in variation galleries
  • Customize loading icons; migrate from other gallery plugins with ease; …

Whether you’re upgrading your image display or starting fresh, VARGAL gives you full control over how your product variations look – helping customers make faster, more confident buying decisions.

See this tutorial or read the instruction below for how to use VARGAL

 

 

 

 

 

 

Add variation gallery

When you add variation gallery from admin dashboard

  1. You can add images and video to the gallery
  2. With video: it must be MP4 or WebM file
  3. Drag, drop items inside the gallery to change their position on front end
  4. Select multiple items and add them all at once

 

See the steps as follows:

  • From your WordPress dashboard, go to Products, then edit a variable product.
  • In the Product data panel, open the Variations tab.
  • Each variation includes its own Variation Gallery section:
    • Click “Variation Gallery” to expand it
    • Upload additional images using “Click here to upload your file”

 

 

Add multiple items at once. For video, make sure it’s MP4 or WebM file.

 

 

Drag and Drop medias to change their position on front end:

 

 

Add a thumbnail for the video: Go to Media >> Library. Go to editing page of the video file you want to add a thumbnail, and add a “Featured image” as following:

 

 

These variation galleries will appear on the front end as shown below.

 

Now, configure how the gallery appears on the front end through the plugin settings

 

 

VARGAL Settings – General

Go to Dashboard >> VARGAL >> Variation Gallery. Under General settings, manage how the gallery behaves when images are loading

  1. Enable: Turn on to use the entire plugin features
  2. Loading icon: Choose the style and adjust color for the icon. See the changes in the Preview section right under Style and Color options
    • Style: Choose from various animated loaders
      • Default
      • Dual Ring
      • Animation Facebook 1
      • Animation Facebook 2
      • Ring
      • Roller
      • Loader Balls 1
      • Loader Balls 2
      • Loader Balls 3
      • Ripple
      • Spinner
    • Color: Pick a custom color for the loading icon using the color picker

 

 

Image Zoom on Hover

Go to Dashboard >> VARGAL >> Variation Gallery >> Gallery Template >> General. Enable the “Image zoom” option

 

 

Autoplay

Go to Dashboard >> VARGAL >> Variation Gallery >> Gallery Template >> General. Enable the “Auto play” option and adjust the Speed – Set how fast the gallery transitions (in seconds)

 

 

Image Transition

Go to Dashboard >> VARGAL >> Variation Gallery >> Gallery Template >> General. Enable the “Image zoom” option

 

SLIDE

 

FADE

 

ZOOM

 

 

Navigation

Go to Dashboard >> VARGAL >> Variation Gallery >> Gallery Template >> General. Choose your “Navigation” option for showing the image switch icon for the gallery – None, center, top, bottom

 

 

 

Product Image

Go to Dashboard >> VARGAL >> Variation Gallery >> Gallery Template >> General. Enable the “Product Image” to display the main product image in the variation gallery.

 

 

 

Default Gallery

Go to Dashboard >> VARGAL >> Variation Gallery >> Gallery Template >> General. Enable the “Default Gallery” option to display the default gallery along with variation gallery

 

 

 

Lightbox

Go to Dashboard >> VARGAL >> Variation Gallery >> Gallery Template >> Lightbox.

Enable a lightbox feature to let customers view gallery images in a popup modal. This enhances the browsing experience by allowing larger image previews with a simple click.

 

 

Thumbnail Position

Go to Dashboard >> VARGAL >> Variation Gallery >> Gallery Template >> Thumbnails. Choose where thumbnails appear on desktop and mobile using “Position”

 

BOTTOM

 

RIGHT

NONE

 

LEFT

 

TOP

 

 

Swap images on hover

Go to Dashboard >> VARGAL >> Variation Gallery >> Gallery Template >> Thumbnails. Enable “Swap images on hover” to instantly switch an image on hover the thumbnail, without needing to click.

 

 

 

Thumbnail slider

Go to Dashboard >> VARGAL >> Variation Gallery >> Gallery Template >> Thumbnails. Enable “Display as slide” option to show thumbnails in a horizontal or vertical slider, depending on the Position

 

 

 

Migrate Gallery

This feature lets you convert existing variation galleries created by your other plugins into VARGAL gallery – without needing to reset each variation manually. Go to Dashboard >> VARGAL >> Migrate Gallery

Step 1: Select the source plugin from the Variation Gallery Source dropdown.

Step 2: Click the Migrate button to begin the conversion.

And simply wait for the process to complete

That’s it! Your galleries are now using VARGAL.

 

 

 

Plugin/Theme Compatibility
Flatsome Fully compatible
Woodmart Disable Show “Click to enlarge” icon inside Woodmart theme if not using VARGAL template
Goya Fully compatible
Divi Woo Product Images module to show product image/gallery only
WooCommerce Product Variations Swatches Auto detect variation image
Bulky Add/Remove variation gallery inside Bulky editor
Dokan Edit variation gallery inside Dokan product editor

Extra Information


Thank you for your attention!

If you have any question, please create a topic at our FORUM, we will support within 24 hours.