WooCommerce Variation Swatches And Additional Gallery

Product Gallery

Estimated reading: 3 minutes

IWP Swatches Product Gallery

IWPS comes with many advanced features that you can use to create innovative and attractive product pages.

Follow the below documentation to find out about all the advanced options and learn how to use them.

How to add Additional Images?

With IWPS, you can add additional images into your Product gallery for every variation separately.

How to setup Additional Images?

Follow the below steps to activate this option,

Go to Edit Product
Open Variation Tab
Product must be saved or drafted for variation settings to appear
Open your variable
You will see a image gallery tab under you variation image
Add your gallery images into the tab
Click on save.

Gallery Dimensions Settings

You will need to setup the gallery dimensions for different device sizes in order to complete product page.

How to setup Gallery Dimensions?

Follow the below steps to activate this option,

Go to IWP Swatches > Gallery
Open “Gallery Dimension Settings”
Update General gallery width according to your design and layout.
You can setup mobile/tablet device width’s from here too.

Gallery Designs

With IWPS, You can setup 2 types of product galleries.

Horizontal Gallery
Vertical Gallery

Vertical Gallery

Horizontal Gallery

How to setup Gallery Designs?

Follow the below steps to activate this option,

Go to IWP Swatches > Gallery
Open “Settings Tab”
Go to “Gallery Type”
Choose your preferred gallery design
Click on save settings.

Gallery Slider Controls

With IWPS, You can customise product page’s slider controls. You can change the product image slider and thumbnail slider.

How to setup ?

Follow the below steps to activate this option,

Go to IWP Swatches > Gallery
Open Advanced Tab
Customise slider controls and types according to your requirement
Click on save

You can update sliding animation to a fading animation and also change the speed of the slider from Slider controls.

Gallery Zoom Controls

With IWPS, You can customise product page’s zoom controls. You can change the location of the zoom icon and update the lightbox setup.

How to setup ?

Follow the below steps to activate this option,

Go to IWP Swatches > Gallery
Go to Zoom Controls
Activate/Deactivate Zoom function
Update icon location
Update lightbox Options
Click on Save settings

Gallery Thumbnail Controls

You can customise gallery thumbnail controls with IWPS. follow the below options to setup.

How to setup ?

Follow the below steps to activate this option,

Go to IWP Swatches > Gallery
Go to Gallery Thumbnail Settings

Number of images appearing in gallery

You can choose between 2-8 images to show in the product gallery

Thumbnail Gap

Gallery Thumbnails Gap In Pixel. You can add gap between 0 to 20 px.

Thumbnail Slider

It will allow you to shows gallery thumbnails in a Slider.

Show Thumbnail Slider Arrow

It will allow you to show an arrow in Thumbnail Slider.

There are other settings options available with a description on how to use them in gallery controls section.

Gallery Float Controls

With IWPS, you can customise clear float and gap settings for product page for different screen sizes.

What is clear and float?

The CSS float property specifies how an element should float.

The CSS clear property specifies what elements can float beside the cleared element and on which side.

How to setup clear float controls?

Follow the below steps to activate this option,

Go to IWP Swatches > Gallery
Go to Settings Tab >Float and Gap controls
Customise available options according to your theme design.

You will be able to customise options for computer/laptop devices and mobile/tablet device settings.

It is recommended to activate both options to make product gallery movable with devices.

Product Gallery

IWP Swatches Product Gallery

How to add Additional Images?

Gallery Dimensions Settings

Gallery Designs

Gallery Slider Controls

Gallery Zoom Controls

Gallery Thumbnail Controls

Gallery Float Controls

EASY ACCESS

InnovativeWP

Popular Plugins

Site Links

IWP Sources

Important Links