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 “THVariationSwatches“. 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.
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.
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 the Tooltip option, check the box and enable or disable the tooltip from your product attribute Swatches.
Save your changes.
Result of ToolTip –
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 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.
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 variations of that product.
To enable or disable 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 attributes from here.
Now go to TH Swatches Pro > Style Setting > Tooltip
Pick the desired color for Tooltip Background and text.
Attribute Style option
For the 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 the Border color for the 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 the Border color of your hovered or select 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 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.
Tooltip Image Setting ( Pro version )
If you want to insert an 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.
Result of Tooltip Image –
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.
