TH Variation Swatches Plugin

Plugin Installation ( Free Version )

TH Variation Swatches Plugin will replace default swatches with professionally styled and colourful swatches. For using this plugin first install & activate WooCommerce in your dashboard.

Step 1: Go to your WordPress Dashboard > Wp Admin Plugins > Add New. Then in the search box, enter the name “TH Variation Swatches“. A plugin will appear. Then click on the ‘Install Now’ button.

Step 2: After the installation is completed, click on the ‘Activate’ button, and “TH Variation Swatches” will be activated.

Step 3: After activating the “TH Variation Swatches Plugin” in your dashboard, you can see the “ThemeHunk” tab on the right side. Under it you’ll find the TH Variation Swatches tab, click on it. Now you can start customizing it.

How to Purchase & Install Pro Plugin

TH Variation Swatches Pro Plugin comes with more advanced features and replaces default swatches with professionally styled and colorful swatches. For using this plugin first install & activate WooCommerce in your dashboard.

Step 1: Navigate to the ThemeHunk homepage, You will see “Plugins” menus on the top, when you hover over it you’ll see Th Variation swatches, click on them.

It will open Plugins page, search for Variation Swatches Pro and click on the View Details button.

Step 2: Afterward, just simply hit the ‘Buy Now’ button and it will directly take you to the ‘Pricing‘ section of TH Variation Swatches Pro Plugin.

Step 3: Now choose your desired plan from here and hit the button Buy Now from the desired table.
Step 4: Purchase your plugin from here, and fill in all the required details. Login to your member’s area. Your pro plugin has been added to your member’s area dashboard.

Step 5: You’ll see a TH Variation Swatches Pro plugin zip file in your Member’s area. Download the zip file of the plugin.

Step 6: Now, Open your WordPress Dashboard > Plugins > Add New > Upload the Plugin Zip file and Activate it.

You can see the “TH Variation Swatches Pro” panel in your dashboard.

Go with this Video Tutorial and Learn about TH Variation Swatches Plugin.

How to Create Attributes for your product?

Attributes add extra data to your WooCommerce products which will be useful for Searching & Filtering products. Our Plugin comes with three attribute types Color, image & button.

To add Attributes, Go to “Products” and then “Attributes” from your left sidebar menu.
As you’ll see by default, there are no WooCommerce attributes set up in your store.
Now enter the Name of the New Attribute For eg. – “Colors“. Select the Type i.e Color, Image, Or Button Swatches according to your need.
Click “Add attribute” and your attribute will be added.

After Adding an attribute, Now click on Click “Configure terms” in the same row as “Colors“.

In Configure terms enter the “Value” name, slug & description for your attribute.
Note – If you’re Adding Color Attribute then select the desired color from the color bar, given in the panel. If you’re adding an Image then upload an image for that attribute value.

How to Assign Attributes to Product?

Go to WooCommerce > Products.
Click on Add new product > Create a Product, add Product Name, Description, and Featured image, and Assign a Category to it.
When you scroll down the product page editor, you’ll see the Product Data panel, Select Variable product from the Product Data drop-down.

In the Attributes section, add the attributes which you’ve created before, and enter the “Values“.

You can also Choose Select all to add all attributes to the variable product.
Check the box Visible on the product page to display attributes on the product page.
Check the box Used for variations checkbox to tell WooCommerce it’s for your variations.
Click Save attributes.

How to Add Variations to Product?

Don’t get confused between Attributes & Variations. Variations are not for searching or filtering. Variations allow users to choose different options for a product. For eg – You can sell T-Shirt in different sizes and colors.

To add a variation, go to WooCommerce > Products, Scroll down the page you’ll see the Variations section in the Product Data meta box.
Now Select Add variation from the dropdown menu, and select Go.

Select attributes for your variation. To change additional data, click on the box and expand the variation. Now Enter the data according to your need. Click Save changes.
Note – The only required field is Regular Price.
Or you can directly add the Variations from the Option – Create variations from all attributes, Select this option and WooCommerce create every possible combination of variations, and after that click on Go.

Change Attribute Shape

Using this option you can change the Shape of your attribute Swatches – Rounded or Squared respectively.

To change the shape of swatches, Go to Your Dashboard > TH Swatches > Style > Attribute Shape Style.
You’ll see the Attribute Shape Style option, on clicking on the radio button you can select the shape of your swatches, Rounded Shape or Squared Shape.
Save your changes.

