VARGAL – Additional Variation Gallery for Woo

Support Purchase

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 or videos to the gallery
2. Supports external image/video URL link if EXMAGE is also in use
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

 

 

Add video to product gallery

Important: Make sure VARGAL template is enabled for the product if its gallery contains video, otherwise the video won’t display properly.

 

Follow these two steps to add videos to your variation galleries:

Step 1: ADD VIDEO

1. Go to Products >> go to the Product gallery section
2. Add the video by upload a video in MP4 or WebM format or an external link if EXMAGE plugin is also in use
3. The video will appear as part of that product’s media gallery alongside images.

Tip: You can rearrange the order of media using drag-and-drop.

 

Step 2: EDIT VIDEO THUMB

1. Go to Media >> Find the video file you’ve added (it will be listed like other media items).
2. Click to edit that video file.
3. In the Featured Image section, upload or set a thumbnail.
4. Save changes. This image will now show as the video’s thumbnail in product galleries.

To remove or update the thumbnail later, just go back to the media file and change the featured image.

 

RESULT

 

 

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, make the transition stop upon hovering – optional, 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. Scroll down to see some examples of our supported transition effects, or take a direct look at our demo.

 

 

SLIDE

 

FADE

 

ZOOM

 

ZOOMOUT

 

BUBBLE

 

 

BLUR

 

CIRCLE

 

MASK

 

ROTATEUP

 

ROTATEDOWN

 

SPLIT

 

SPLIT 2

 

SPLIT 3

Navigation

Navigation is the buttons for switching images among the variation gallery. There are options for their position and design. Go to Dashboard >> VARGAL >> Variation Gallery >> Gallery Template >> General.

1. Navigation: Choose your position for showing the image switch icon for the gallery
   • None
   • Center
   • Center left
   • Center right
   • Top
   • Top left
   • Top right
   • Bottom
   • Bottom left
   • Bottom right
2. Navigation design: Choose the style of navigation arrows for your slider. Customize the style and appearance of the navigation arrows on your slider by selecting from different designs and also adjust their color and background for both default and hover states
3. Show Show navigation dot: Enable this option to display small dots near the slider, letting users know how many slides there are and quickly jump between them

 

 

 

 

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

1. Enable: Turn this on to activate the lightbox effect when customers click on an image – it opens the image in a popup overlay without leaving the page
2. Icon: show or hide the icon that indicates the image is clickable
   
3. Icon type: Choose the design of the clickable icon
4. Icon position: Set where the icon appears on the image – Top left, Top right, Bottom left, Bottom right
5. Style: Customize the icon’s appearance using color pickers for the icon color and icon background color
6. Show image name: Enable this if you want to display the image title or image caption inside the lightbox popup
   
7. Allow show image full screen: Enable this to allow users to expand the image to full-screen view when in the lightbox, useful for viewing large or detailed images
   
8. Navigation icon: Icons used for navigating between multiple images (previous/next) inside the lightbox
   
9. Navigation Style: Customize the look of the navigation arrows  shown inside the lightbox using color pickers for default icon color and when hovered

 

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

Enable the “Infinite loop” option to make the slider loop continuously without stopping – once it reaches the last slide, it will return to the first slide and keep cycling through the items smoothly

Note: For the gallery image or displayed thumbnails, make sure all images are the same size

 

 

 

 

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.

 

 

 

External Gallery (EXMAGE)

Compatible with EXMAGE – WordPress Image Links

VARGAL fully supports all external image and video links managed by EXMAGE (e.g. YouTube, Vimeo, or direct image/video URLs). These files, after being added, will appear directly in the Media Library, so you can select them as usual when setting up the product gallery or variation gallery.

 

 

Plugin/Theme	Author	Compatibility
WooCommerce Product Variations Swatches	VillaTheme	Change product image
Bulky	VillaTheme	Add/Remove variation gallery inside Bulky editor
ALD – Aliexpress Dropshipping and Fulfillment for WooCommerce	VillaTheme	Add Gallery for each variation in Import List
ChinaDS – WooCommerce Tmall-Taobao Dropshipping	VillaTheme	Add Gallery for each variation in Import List
HANDMADE – Dropshipping for Etsy and WooCommerce	VillaTheme	Add Gallery for each variation in Import List
TMDS – Dropshipping for TEMU and WooCommerce	VillaTheme	Add Gallery for each variation in Import List
EXMAGE	VillaTheme	Support external media for gallery addition – external image/video links
Flatsome	UX-themes	Quick view. Variable product gallery must have at least one image
Woodmart	xtemos	Disable Show “Click to enlarge” icon inside Woodmart theme if not using VARGAL template
Goya	everthemess	Quick view. Variable product gallery must have at least one image
Divi	Elegant Themes	Woo Product Images module to show product image/gallery only
Dokan	Dokan, Inc.	Edit variation gallery inside Dokan product editor
WPC Smart Quick View	WPClever	The left-side image in the Quick View popup must display as a slider, regardless of the “Images” setting. If the variation has a variation image and VARGAL gallery, show its image and gallery. If it only has a variation image, no VARGAL gallery, and that image exists in the original Quick View list, show the list and scroll to the image; otherwise, just show the image. If there’s no image and no VARGAL gallery, show the initial image list of the Quick View popup

 

 

