How to Setup & Configure WooCommerce Product Variation Swatches PRO

Step 1: First Download and Install the Woocommerce variation swatches plugin 

After purchase the PRO version you will get purchase confirmation email with download link or login our site then go to Purchase History to download.

Step 2: Configure plugin

Step 2.1) WooCommerce =>Settings =>Product Swatches=> General

2.1.1) Enable Tooltip: Enable or disable Tooltip for each product attributes.

2.1.2) Shape Style: Select rounded or square shape.

2.1.3) Attributes Image Size: Set image size.

2.1.4) You can set custom size.

2.1.5) Tooltip Image size: You can set tooltip image size

2.1.6) Tooltip Image width: Set tooltip image width.

WooCommerce variation swatches settings

Step 2.2) WooCommerce =>Settings =>Product Swatches=> Advance

2.2.1) Clear on Reselect: Clear Selected attribites when select new attributes.

2.2.2) AJAX variation threshold: You can set total variation from her eby default Woocommerce support 30 variation set.

2.2.3) Out of stock for variation: Check to disable out of stock for variation product attribute item

2.2.4) Variation URL(new): Check it if you want to show variation attribute in url.

2.2.5) Attribute Behavior: Set image attribute behavior


woocommerce variation swatches settings

Step 2.3) WooCommerce =>Settings =>Product Swatches=> Style

2.3.1) You can set Tooltip background & text color

2.3.2) Attribute Behavior: you can set Cross background color & blur opacity.


woo variation swatches style

Step 2.5) Settings Archive / Shop :

2.5.1) Enable Swatches: Enable swatches for shop or archive page.

2.5.2) Swatches Position: You can set swatches positions where you want to show.

2.5.3) Swatches Align: You can set swatches align Left, Right

2.5.4) Enable Tooltip: Check to enable tooltip

2.5.5) Variation Item property: Set width, height and tooltip font size.

Special Attributes:

2.5.6) Show Single Attributes: Show single attributes at archive page.

2.5.7) Chose Attributes: Chose which attributes you want to show.

2.5.8) Catalog mode Event: Set on Click, hover.

Woo variation swatches

Step 2.6) Settings Tools

You you want to delete data when plugin deleted check this box.

WooCommerce variation swatches settings

Step 2: Configure Attributes

Go to WooCommerce Products => Attributes then add your own attributes

WooCommerce attributes type

Add New/ Edit attribute

=> Make sure select proper Type Color, Button or image or Radio

WooCommerce variation attributes


Step 3: Add/ Edit Attributes Terms

  1. First Click Configure Terms then add or edit new terms

WooCommerce configuration terms

3.1) Now Add / Edit the Attributes Terms

woocommerce edit attributes terms

3.2) Terms Type Color:

This is how to add attributes terms color

WooCommerce configurationattributes

3.3) Terms Type Button:

This is how attributes terms Button

WooCommerce attribute button

3.4) Terms Type Image:

This is how set attributes terms image

WooCommerce variation image type


Step 4: Set Product Attributes

Now go to product add/ edit mode then select Product date => Variable Product

Now add Custom Product attributes then click same

WooCommerce variation swatches

Step 5: Set Product Variation

Now set Product variation make sure each variation set price otherwise it will not display in front end.

WooCommerce variation swatches

Step 6: Set individual variation for each product to override global variations.

Go to Product Swatches tab and set the property.

  1. You can set which attribute you want to show for catalog mode.

Type Image

  1. Type image: You can override global settings to set own attribute like for image set image
  2. Tooltip: you can set tooltip like image or text

Type Color:

  1. Type Color: You can override global settings to set own attribute like for color set color
  2. Tooltip: you can set tooltip like image or text

After set the individual property you need to click save product swatches button.

Step 6: Front end View

Archive/ Category view 

WooCommerce category view

2) Default view for global variation


WooCommerce variation swatches

2) Individual variation set view [PRO]
WooCommerce variation swatches detail view

Remove full click link

Place this code in your theme function.php

If theme doesn’t remove any WordPress default hooks/ filter it will work

Get the code from Git Click here

If still face any issue please mail us

100% Money Back Guarantee

30 days money back guarantee see

Refund Policy

Safe & Secure Payment

PCI Compliance to Secure Credit Card Info.

Dedicated Support Team

15 Hours Real Time Support