Result of Rounded Shape –

Result of Squared Shape –

Attribute Display Settings

Go to Your Dashboard > TH Swatches > Advanced Setting.

DISPLAY SETTING

Attribute Title – From the display setting, you can Show the Attribute Title by checking the box.
Attribute variation name – You can also Show the attribute variation name after the title, check the box.
Separator – You can add a Separator between the Name & Title, enter the Separator symbol in the text box.

IMAGE SETTING

Attribute image size – From this option, you can select the desired Image size for your image swatches.

ATTRIBUTE STYLE

Width & Height – From this option, you can add the width & height for your Variation value.
Font Size – Enter the desired font size for your Variation value.
Enable Attribute Behavior – It offers an option to blur or hide the out-of-stock variation to simplify the out-of-stock variation. Enable or disable Blur with a cross, Blur without cross, or Hide Attribute Behavior.
1. Blur with cross – This option will Blur your Attribute with a cross icon which is not available.
2. Blur without cross – This option will Blur your Attribute without the cross icon which is not available.
3. Hide – This option will Hide your Attribute which is not available.

General

Display Setting

This section configures the baseline behavior for your variation attributes.

Clear Attribute Setting: Turn this switch on to let users unselect an active attribute option simply by clicking it again.
Ajax variation threshold: Set the product variation limit to switch loading methods to Ajax for better site speed. Enter a number to control this threshold (the recommended default range is between 30 and 40).

Filter Attribute Widget

This section defines the visual structure of your attributes in sidebar filtering widgets.

Filter Attribute Style: Select how your swatches display in your store sidebar using the three layout cards:
- Horizontal Boxes: Displays options in a side-by-side layout box grid.
- Vertical List with Text: Arranges choices vertically with a descriptive text label next to each option.
- Horizontal Boxes with Labels: Displays side-by-side swatch boxes with individual sub-labels underneath.

Style

Attribute Style

This section controls the baseline shapes, sizes, and behaviors of your option selectors on individual product pages.

Swatches Style In Single Page: This setting changes how options are arranged. You can choose a clean, icon-only grid (ideal for simple color boxes or sizes) or a list layout that displays options horizontally next to clear text labels.
Attribute Shape Style: Choose the overall design shape of your option buttons.
- Rounded Shape: Turns your options into modern, smooth circles.
- Squared Shape: Turns your options into clean rectangles with sharp corners.
Attribute Title Font Size: Controls how large or small the text labels for your choices appear (e.g., the word “Color” or “Size” above your buttons). You can enter a number in pixels.
Separator: This lets you type a specific text symbol to divide your option label from the choice a user makes. For example, using a colon (:) turns your text layout into Color: Blue.
Unavailable Attribute Behavior: Decide what happens when an item variation runs completely out of stock:
- Blur with cross: Keeps the button visible but fades it out with an “X” drawn over it so customers instantly know it is sold out.
- Blur without cross: Softly fades out and grays out the button without an overlay symbol.
- Hide: Completely removes out-of-stock options from the page layout so customers can only click items available to buy right now.

Width: Controls the physical size of your choice items in pixels. Note: If you choose circular buttons, this option controls their entire size.
Font Size: Adjusts the text size inside your choice items (like the text “S”, “M”, or “L” written inside a sizing button).
Border Color & Border Size: Defines the look of the outer line surrounding each choice box. You can pick a custom border color and adjust the line thickness in pixels.
Text & Background Color: Lets you pick a custom color for the characters inside your buttons, along with a filling color for the background area of the option card.
Auto Dropdowns to Button: Turning this toggle switch on takes your store’s old, standard drop-down scroll lists and transforms them into modern, clickable button blocks automatically.

Hover & Selected Attribute Style

This group lets you choose custom colors that display only when a customer places their mouse cursor over an option box, or clicks on a specific choice. You can customize unique color changes for the Border Color, Text Color, and Background Color to make active selections visually obvious.

Tooltip

Tooltips are helpful little popup text boxes that appear right above an option box when a customer points their mouse cursor at it.

Background & Text Color: Customize the internal fill color and text font color of the small popup description box so it stands out against your site theme background.
Tooltip Toggle: Turn this switch on to enable helpful hover-text or miniature image boxes for your product items.
Border Color: Sets a clean outline frame color for image-based tooltip popups to cleanly separate them from the rest of your page.