WooCommerce Product Variations Swatches

When using the “Change product image” option:

• If set to Auto detect variation image, you can assign a gallery for each variation normally. The corresponding gallery will display when customers click on the swatches.
• If set to Change to image set for attribute and you assign a gallery to each attribute. The gallery for the selected attribute will be shown when its swatch is clicked.

 

Attribute gallery inside product page:

 

Gallery for attribute in Global Attribute settings

 

For global attributes, if a gallery is assigned to an attribute inside the product page, it will override the global setting. Product-level galleries take priority.

 

 

Compatibility with Dropshipping Plugins

Add Gallery for each variation in Import List – This compatibility feature allows you to assign a custom image and video gallery to each product variation directly within the Import List section of the dropshipping plugin(s).

Supports the following plugins:

• ALD – AliExpress Dropshipping and Fulfillment for WooCommerce – Documentation
• ChinaDS – WooCommerce Tmall-Taobao Dropshipping – Documentation
• HANDMADE – Dropshipping for Etsy and WooCommerce – Documentation
• TMDS – Dropshipping for TEMU and WooCommerce – Documentation

 

Open the Gallery Settings: Click the gallery icon next to the variation you want to edit in the Import List.

 

Set Up the Gallery: A popup will appear where you can select images or videos for the variation.

• Option 1: Select from Site Media Library. Choose images or videos from your existing media library. Configure them as needed, including setting thumbnails or featured images just like how you add gallery to product variation.
• Option 2: Select from Product’s Gallery Tab. Hit “Click here to choose from the gallery” button to switch to the Gallery tab to view all images imported with that product. Click on any image to select it (multiple selections allowed).

Use “Cancel” to discard or “Apply” to add the selected images to the variation gallery.

 

 

What Happens on Import

All selected galleries will be applied to the respective variations when the product is imported into WooCommerce. Images selected from the product gallery tab will follow the current image download settings in the dropshipping plugin.

Notes: If you enable the “Import as a simple product” or “Import as simple product” option inside the dropship plugin settings, and only import one variation, the gallery you set for that variation will not be applied to the final imported product.

This feature only applies before importing the product. After importing, galleries should be managed using your site’s standard media tools.

 

Set/Update product gallery data

VARGAL stores variation gallery data as an array of attachment IDs under the product meta key vargal_params.

Example:

        $product = wc_get_product( $product_id );
        $product->update_meta_data('vargal_params', [123, 125]);
        $product->save();

Enqueue VARGAL JS on Custom Pages

VARGAL enqueues its frontend scripts automatically on single product pages. If you’re showing product with galleries on custom pages (like quick views, shop loops, etc.) using a plugin/theme that is not on our list of compatible plugins, you must explicitly declare VARGAL’s js for compatibility

Use this filter: vargal-frontend-enqueue

Example:

        add_filter('vargal-frontend-enqueue',function ($result){
            // filter...
            //if (is_shop()){$result = true; }
            return $result;
        },10, 1);

 

Customize gallery item properties

Use the filter vargal_get_attachment_props

Example:

     add_filter('vargal_get_attachment_props',function ($props,$attachment_id){
     			// filter...
     			return $props;
     		},10, 2);

 

Customize HTML output of Gallery items

• Use this filter: woocommerce_single_product_image_thumbnail_html’
  Example:

       add_filter('woocommerce_single_product_image_thumbnail_html',function ($html, $attachment_id){
       			// filter...
       			return $html;
       		},10, 2);

• To display custom attributes in the HTML tags of the gallery, use this filter vargal_filter_allowed_html
  Example:

  		add_filter('vargal_filter_allowed_html',function ($tags){
  			foreach ( $tags as $key => $value ) {
  				if ( in_array( $key, array( 'img', 'video' ) ) ) {
  					$tags[ $key ] = wp_parse_args( [
  						'fetchpriority' => 1,
  						'loading' => 1,
  					],$value);
  				}
  			}
  			return $tags;
  		});

 

Access variation gallery data during variation selection

If you have a custom variation display tool (e.g. with custom swatches or quick view), you can use the vargal value to retrieve the variation gallery each time swatches are changed.

Example:

		
	$(document).on('show_variation', '#your_id.variations_form', function (e, variation, purchasable) {
                let gallery = [];
                if (variation?.image && variation?.image_id) {
                    gallery = [variation.image];
                }
                if (variation?.vargal) {
                    gallery = gallery.concat(variation.vargal);
                }
                // handle your own custom design display or use event 'vargal-gallery-changing' to show selected variation's gallery
                // $(document).trigger('vargal-gallery-changing', [$(this).data('product_id'), gallery, variation]);
        });

 

 

Thank you for your attention!

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