WooCommerce Variation Swatches And Additional Gallery

IWPS Advanced

Estimated reading: 10 minutes

Advanced Features Setup

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.

To work properly, you must activate plugin with your purchase code.

Sharable Links

IWPS allows you to create Sharable Links. If you run product campaigns then sharable links can improve your marketing customisations in many ways.

How Sharable Links works?

Sharable Links will allow your WooCommerce store to create a URL specific for a particular variation.

When a buyer clicks on any attribute, IWPS will add a tag related to that attribute in URL. You can use any combination of attributes to create URL.

How to setup Sharable Links?

Follow the below steps to activate this option,

Go to IWP Swatches > Swatches
Open Product Page Tab
Inside Link Settings > Activate Sharable Links / Variable URLs
Click on save settings.

Variation Limiter

If you have products with high number of variations then you must need a limiter. Showcasing a high number of swatches on shop page for every product may cause design breakdown.

How Variation Limiter works?

IWPS Limiter will limit the visible variations on your WooCommerce shop pages. You can set a fix number to which variations can be showcased.

Whenever product reaches that number, It will start showing a text “Reveal all variations” or “+x variations”.

What you can do with Limiter text?

You can choose between 2 actions,

Use limiter text to reveal all variations
Use limiter text to open the product

How to setup Variation Limiter?

Follow the below steps to activate this option,

Go to IWP Swatches > Swatches
Open IWPS Advanced Tab
Activate “One Variation Feature”
Add your preferred “Attribute display limit”
Add your preferred “Limiter link working”
Click on save settings.

Product Gallery Videos

If you want to add an introductory video to your product page then you can do such customisation with IWPS.

IWPS Allows you to add hosted videos in your product galleries.

How add videos in gallery?

IWPS does not add any custom windows or any page in your WooCommerce edit product area.

You will need to attach a video to an image, in order to make it take place of the image.

What you can do with Videos?

You have only 1 option,

Add videos to the product page.
Videos cannot be added to the archives page.

How to setup videos?

Follow the below steps to activate this option,

Go to Products
Click on Edit Products
Click on Add product gallery images

Choose any product image to show as a video thumbnail
After you choose an image you will find a Add video tab at the bottom of the image settings.

Attach your video and you are done.
You can also add custom dimensions separately for every product.

Easy Variations Control

Easy variation control allows you to update product gallery without selecting all the variation swatches.

For example, if you have a clothing product with attributes (Color and Size). Your customer will need to choose a specific color and a size to update the gallery images.

Product gallery will not be updated unless both swatches are chosen.

How Easy Variation Control works?

With IWPS, you can customise such condition for both ways. If you want your product to update product gallery by choosing any one variation or by choosing all variations.

You can update gallery by choosing only color variable
You can update gallery by choosing color and size.

How to setup Easy Variation Control?

Follow the below steps to activate this option,

Go to IWP Swatches > Swatches
Open IWPS Advanced Tab
Activate “Easy Variation Feature”
Add your preferred “Attribute”
Customise options for shop page
Click on save settings.

We recommend using First Attribute for easy variations. It will update the product gallery with the first appearing variation.

For example – Colors is the first appearing variation in the demo image.

Shop Page Variation Visibility

If your product has multiple types of variations and you only want to showcase any one of them into your shop page, You can control such options with IWPS.

It allows you to choose which variation should be visible on the archives page.

How Shop Page Variation Visibility works?

For global settings, you can choose what attribute type should be used to display in shop pages.

You can use this global settings if all your products have a same attribute type that you want to use in shop page.

Otherwise you can choose this option separately for every product too.

How to setup Shop Page Variation Visibility?

Follow the below steps to activate this option Globally,

Go to IWP Swatches > Swatches
Open IWPS Advanced Tab
Activate “One Variation Feature”
Add your preferred “Attribute”
Note – First attribute is the variable that appears first in the product page.
Click on save settings.

Follow the below steps to activate this option Seaprately,

Go to Products > Open your product > Edit Product
Open Swatches settings
Update Catalog mode
Update single variation image preview
Click on save settings.

Custom Swatches Dimensions

Custom swatches dimension allows you to change dimensions of a specific group of variable.

If your store has n number of variables and you want to give a custom dimensions to a specific type of variation and let other variations be normal sized, you can do this with Custom Swatches Dimension.

How Custom Swatches Dimension works?

With IWPS, you can have same dimensions of swatches across store but custom swatches dimension will help you change any of specific group’s dimensions.

How to setup Custom Swatches Dimension?

Follow the below steps to activate this option,

Go to IWP Swatches > Swatches
Open IWPS Advanced Tab
Activate “Custom Swatches Dimension”
Add your preferred “Attribute”
Customise dimension
Click on save settings.

Note – Your default dimension settings for other variations will not be affected. You can customise them from designing tab as we learned from variation swatches doc.

Device Responsive Setup

If your WooCommerce store targets mobile and tablet users, you need to make your product pages compatible with all devices.

For example, hovering actions can be convenient on computer or laptop devices but not with mobile devices.

