The Variation Image Gallery module in ShopBuilder enables you to add an unlimited number of images for each product’s variations. This module offers an extensive editing range, along with a straightforward custom sorting option. It comes with thumbnail carousel option, zoom option, and YouTube/Vimeo/ own video support.
1. General #
To configure Variation Gallery for WooCommerce, navigate to the WordPress admin menu ShopBuilder =>Settings =>Variation Gallery => General
1.1) Enable Variation Gallery Module?: Toggle this button to activate the module.
1.2) Zoom Gallery Image: Activate this option to enable the gallery image feature.
1.3) Enable Image LightBox: Switch on this option to activate the image lightbox option.
1.4) Zoom Button Position: Configure the zoom button position. You can choose from “Top Right”, “Top Left”, “Bottom Right”, or “Bottom Left”.
1.5) Thumbnails Items Per Row/Slider View: Adjust the product thumbnail Item Image. The default value is: 4, and the limit is: 2-8. This field is required for the slider.
1.6) Thumbnails Gap: Determine the product thumbnails gap in pixels. The default value is: 0, and the limit is: 0-50.
1.7) Gallery Style: Determine the gallery style. You can choose from “Thumbnail Position Bottom”, “Thumbnail Position Left”, “Thumbnail Position Right”, or “Grid View Images”.
1.8) Main Image Middle Position: Enable this option if required. The main image area will align vertically in the center if the inner content is shorter than the adjacent content.
1.9) Main Image Transition Effect: Choose the main image transition effect from ‘Slide’ or ‘Fade’.
1.10) Thumbnail Image Section Width: Determine the product thumbnails section width in pixels.
1.11) Slider Height/Image Section Height: Fix the product thumbnails and the main image section height in pixels.
Now, click on the “Save Changes” button to save the updates.
2. Styles #
Now, click on the Styles tab.
2.1) Main Image Border Color: Set the main image border color.
2.2) Thumbnail Item Border Color: Determine the thumbnail item border color.
2.3) Thumbnail Item Inner Padding: Adjust the inner padding of the thumbnail item.
2.4) Thumbnail Item Border Radius: Fix the border radius of the thumbnail item.
Now, click on the “Save Changes” button to save the updates.
Add New Attributes #
Navigate to the WordPress admin menu, Products =>Attributes.
– Firstly, insert the name of the attributes. After that, click on the “Add Attribute” button.
– Secondly, click on the “Configure Terms”.
– Now, add the terms of those particular attributes one by one. For example, we’ve added color as an attribute. So, we’ve inserted different color names.
Variation Gallery Settings on Edit Product Page #
Now, navigate to the WordPress admin menu, Products => All Products. Select your preferred products to add to the variation gallery.
In the Product data section, choose the “Variable Product” option from the dropdown.
After that, move to the ‘Attribute’ section. To include the existing attributes, click on the “Add Existing” section. From the drop-down, you can pick your chosen attributes.
You’ll also get the freedom to add new attributes.
1) Firstly, click on the “Add New” button.
2) Set the attribute name.
3) In the value section, enter options for customers to choose from, for example, ‘Blue’ or ‘Large’. Enter | to separate different options.
Lastly, click on the “Save Attributes” button to save the updates.
Now, move to the ‘Variations’ section. You’ll notice two options: 1.“Add Manually” and 2.“Generate Variations”.
1) Add Variations Manually
In this part, you can either select the “Add Manually” or “Generate Variations” option. After setting up the variations, you can freely edit or remove each item. Also, you can perform bulk actions to ease the setup process.
2) Generate Variations
After selecting the “Generate Variations” option, all the variations will be automatically generated.
Here, you can regenerate variations or add variations manually. After setting up the variations, you can freely edit or remove each item. Also, you can perform bulk actions to ease the setup process.
Add Images/Videos in the Variations #
Add Images
Go to the Edit mode of a variable product. Then, click to open, you will find a button “Add Gallery Images”. Click this button to add additional images for the variation.
Also, set the price and complete other information related to the variations.
Note: Variations (and their attributes) that do not have prices will not be shown in your store.
Add Videos
Just like images, you can add YouTube/Vimeo or your own videos in variations.
After clicking on the “Add Gallery Image”, you’ll be redirected to the “Media Library”. Here, you need to click on the preferred image. And on the left side, you’ll notice the “Variation Gallery Video” section.
Now, you need to insert the YouTube video link/ embedded link, Vimeo link. You can also upload a video from here. Customize the width and height of the video.
See the process of copying the embedded link from YouTube.
Video added to “Variation Gallery Image”.
Front End View of Variation Gallery #
In the front end, users can select different combinations and see the variations gallery with a video option.