How To Create Multi / Dual Color Swatches ( Pro version )

To create Dual color/Multicolor, first, navigate to Products >> Attributes. Fill the Name field with your desired product attribute name. Select the Color attribute type from the type dropdown.

Now, we’ll create Red&Blue and Green&Black variations for the DualColor attribute.
Creating Attribute Variation is the same as creating Attribute itself. Fill the Name field with desired variation name. Pick your desired Primary color and select Yes from is Dual Color option. Afterward, the Secondary Color option comes up. pick the secondary color from the color picker.

Enable WooCommerce Dual Color Swatches On Variable Products

To create a variable product, Go to Products > Add new. Give a name to your variable product and add some product descriptions. Make sure you have a variable product selected from the Product Data option.
Select the DualColor attribute, press Add button. After Adding Dual Swatches, you can see the following screen. From here, you add all your attribute variations at once, by pressing the Select All button. Select Dual Color Black/Red for the DualColor attribute as shown in the below image.

Click Add Variation dropdown. You can see Create variations from all attributes option comes up. Select the option and press the Go button. Now in your variation, you can select the Black/red for any desired variation which you have created in your attribute.

Product Catalog Setting ( Pro version )

Using this setting, you can show a single attribute on the shop page without showing all attribute swatches like the product page. For this setting, Go to your Dashboard > TH Swatches Pro > Special > Product Catalog. The following settings are available –

Enable Swatches – From this option, you can enable or disable swatches from your product catalog.
Select Attribute – From here you can select the attribute which you want to display in your product catalog.
Enable More – If you have more than 4 attributes then you can enable them from here. and enter more text.
Swatches Alignment – Using this option you can set the alignment of your attribute swatches left, center, or right side.
Width, Height, Font size – You can add the width, height, and text font size of your variation.

Result of Product Catalog –

Highlight Attribute Setting ( Pro version )

Your product may have plenty of attributes. If you want to keep your desired single attribute stand and highlighted. you can make the attribute enlarged using this setting. Go to your Dashboard > TH Swatches Pro > Special > Highlight attribute.

Enable Highlight – Check the box and make your attribute large in size.
Select Highlight Attribute – Select the attribute from the drop-down box, which you want to Highlight in your product single page.
Width, Height, Font Size – You can add the width, height, and text font size of your attribute variation.

How to manage Stock? ( Pro version )

With the Stock setting, you can show all the remaining stock for variation. For selling any products with multiple attribute variations like color and size, it is necessary to show the remaining product variation. It will create an urge in your customer to purchase a specifically limited variation as soon as possible.

First, do the following setting To add Stock quantity in your Variable Product.
Go to your Dashboard > Products > Add New Product or Click on the edit of your existing product.
Select Variable product from the Product Data dropdown. Now select your Attributes, and Enable the Used for variations checkbox.
Go to the Variations section in the Product Data meta box. Select attributes for your variation and change additional data.
In the additional data box, you’ll see the Manage Stock option, check the box. It will enable the options Stock quantity & Low stock threshold. Add your stock values here.

Note – Using the above Stock setting you can add the stock value of a particular Variation which you want to display on your Product pages.
Now navigate to your Dashboard > TH Swatches Pro > Special > Stock.
Enable Stock – Check the box and Show Stock availability on the Product single page.
Stock threshold – From this option, you can enter the Stock threshold value, whenever the stock reaches this value it will show the left-out stock for that particular variation.

Filter Attribute Widget Layouts ( Pro version )

To show attribute variation in your widget area of the Shop page or other pages, first, navigate to Appearance > widgets > in the widget panel you’ll see Filter Product by Attribute Box.
Drag & Drop this box to your WooCommerce sidebar or footer area. Now you can choose the desired attribute which you want to display and save it.

For Filter Attribute Style layouts, Go to your Dashboard > TH Swatches Pro > Special > Filter Attribute Widget.
There are three different Layouts given for your Widget Product filter Attribute. You can choose any desired layout and change the styling of your widget filter attribute.

Product Basis Swatches Customization (Advanced) ( Pro version )

To customize product basis swatches, Go to Product data > Variable product > Thvs-swatches Settings. From there you can start customizing swatches.

Get Help

If you face any difficulties, feel free to contact our support team at the support forum.
You can also Contact us. by filling out the form or ping us at our Live chat for pre-sales queries.