TH Variation Swatches Plugin

Plugin Installation ( Free Version )

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

Step 1:  Go to your Wp Dashboard > Wp Admin Plugins > Add New. Then in the search box,  enter the name “TH Variation Swatches”. 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 “TH Variation Swatches Plugin” in your dashboard, you can see “Themehunk” tab in the right side. Under it you’ll find TH Variation Swatches tab, click on it. Now you can start customizing it.
Variation Swatches for WooCommerce installing


How to Purchase & Install Pro Plugin

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

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


  • 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 desired table.
  • Step 4 : Purchase your plugin from here, fill all the required details. Login to your member’s area. Your pro plugin has been added in 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 plugin.


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


  • You can See “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 product. 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 is no WooCommerce attributes are 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 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 desired color from the color bar, given in the panel. If you’re adding Image then upload image for that attribute value.

Product-Color-attribute setting

How to Assign Attributes to Product ?

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


    • In the Attributes section, add your attributes which you’ve created before, 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 in 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 a T- Shirt in different sizes and colors.

    • To add a variation, go to  WooCommerce > Products, Scroll down the page you’ll see 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.


Enable ToolTip Setting

This option will Enable or Disable Toptip from the product attribute Swatches.

  • Go to Your Dashboard > TH Swatches > Basic Setting > Tooltip.
  • Here you’ll see Tooltip option, check the box and enable or disable the tooltip from your product attribute Swatches.
  • Save your changes.


Result of ToolTip –

tooltip image doc

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 > Basic Setting > Attribute Shape Style.
  • You’ll see 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. 


    • Attribute Title – From display setting, you can Show 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.

display setting 1


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

image setting


  • 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 cross, Blur without cross or Hide Attribute Behavior.
  • 1. Blur with cross – This option will Blur your Attribute with cross icon which is not available.
  • 2. Blur without cross – This option will Blur your Attribute without cross icon which is not available.
  • 3. Hide – This option will Hide your Attribute which is not available.


Basic Setting

Default Stylesheet

  • For Default Stylesheet, Go to your Dashboard > TH Swatches > Basic Setting.
  • Using this option you can enable the default style of product attribute Swatches.

Auto Dropdowns to Button

  • For Auto Dropdowns to Button, Go to your Dashboard > TH Swatches > Basic Setting.
  • Using this option you can enable the Auto Dropdowns to Button for product attribute Swatches.


Clear Attribute Setting

  • Go to your Dashboard > TH Swatches > Advanced Setting > Clear Attribute Setting
  • Using this option you can Re-select the product attribute Swatches combination without clicking on the clear button and get new variation of that product.
  • To enable or disbale this setting just check the box of Clear Attribute Setting.


Swatches Style Options ( Pro version )

Tooltip color option

  • First go to Dashboard > TH Swatches Pro > Basic Setting > Tooltip. and enable your tooltip for product attribute from here.
  • Now go to TH Swatches Pro > Style Setting > Tooltip


  • Pick desired color for Tooltip Background and text.

tooltip color result image

Attribute Style option

  • For Attribute Style option, go to TH Swatches Pro > Style Setting > Attribute Style option.
  • This setting will work for Color, Image and button swatches.
  • You can pick Border color for Image, color and button swatches and also add the border size in px.
  • Background color & text color will work for Button swatch & Transparent images only.


Hover & Selected Attribute Style option

  • For Hover & Selected Attribute Style option, go to TH Swatches Pro > Style Setting > Hover & Selected Attribute Style option.
  • This setting will work for Color, Image and button swatches. You can pick Border color of your hovered or selected Image, color and button swatches.
  • Background color & text color will work for Hovered or selected Button swatch only.


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

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

  • Now, we’ll create Red&Blue and Green&Black variations for 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, Secondary Color option comes up. pick the secondary color from color-picker.
  • dual color swatches 2png

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 description. Make sure you have variable product select from Product Data option.
  • Select 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, pressing Select All button. Select Dual Color Black/Red for DualColor attribute as shown in the below image.
  • Edit product Beanie with Log ‹ swati — WordPress

  • 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 r any desired variation which you have created in your attribute.
  • dual color swatches 3

    Tooltip Image Setting ( Pro version )

    • If you want to insert image tooltip image based product basis variation. Go to TH Swatches Pro > Special > Tooltip option.
    • You can set the Image tooltip image from Product > Product Data > Product Variation settings. The image which will upload here, will be shown in your product Tooltip.
    • Enable Image Tooltip – Enable or disable the Tooltip from your product variation.
    • Select Tooltip Attribute – Select the attribute from the drop-down box, in which you want to show the image tooltip.
    • Width – You can adjust the width of your tooltip image, it will maintain the ratio of 1:1.

    tooltip image main image

    Result of Tooltip Image – 


    Product Catlog Setting ( Pro version )

    Using this setting, you can show single attribute in shop page without showing them all attribute swatches like product page. For this setting, Go to your Dashboard > TH Swatches Pro > Special > Product Catlog. Following setting are available –

    • Enable Swatches – From this option you can enable or disable swatches from your product catlog.
    • Select Attribute – From here you can select the attribute which you want to display in your product catlog.
    • Enable More – If you have more than 4 attributes than you can enable it from here. and enter the 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 Catlog  – 


    Highlight Attribute Setting ( Pro version )

    Your product may have plenty of attributes. If you want to keep your desired single attribute standout 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.

    highlight attribute image



    How to manage Stock ? ( Pro version )

    With 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 specific 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 edit of your existing product. 
    • Select Variable product from the Product Data dropdown. Now select your Attributes, 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 Manage Stock option, check the box. It will enable the options Stock quantity & Low stock threshold. Add your stock values here.


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

    stock doc


    Filter Attribute Widget Layouts ( Pro version )

    • To show attribute variation in your widget area of Shop page or other pages, first navigate to Appearance > widgets > in 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.
    • Product Basis Swatches Customization

    Get Help

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