IWPS helps you make your product page compatible with all device sizes.

How Device Responsive Setup works?

With IWPS, You can setup gallery dimensions based on screen sizes.

You can choose gallery width according to your design.

How to setup Device Responsive Setup?

Follow the below steps to activate this option,

Go to IWP Swatches > Gallery
Open Gallery Dimensions
Customise Product Gallery Dimensions
Click on save settings.

General Gallery Width should be valued between 10 to 100%.

You can leave computer’s gallery width with default settings unless your design is not compatible with settings.

Default settings are recommended But you can tweak mobile and tablet dimensions as per your design.

Price Range Convertor

Default WooCommerce display prices into a range format for variable products. It may become a bit confusing for your customers if they cannot view the exact product prices.

How Price Range Convertor works?

IWPS adds a price range convertor to your product pages. It allows to show the exact price of the variable products.

It updates the price range into a exact price as buyer chooses a variation.

If you want to remove the range format completely then you will need to assign a default selected variation from the settings.

How to setup Price Range Convertor?

It is active by default. You don’t need to do customise any settings to make this work.

If you want to disable this feature, you will need to add some custom code to your store.

How to default select a variation?

Without a default variation selection, price range will work partially.

Buyer will access product > sees a price range > selects the variable > price updates

If you have selected a default variation then range format will be removed completely.

Buyer will access product > sees the default selected variation > prices for that variation will be visible.

Tooltips

If your WooCommerce store targets mobile and tablet users, you need to make your product pages compatible with all devices.

For example, hovering actions can be convenient on computer or laptop devices but not with mobile devices.

IWPS helps you make your product page compatible with all device sizes.

How to setup Tooltips?

Follow the below steps to activate this option,

Go to IWP Swatches > Swatches
Open Settings Tab
Open Tooltip Settings
Activate tooltips option
Click on save.

This will add the tooltips function, Now we will need to add tooltip data.

Global Attribute Tooltip Data

In a global attribute, you can add 3 types of tooltip data.

Image tooltip
Custom text tooltip
Attribute name tooltip

Follow the below steps to add data,

Go to Attributes
Open the attribute field in which you want to add tooltip info
You will see a tooltip option inside the attribute terms
Customise the term’s tooltip data
Click on save

Custom Attribute Tooltip Data

In a custom attribute, you can add 3 types of tooltip data.

Image tooltip
Custom text tooltip
Attribute name tooltip

Follow the below steps to add data,

Go to Edit Products
Open Swatches Setting Tab
Choose the variable you want to customize
You will see a show tooltip button
Activate it and add your preferred data
Click on save

Specific Disabler

If you have a store with products like online service, gift card or affiliate product. In which you don’t need the customised product gallery, you can use the specific disabler to remove product gallery from that specific product type.

How Specific Disabler works?

It does not work on a singular product. It works only on a type of products.

You can disable virtual products, affiliate products, service products and more.

How to setup Specific Disabler?

Follow the below steps to activate this option,

Go to IWP Swatches > Gallery
Open Advanced Tab
Open Conditional Settings
Choose the product group that you want to disable product gallery
Click on save.

Migration Setup

If you were using any other variation swatches plugin and now you are migrating to IWP Swatches, You can import all the settings and product details with our migrator.

How Migration Setup works?

It will import all your product attribute and gallery data from other plugins to IWP Swatches.

You will need to check first if your previously used variation swatches plugin is compatible with our migrator or not. Our migrator is compatible with most of the popular plugins.

How to setup Migration Process?

Follow the below steps to activate this option,

Go to IWP Swatches > Gallery
Open Importer
Click on run importer next to the name of your previous plugin
All the data will be imported within few seconds.
After that you can continue removing previous plugin.

Import / Export

WooCommerce has a built-in product CSV Importer and Exporter.

Import, export, or update hundreds or thousands of products in your WooCommerce store with a single CSV. This tool supports most product types, including variations.

How Import / Export IWP Swatches?

IWP Swatches does not offer any in-built importer or exporter functions but it is compatible with default WordPress and WooCommerce import/export functions.

Export Product Data

Follow the below steps to export product data,

Go to: WooCommerce > Products.
Select Export at the top. The Export Products screen displays.
Select to Export All Columns
Select to Export All Products
Select to Export All Categories
Tick the box to Export Custom Meta
Select Generate CSV.

Import Product Data

Follow the below steps to import product data,

Go to: WooCommerce > Products.
Select Import at the top. The Upload CSV File screen displays.
Select Choose File and the CSV you wish you use.
Use dropdown menus on the right side to adjust fields
Run the Importer

IWPS Advanced

Advanced Features Setup

Sharable Links

Variation Limiter

Product Gallery Videos

Easy Variations Control

Shop Page Variation Visibility

Custom Swatches Dimensions

Device Responsive Setup

Price Range Convertor

Tooltips

Specific Disabler

Migration Setup

Import / Export

EASY ACCESS

InnovativeWP

Popular Plugins

Site Links

IWP Sources

Important Links