{"id":28171,"date":"2023-03-22T18:10:40","date_gmt":"2023-03-22T12:40:40","guid":{"rendered":"https:\/\/themehunk.com\/?post_type=docs&#038;p=28171"},"modified":"2026-08-24T16:15:40","modified_gmt":"2026-08-24T10:45:40","slug":"th-variation-swatches-plugin","status":"publish","type":"docs","link":"https:\/\/themehunk.com\/fr\/docs\/th-variation-swatches-plugin\/","title":{"rendered":"TH Variation Swatches Plugin"},"content":{"rendered":"\n<section class=\"wp-block-group Install-plugin has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">Plugin Installation ( Free Version )<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">TH Variation Swatches Plugin will replace default swatches with professionally styled and colourful swatches. For using this plugin first install &amp; activate WooCommerce in your dashboard.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Step 1: <\/strong>&nbsp;Go to your WordPress<strong>&nbsp;Dashboard &gt; Wp Admin Plugins &gt; Add New.<\/strong> Then in the search box,&nbsp; enter the name &#8220;<strong>TH<\/strong> <strong>Variation<\/strong> <strong>Swatches<\/strong>&#8220;. A plugin will appear. Then click on the \u2018Install Now\u2019 button.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><a href=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/variation-swatches-70014.png?ssl=1\"><img data-recalc-dims=\"1\" fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"506\" src=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/variation-swatches-70014.png?resize=1024%2C506&#038;ssl=1\" alt=\"\" class=\"wp-image-47520\" srcset=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/variation-swatches-70014.png?resize=1024%2C506&amp;ssl=1 1024w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/variation-swatches-70014.png?resize=300%2C148&amp;ssl=1 300w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/variation-swatches-70014.png?resize=768%2C379&amp;ssl=1 768w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/variation-swatches-70014.png?resize=150%2C74&amp;ssl=1 150w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/variation-swatches-70014.png?w=1440&amp;ssl=1 1440w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Step 2<\/strong>:&nbsp;After the installation is completed, click on the&nbsp;\u2018<strong>Activate<\/strong>\u2019 button, and &#8220;TH Variation Swatches&#8221; will be activated.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><a href=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/th-variation-swatches-0024.png?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"623\" height=\"298\" src=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/th-variation-swatches-0024.png?resize=623%2C298&#038;ssl=1\" alt=\"\" class=\"wp-image-47521\" srcset=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/th-variation-swatches-0024.png?w=623&amp;ssl=1 623w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/th-variation-swatches-0024.png?resize=300%2C143&amp;ssl=1 300w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/th-variation-swatches-0024.png?resize=150%2C72&amp;ssl=1 150w\" sizes=\"(max-width: 623px) 100vw, 623px\" \/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Step 3<\/strong>: After activating the &#8220;<strong>TH Variation Swatches Plugin<\/strong>&#8221; in your dashboard, you can see the &#8220;<strong>ThemeHunk<\/strong>&#8221; tab on the right side. Under it you&#8217;ll find the TH Variation Swatches tab, click on it. Now you can start customizing it.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"1024\" height=\"449\" src=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/07\/Dashboard-_-Variation-Swatches.png?resize=1024%2C449&#038;ssl=1\" alt=\"\" class=\"wp-image-105361\" srcset=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/07\/Dashboard-_-Variation-Swatches.png?resize=1024%2C449&amp;ssl=1 1024w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/07\/Dashboard-_-Variation-Swatches.png?resize=300%2C132&amp;ssl=1 300w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/07\/Dashboard-_-Variation-Swatches.png?resize=768%2C337&amp;ssl=1 768w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/07\/Dashboard-_-Variation-Swatches.png?resize=1536%2C674&amp;ssl=1 1536w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/07\/Dashboard-_-Variation-Swatches.png?resize=48%2C21&amp;ssl=1 48w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/07\/Dashboard-_-Variation-Swatches.png?w=1580&amp;ssl=1 1580w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n<\/section>\n\n\n\n<section class=\"wp-block-group Install-pro has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">How to Purchase &amp; Install Pro Plugin<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">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 &amp; activate WooCommerce in your dashboard.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Step 1:<\/strong> Navigate to the ThemeHunk homepage, You will see &#8220;Plugins&#8221; menus on the top, when you hover over it you&#8217;ll see <strong>Th Variation swatches, <\/strong>click on them.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/07\/ThemeHunk-_-Pro-Plugins.jpg?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"463\" src=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/07\/ThemeHunk-_-Pro-Plugins.jpg?resize=1024%2C463&#038;ssl=1\" alt=\"\" class=\"wp-image-105362\" srcset=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/07\/ThemeHunk-_-Pro-Plugins.jpg?resize=1024%2C463&amp;ssl=1 1024w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/07\/ThemeHunk-_-Pro-Plugins.jpg?resize=300%2C136&amp;ssl=1 300w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/07\/ThemeHunk-_-Pro-Plugins.jpg?resize=768%2C347&amp;ssl=1 768w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/07\/ThemeHunk-_-Pro-Plugins.jpg?resize=48%2C22&amp;ssl=1 48w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/07\/ThemeHunk-_-Pro-Plugins.jpg?w=1521&amp;ssl=1 1521w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">It will open Plugins page, search for <strong>Variation Swatches Pro<\/strong> and click on the <strong>View Details<\/strong> button.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/07\/Plugins-_-Variation-Swatches-Pro.jpg?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/07\/Plugins-_-Variation-Swatches-Pro.jpg?resize=1024%2C640&#038;ssl=1\" alt=\"\" class=\"wp-image-105363\" srcset=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/07\/Plugins-_-Variation-Swatches-Pro.jpg?resize=1024%2C640&amp;ssl=1 1024w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/07\/Plugins-_-Variation-Swatches-Pro.jpg?resize=300%2C187&amp;ssl=1 300w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/07\/Plugins-_-Variation-Swatches-Pro.jpg?resize=768%2C480&amp;ssl=1 768w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/07\/Plugins-_-Variation-Swatches-Pro.jpg?resize=48%2C30&amp;ssl=1 48w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/07\/Plugins-_-Variation-Swatches-Pro.jpg?w=1338&amp;ssl=1 1338w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/a><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Step 2<\/strong>: Afterward, just simply hit the <strong>\u2018Buy Now\u2019<\/strong>&nbsp;button and it will directly take you to the&nbsp;<strong><a href=\"https:\/\/themehunk.com\/fr\/th-variation-swatches\/#pricing\" target=\"_blank\" rel=\"noreferrer noopener\">\u2018Pricing<\/a>\u2018&nbsp;<\/strong>section of TH Variation Swatches Pro Plugin.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/07\/Variation-Swatches-page.jpg?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"604\" src=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/07\/Variation-Swatches-page.jpg?resize=1024%2C604&#038;ssl=1\" alt=\"\" class=\"wp-image-105368\" srcset=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/07\/Variation-Swatches-page.jpg?resize=1024%2C604&amp;ssl=1 1024w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/07\/Variation-Swatches-page.jpg?resize=300%2C177&amp;ssl=1 300w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/07\/Variation-Swatches-page.jpg?resize=768%2C453&amp;ssl=1 768w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/07\/Variation-Swatches-page.jpg?resize=48%2C28&amp;ssl=1 48w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/07\/Variation-Swatches-page.jpg?w=1396&amp;ssl=1 1396w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/a><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Step 3<\/strong>: Now choose your desired plan from here and hit the button <strong>Buy Now <\/strong>from the desired table.<\/li>\n\n\n\n<li><strong>Step 4<\/strong>: Purchase your plugin from here, and fill in all the required details. Login to your member\u2019s area. Your pro plugin has been added to your member\u2019s area dashboard.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"663\" height=\"656\" src=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/pro-plugin-installation-4.png?resize=663%2C656&#038;ssl=1\" alt=\"pro-plugin-installation-4\" class=\"wp-image-29322\" srcset=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/pro-plugin-installation-4.png?w=663&amp;ssl=1 663w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/pro-plugin-installation-4.png?resize=300%2C297&amp;ssl=1 300w\" sizes=\"(max-width: 663px) 100vw, 663px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Step 5<\/strong>: You\u2019ll see a TH Variation Swatches Pro plugin zip file in your Member&#8217;s area. Download the zip file of the plugin.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"663\" height=\"442\" src=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/pro-plugin-installation-5.png?resize=663%2C442&#038;ssl=1\" alt=\"pro-plugin-installation-5\" class=\"wp-image-29323\" srcset=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/pro-plugin-installation-5.png?w=663&amp;ssl=1 663w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/pro-plugin-installation-5.png?resize=300%2C200&amp;ssl=1 300w\" sizes=\"(max-width: 663px) 100vw, 663px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Step 6<\/strong>: Now, Open your <strong>WordPress Dashboard &gt; Plugins &gt; Add New &gt; Upload the Plugin Zip file and Activate it<\/strong>.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"663\" height=\"240\" src=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/pro-plugin-installation-6.png?resize=663%2C240&#038;ssl=1\" alt=\"pro-plugin-installation-6\" class=\"wp-image-29324\" srcset=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/pro-plugin-installation-6.png?w=663&amp;ssl=1 663w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/pro-plugin-installation-6.png?resize=300%2C109&amp;ssl=1 300w\" sizes=\"(max-width: 663px) 100vw, 663px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>You can see the \u201c<strong>TH Variation Swatches Pro<\/strong>\u201d panel in your dashboard.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"996\" height=\"680\" src=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/07\/Dashboard-_-Variation-Swatches-pro.png?resize=996%2C680&#038;ssl=1\" alt=\"\" class=\"wp-image-105371\" srcset=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/07\/Dashboard-_-Variation-Swatches-pro.png?w=996&amp;ssl=1 996w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/07\/Dashboard-_-Variation-Swatches-pro.png?resize=300%2C205&amp;ssl=1 300w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/07\/Dashboard-_-Variation-Swatches-pro.png?resize=768%2C524&amp;ssl=1 768w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/07\/Dashboard-_-Variation-Swatches-pro.png?resize=48%2C33&amp;ssl=1 48w\" sizes=\"(max-width: 996px) 100vw, 996px\" \/><\/figure>\n<\/section>\n\n\n\n<section class=\"wp-block-group video-tutorial has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">Go with this Video Tutorial and Learn about TH Variation Swatches Plugin.<\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"TH Variation Swatches Plugin Tutorial\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/mLsuFC9-SrU?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n<\/section>\n\n\n\n<section class=\"wp-block-group create-attributes has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">How to Create Attributes for your product?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Attributes add extra data to your WooCommerce products which will be useful for Searching &amp; Filtering products. Our Plugin comes with three attribute types <strong>Color, image &amp; button.<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>To add Attributes, Go to &#8220;<strong>Products<\/strong>&#8221; and then &#8220;<strong>Attributes<\/strong>&#8221; from your left sidebar menu.<\/li>\n\n\n\n<li>As you&#8217;ll see by default, there are no WooCommerce attributes set up in your store.<\/li>\n\n\n\n<li>Now enter the Name of the New Attribute For eg. &#8211; &#8220;<strong>Colors<\/strong>&#8220;. Select the Type i.e Color, Image, Or Button Swatches according to your need.<\/li>\n\n\n\n<li>Click &#8220;<strong>Add attribute<\/strong>&#8221; and your attribute will be added.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"663\" height=\"300\" src=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/add-attribute.png?resize=663%2C300&#038;ssl=1\" alt=\"add-attribute\" class=\"wp-image-28193\" srcset=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/add-attribute.png?w=663&amp;ssl=1 663w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/add-attribute.png?resize=300%2C136&amp;ssl=1 300w\" sizes=\"(max-width: 663px) 100vw, 663px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>After Adding an attribute, Now click on Click &#8220;<strong>Configure terms<\/strong>&#8221; in the same row as &#8220;<strong>Colors<\/strong>&#8220;.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"663\" height=\"330\" src=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/configure-term-doc.png?resize=663%2C330&#038;ssl=1\" alt=\"configure-term-doc\" class=\"wp-image-28195\" srcset=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/configure-term-doc.png?w=663&amp;ssl=1 663w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/configure-term-doc.png?resize=300%2C149&amp;ssl=1 300w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/configure-term-doc.png?resize=400%2C200&amp;ssl=1 400w\" sizes=\"(max-width: 663px) 100vw, 663px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>In Configure terms enter the &#8220;<strong>Value<\/strong>&#8221; name, slug &amp; description for your attribute.<\/li>\n\n\n\n<li>Note &#8211; If you&#8217;re Adding Color Attribute then select the desired color from the color bar, given in the panel. If you&#8217;re adding an Image then upload an image for that attribute value.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"507\" height=\"716\" src=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/Product-Color-attribute-setting.png?resize=507%2C716&#038;ssl=1\" alt=\"Product-Color-attribute setting\" class=\"wp-image-28196\" srcset=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/Product-Color-attribute-setting.png?w=507&amp;ssl=1 507w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/Product-Color-attribute-setting.png?resize=212%2C300&amp;ssl=1 212w\" sizes=\"(max-width: 507px) 100vw, 507px\" \/><\/figure>\n<\/section>\n\n\n\n<section class=\"wp-block-group assign-attributes has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">How to Assign Attributes to Product?<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Go to <strong>WooCommerce &gt; Products<\/strong>.<\/li>\n\n\n\n<li>Click on <strong>Add new product &gt; Create a Product<\/strong>, add Product Name, Description, and Featured image, and Assign a Category to it.<\/li>\n\n\n\n<li>When you scroll down the product page editor, you&#8217;ll see the Product Data panel, Select <strong>Variable product<\/strong> from the Product Data drop-down.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/08\/Product-_-variable-products.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"773\" height=\"350\" src=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/08\/Product-_-variable-products.png?resize=773%2C350&#038;ssl=1\" alt=\"\" class=\"wp-image-105817\" srcset=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/08\/Product-_-variable-products.png?w=773&amp;ssl=1 773w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/08\/Product-_-variable-products.png?resize=300%2C136&amp;ssl=1 300w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/08\/Product-_-variable-products.png?resize=768%2C348&amp;ssl=1 768w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/08\/Product-_-variable-products.png?resize=48%2C22&amp;ssl=1 48w\" sizes=\"(max-width: 773px) 100vw, 773px\" \/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">You can add options in two different ways depending on how your store is set up:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Method A: Adding Global Attributes (Pre-made Options)<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you already created options under your global website settings, use the <strong>Add global<\/strong> dropdown list (marked as <strong>2<\/strong> in the screenshot):<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/08\/Product-_-attributes.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"393\" src=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/08\/Product-_-attributes.png?resize=600%2C393&#038;ssl=1\" alt=\"\" class=\"wp-image-105815\" srcset=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/08\/Product-_-attributes.png?w=600&amp;ssl=1 600w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/08\/Product-_-attributes.png?resize=300%2C197&amp;ssl=1 300w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/08\/Product-_-attributes.png?resize=48%2C31&amp;ssl=1 48w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><\/figure>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Click the <strong>Add global<\/strong> box to open your dropdown menu.<\/li>\n\n\n\n<li>Select your pre-made choice (like <strong>Color<\/strong> or <strong>Size<\/strong>).<\/li>\n\n\n\n<li>Click the <strong>Select all<\/strong> button to quickly pull in your pre-saved choices, or click <strong>Create value<\/strong> to type a new choice on the spot (like adding <em>Green<\/em> to your color options).<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/08\/Product-_-attributes-2.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"527\" src=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/08\/Product-_-attributes-2.png?resize=1024%2C527&#038;ssl=1\" alt=\"\" class=\"wp-image-105814\" srcset=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/08\/Product-_-attributes-2.png?resize=1024%2C527&amp;ssl=1 1024w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/08\/Product-_-attributes-2.png?resize=300%2C154&amp;ssl=1 300w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/08\/Product-_-attributes-2.png?resize=768%2C395&amp;ssl=1 768w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/08\/Product-_-attributes-2.png?resize=48%2C25&amp;ssl=1 48w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/08\/Product-_-attributes-2.png?w=1080&amp;ssl=1 1080w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Method B: Adding Custom Attributes (Unique to This Product)<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you want to create a brand-new option that is only used for this specific item:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Click the <strong>Add new<\/strong> button (marked as <strong>1<\/strong> in the screenshot).<\/li>\n\n\n\n<li>Go to the <strong>Name<\/strong> box and type your option headline (e.g., type Type or Material).<\/li>\n\n\n\n<li>Go to the <strong>Value(s)<\/strong> box and type your choices. Separate each choice using a vertical line symbol <code>|<\/code> on your keyboard (e.g., type Oversized | Regular).<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/08\/Product-_-custom-attributes.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"826\" height=\"391\" src=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/08\/Product-_-custom-attributes.png?resize=826%2C391&#038;ssl=1\" alt=\"\" class=\"wp-image-105816\" srcset=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/08\/Product-_-custom-attributes.png?w=826&amp;ssl=1 826w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/08\/Product-_-custom-attributes.png?resize=300%2C142&amp;ssl=1 300w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/08\/Product-_-custom-attributes.png?resize=768%2C364&amp;ssl=1 768w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/08\/Product-_-custom-attributes.png?resize=48%2C23&amp;ssl=1 48w\" sizes=\"(max-width: 826px) 100vw, 826px\" \/><\/a><\/figure>\n<\/section>\n\n\n\n<section class=\"wp-block-group add-variations has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">How to Add Variations to Product?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">After saving your attributes, the next step is to create the actual product choices (variations) that customers can buy (such as a Blue, Large t-shirt).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here is a beginner-friendly guide to generating, configuring, and organizing your variations step-by-step.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">When you first open a variable product, your variation workspace will be completely empty. To create your variations, click the items in this exact order:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/08\/Product-_-variations.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"879\" height=\"475\" src=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/08\/Product-_-variations.png?resize=879%2C475&#038;ssl=1\" alt=\"\" class=\"wp-image-105846\" srcset=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/08\/Product-_-variations.png?w=879&amp;ssl=1 879w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/08\/Product-_-variations.png?resize=300%2C162&amp;ssl=1 300w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/08\/Product-_-variations.png?resize=768%2C415&amp;ssl=1 768w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/08\/Product-_-variations.png?resize=48%2C26&amp;ssl=1 48w\" sizes=\"(max-width: 879px) 100vw, 879px\" \/><\/a><\/figure>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Click the Variations Tab (1):<\/strong> Look at the left-hand menu column and click <strong>Variations<\/strong>. This opens your configuration workspace.<\/li>\n\n\n\n<li><strong>Click Generate Variations (2):<\/strong> Click this button next. The plugin will instantly read all the attributes you saved earlier and automatically combine them to build every possible variation for you (for example, creating Blue Small, Blue Large, Green Small, Green Large).<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Once the plugin automatically builds your list of combinations, you must configure them. <strong>Crucial Rule:<\/strong> In WooCommerce, any option that does not have a price will be completely hidden from your customers on your live store.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/08\/Product-_-variations-2.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"518\" src=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/08\/Product-_-variations-2.png?resize=1024%2C518&#038;ssl=1\" alt=\"\" class=\"wp-image-105847\" srcset=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/08\/Product-_-variations-2.png?resize=1024%2C518&amp;ssl=1 1024w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/08\/Product-_-variations-2.png?resize=300%2C152&amp;ssl=1 300w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/08\/Product-_-variations-2.png?resize=768%2C388&amp;ssl=1 768w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/08\/Product-_-variations-2.png?resize=48%2C24&amp;ssl=1 48w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/08\/Product-_-variations-2.png?w=1082&amp;ssl=1 1082w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/a><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Set Your Pricing:<\/strong> Click the <strong>Add price<\/strong> button or use the <strong>Bulk actions<\/strong> dropdown menu to quickly apply your regular pricing to your variations all at once.<\/li>\n\n\n\n<li><strong>Customize Individual Options:<\/strong> Click <strong>Edit<\/strong> on the far right of any row to add unique images, stock quantities, or custom weights for that specific option. Click <strong>Remove<\/strong> to delete any combination you do not actually carry in stock.<\/li>\n\n\n\n<li><strong>Set Your Pre-selected Defaults:<\/strong> Use the <strong>Default Form Values<\/strong> dropdown menus at the very top if you want a specific choice (like Blue and Large) to be automatically selected when a buyer visits the page<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">To create your options manually step-by-step, click the buttons in this exact sequence:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/08\/Product-_-manual-variations-1.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"879\" height=\"475\" src=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/08\/Product-_-manual-variations-1.png?resize=879%2C475&#038;ssl=1\" alt=\"\" class=\"wp-image-105864\" srcset=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/08\/Product-_-manual-variations-1.png?w=879&amp;ssl=1 879w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/08\/Product-_-manual-variations-1.png?resize=300%2C162&amp;ssl=1 300w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/08\/Product-_-manual-variations-1.png?resize=768%2C415&amp;ssl=1 768w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/08\/Product-_-manual-variations-1.png?resize=48%2C26&amp;ssl=1 48w\" sizes=\"(max-width: 879px) 100vw, 879px\" \/><\/a><\/figure>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Click the Variations Tab (1):<\/strong> Navigate to the left-hand settings column and click on <strong>Variations<\/strong> to open your configuration workspace.<\/li>\n\n\n\n<li><strong>Click Add Manually (2):<\/strong> Next, click the <strong>Add manually<\/strong> button. This creates a single blank row, allowing you to build one specific product option combination at a time instead of generating all combinations automatically<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/08\/Product-_-manual-variations-2-1.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"402\" src=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/08\/Product-_-manual-variations-2-1.png?resize=1024%2C402&#038;ssl=1\" alt=\"\" class=\"wp-image-105865\" srcset=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/08\/Product-_-manual-variations-2-1.png?resize=1024%2C402&amp;ssl=1 1024w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/08\/Product-_-manual-variations-2-1.png?resize=300%2C118&amp;ssl=1 300w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/08\/Product-_-manual-variations-2-1.png?resize=768%2C301&amp;ssl=1 768w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/08\/Product-_-manual-variations-2-1.png?resize=48%2C19&amp;ssl=1 48w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/08\/Product-_-manual-variations-2-1.png?w=1076&amp;ssl=1 1076w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/a><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Select Attributes:<\/strong> Use the dropdown boxes on each row to assign specific characteristics to that item slot (such as setting specific rows for <em>Green + Large<\/em> or <em>Blue + Large<\/em>).<\/li>\n\n\n\n<li><strong>Apply Broad Rules:<\/strong> Selecting <strong>Any Color&#8230;<\/strong> or <strong>Any Size&#8230;<\/strong> tells the plugin that this specific row applies to all options in that category. This is perfect for saving time if your items share the exact same price or stock pool.<\/li>\n\n\n\n<li><strong>Save Your Progress:<\/strong> When you are finished configuring your product options, click the blue <strong>Save changes<\/strong> button at the bottom left to push your variation swatches live on your storefront<\/li>\n<\/ul>\n<\/section>\n\n\n\n<section class=\"wp-block-group enable-tooltip has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">Enable ToolTip Setting<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">This option will Enable or Disable Toptip from the product attribute Swatches.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Go to Your <strong>Dashboard &gt; TH Swatches &gt; Style &gt; Tooltip.<\/strong><\/li>\n\n\n\n<li>Here you&#8217;ll see the Tooltip option, check the box and enable or disable the tooltip from your product attribute Swatches.<\/li>\n\n\n\n<li>Save your changes.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"824\" height=\"571\" src=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/07\/Variation-Swatches-_-Style-3-tooltip.png?resize=824%2C571&#038;ssl=1\" alt=\"\" class=\"wp-image-105372\" srcset=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/07\/Variation-Swatches-_-Style-3-tooltip.png?w=824&amp;ssl=1 824w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/07\/Variation-Swatches-_-Style-3-tooltip.png?resize=300%2C208&amp;ssl=1 300w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/07\/Variation-Swatches-_-Style-3-tooltip.png?resize=768%2C532&amp;ssl=1 768w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/07\/Variation-Swatches-_-Style-3-tooltip.png?resize=48%2C33&amp;ssl=1 48w\" sizes=\"(max-width: 824px) 100vw, 824px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Result of ToolTip &#8211;<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"663\" height=\"342\" src=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/tooltip-image-doc.png?resize=663%2C342&#038;ssl=1\" alt=\"\" class=\"wp-image-28227\" srcset=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/tooltip-image-doc.png?w=663&amp;ssl=1 663w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/tooltip-image-doc.png?resize=300%2C155&amp;ssl=1 300w\" sizes=\"(max-width: 663px) 100vw, 663px\" \/><\/figure>\n<\/section>\n\n\n\n<section class=\"wp-block-group attribute-shape has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">Change Attribute Shape<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Using this option you can change the Shape of your attribute Swatches &#8211; Rounded or Squared respectively.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>To change the shape of swatches, Go to Your <strong>Dashboard &gt; TH Swatches &gt; Style &gt; Attribute Shape Style.<\/strong><\/li>\n\n\n\n<li>You&#8217;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.<\/li>\n\n\n\n<li>Save your changes.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"820\" height=\"528\" src=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/07\/Variation-Swatches-_-Style-attribute-style.png?resize=820%2C528&#038;ssl=1\" alt=\"\" class=\"wp-image-105374\" srcset=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/07\/Variation-Swatches-_-Style-attribute-style.png?w=820&amp;ssl=1 820w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/07\/Variation-Swatches-_-Style-attribute-style.png?resize=300%2C193&amp;ssl=1 300w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/07\/Variation-Swatches-_-Style-attribute-style.png?resize=768%2C495&amp;ssl=1 768w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/07\/Variation-Swatches-_-Style-attribute-style.png?resize=48%2C31&amp;ssl=1 48w\" sizes=\"(max-width: 820px) 100vw, 820px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Result of Rounded Shape &#8211;<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"663\" height=\"362\" src=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/rounded-shape-doc-result.png?resize=663%2C362&#038;ssl=1\" alt=\"rounded-shape-doc-result\" class=\"wp-image-28229\" srcset=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/rounded-shape-doc-result.png?w=663&amp;ssl=1 663w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/rounded-shape-doc-result.png?resize=300%2C164&amp;ssl=1 300w\" sizes=\"(max-width: 663px) 100vw, 663px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Result of Squared Shape &#8211;<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"663\" height=\"361\" src=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/squraed-shape-doc-result.png?resize=663%2C361&#038;ssl=1\" alt=\"squraed-shape-doc-result\" class=\"wp-image-28231\" srcset=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/squraed-shape-doc-result.png?w=663&amp;ssl=1 663w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/squraed-shape-doc-result.png?resize=300%2C163&amp;ssl=1 300w\" sizes=\"(max-width: 663px) 100vw, 663px\" \/><\/figure>\n<\/section>\n\n\n\n<section class=\"wp-block-group attribute-display has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">Attribute Display Settings<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Go to Your <strong>Dashboard &gt; TH Swatches &gt; Advanced Setting.<\/strong><br><a href=\"https:\/\/themehunk.com\/wp-content\/uploads\/2021\/06\/swtch-8-32.png\"><\/a><\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">DISPLAY SETTING<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Attribute Title &#8211; From the display setting, you can Show the Attribute Title by checking the box.<\/li>\n\n\n\n<li>Attribute variation name &#8211; You can also Show the attribute variation name after the title, check the box.<\/li>\n\n\n\n<li>Separator &#8211; You can add a Separator between the Name &amp; Title, enter the Separator symbol in the text box.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"671\" height=\"315\" src=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/display-setting-1.png?resize=671%2C315&#038;ssl=1\" alt=\"display setting 1\" class=\"wp-image-28236\" srcset=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/display-setting-1.png?w=671&amp;ssl=1 671w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/display-setting-1.png?resize=300%2C141&amp;ssl=1 300w\" sizes=\"(max-width: 671px) 100vw, 671px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">IMAGE SETTING<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Attribute image size &#8211; From this option, you can select the desired Image size for your image swatches.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"660\" height=\"269\" src=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/image-setting.png?resize=660%2C269&#038;ssl=1\" alt=\"image setting\" class=\"wp-image-28238\" srcset=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/image-setting.png?w=660&amp;ssl=1 660w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/image-setting.png?resize=300%2C122&amp;ssl=1 300w\" sizes=\"(max-width: 660px) 100vw, 660px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">ATTRIBUTE STYLE<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Width &amp; Height &#8211; From this option, you can add the width &amp; height for your Variation value.<\/li>\n\n\n\n<li>Font Size &#8211; Enter the desired font size for your Variation value.<\/li>\n\n\n\n<li>Enable Attribute Behavior &#8211; 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.<\/li>\n\n\n\n<li>1. <strong>Blur with cross<\/strong> &#8211; This option will Blur your Attribute with a cross icon which is not available.<\/li>\n\n\n\n<li>2. <strong>Blur without cross<\/strong> &#8211; This option will Blur your Attribute without the cross icon which is not available.<\/li>\n\n\n\n<li>3. <strong>Hide<\/strong> &#8211; This option will Hide your Attribute which is not available.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"663\" height=\"422\" src=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/attribute-style.png?resize=663%2C422&#038;ssl=1\" alt=\"attribute-style\" class=\"wp-image-28239\" srcset=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/attribute-style.png?w=663&amp;ssl=1 663w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/attribute-style.png?resize=300%2C191&amp;ssl=1 300w\" sizes=\"(max-width: 663px) 100vw, 663px\" \/><\/figure>\n<\/section>\n\n\n\n<section class=\"wp-block-group basic-setting has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">General<\/h2>\n\n\n\n<h4 class=\"wp-block-heading\">Display Setting<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">This section configures the baseline behavior for your variation attributes.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Clear Attribute Setting:<\/strong> Turn this switch on to let users unselect an active attribute option simply by clicking it again.<\/li>\n\n\n\n<li><strong>Ajax variation threshold:<\/strong> The Ajax Variation Threshold setting determines how product options and their availability are loaded when a customer views a variable product on your website. <br>Example &#8211; Imagine a shirt with 15 size\/color combos. Since 15 is below the threshold (30), the page loads instantly, and out-of-stock colors cross out immediately. If a shirt has 50 combos, it switches to AJAX to stay fast, but buttons won&#8217;t cross out until clicked.<br>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).<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"654\" src=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/07\/Variation-Swatches-_-General.png?resize=1024%2C654&#038;ssl=1\" alt=\"\" class=\"wp-image-105370\" srcset=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/07\/Variation-Swatches-_-General.png?resize=1024%2C654&amp;ssl=1 1024w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/07\/Variation-Swatches-_-General.png?resize=300%2C192&amp;ssl=1 300w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/07\/Variation-Swatches-_-General.png?resize=768%2C491&amp;ssl=1 768w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/07\/Variation-Swatches-_-General.png?resize=48%2C31&amp;ssl=1 48w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/07\/Variation-Swatches-_-General.png?w=1269&amp;ssl=1 1269w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Filter Attribute Widget<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">This section defines the visual structure of your attributes in sidebar filtering widgets.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Filter Attribute Style:<\/strong> Select how your swatches display in your store sidebar using the three layout cards:\n<ul class=\"wp-block-list\">\n<li>Horizontal Boxes: Displays options in a side-by-side layout box grid.<\/li>\n\n\n\n<li>Vertical List with Text: Arranges choices vertically with a descriptive text label next to each option.<\/li>\n\n\n\n<li>Horizontal Boxes with Labels: Displays side-by-side swatch boxes with individual sub-labels underneath.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/section>\n\n\n\n<section class=\"wp-block-group style-options has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">Style<\/h2>\n\n\n\n<h4 class=\"wp-block-heading\">Attribute Style<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">This section controls the baseline shapes, sizes, and behaviors of your option selectors on individual product pages.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Swatches Style In Single Page:<\/strong> 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.<\/li>\n\n\n\n<li><strong>Attribute Shape Style:<\/strong> Choose the overall design shape of your option buttons.\n<ul class=\"wp-block-list\">\n<li><strong>Rounded Shape:<\/strong> Turns your options into modern, smooth circles.<\/li>\n\n\n\n<li><strong>Squared Shape:<\/strong> Turns your options into clean rectangles with sharp corners.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Attribute Title Font Size:<\/strong> Controls how large or small the text labels for your choices appear (e.g., the word &#8220;Color&#8221; or &#8220;Size&#8221; above your buttons). You can enter a number in pixels.<\/li>\n\n\n\n<li><strong>Separator:<\/strong> 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 <em>Color: Blue<\/em>.<\/li>\n\n\n\n<li><strong>Unavailable Attribute Behavior:<\/strong> Decide what happens when an item variation runs completely out of stock:\n<ul class=\"wp-block-list\">\n<li><strong>Blur with cross:<\/strong> Keeps the button visible but fades it out with an &#8220;X&#8221; drawn over it so customers instantly know it is sold out.<\/li>\n\n\n\n<li><strong>Blur without cross:<\/strong> Softly fades out and grays out the button without an overlay symbol.<\/li>\n\n\n\n<li><strong>Hide:<\/strong> Completely removes out-of-stock options from the page layout so customers can only click items available to buy right now.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"613\" src=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/07\/Variation-Swatches-_-Style-1-attribute-style.png?resize=1024%2C613&#038;ssl=1\" alt=\"\" class=\"wp-image-105417\" srcset=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/07\/Variation-Swatches-_-Style-1-attribute-style.png?resize=1024%2C613&amp;ssl=1 1024w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/07\/Variation-Swatches-_-Style-1-attribute-style.png?resize=300%2C180&amp;ssl=1 300w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/07\/Variation-Swatches-_-Style-1-attribute-style.png?resize=768%2C460&amp;ssl=1 768w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/07\/Variation-Swatches-_-Style-1-attribute-style.png?resize=48%2C29&amp;ssl=1 48w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/07\/Variation-Swatches-_-Style-1-attribute-style.png?w=1400&amp;ssl=1 1400w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Width:<\/strong> Controls the physical size of your choice items in pixels. <em>Note: If you choose circular buttons, this option controls their entire size.<\/em><\/li>\n\n\n\n<li><strong>Font Size:<\/strong> Adjusts the text size inside your choice items (like the text &#8220;S&#8221;, &#8220;M&#8221;, or &#8220;L&#8221; written inside a sizing button).<\/li>\n\n\n\n<li><strong>Border Color &amp; Border Size:<\/strong> 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.<\/li>\n\n\n\n<li><strong>Text &amp; Background Color:<\/strong> 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.<\/li>\n\n\n\n<li><strong>Auto Dropdowns to Button:<\/strong> Turning this toggle switch on takes your store&#8217;s old, standard drop-down scroll lists and transforms them into modern, clickable button blocks automatically.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Hover &amp; Selected Attribute Style<\/h4>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/07\/Variation-Swatches-_-Style-2-Hover.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"531\" height=\"392\" src=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/07\/Variation-Swatches-_-Style-2-Hover.png?resize=531%2C392&#038;ssl=1\" alt=\"\" class=\"wp-image-105451\" srcset=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/07\/Variation-Swatches-_-Style-2-Hover.png?w=531&amp;ssl=1 531w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/07\/Variation-Swatches-_-Style-2-Hover.png?resize=300%2C221&amp;ssl=1 300w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/07\/Variation-Swatches-_-Style-2-Hover.png?resize=48%2C35&amp;ssl=1 48w\" sizes=\"(max-width: 531px) 100vw, 531px\" \/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">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 <strong>Border Color<\/strong>, <strong>Text Color<\/strong>, and <strong>Background Color<\/strong> to make active selections visually obvious.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"663\" height=\"411\" src=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/Hover-Selected-Attribute-Style-result.png?resize=663%2C411&#038;ssl=1\" alt=\"Hover-Selected-Attribute-Style-result\" class=\"wp-image-29053\" srcset=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/Hover-Selected-Attribute-Style-result.png?w=663&amp;ssl=1 663w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/Hover-Selected-Attribute-Style-result.png?resize=300%2C186&amp;ssl=1 300w\" sizes=\"(max-width: 663px) 100vw, 663px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Tooltip<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Tooltips are helpful little popup text boxes that appear right above an option box when a customer points their mouse cursor at it.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/07\/Variation-Swatches-_-Style-3-tooltip.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"824\" height=\"571\" src=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/07\/Variation-Swatches-_-Style-3-tooltip.png?resize=824%2C571&#038;ssl=1\" alt=\"\" class=\"wp-image-105372\" srcset=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/07\/Variation-Swatches-_-Style-3-tooltip.png?w=824&amp;ssl=1 824w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/07\/Variation-Swatches-_-Style-3-tooltip.png?resize=300%2C208&amp;ssl=1 300w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/07\/Variation-Swatches-_-Style-3-tooltip.png?resize=768%2C532&amp;ssl=1 768w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/07\/Variation-Swatches-_-Style-3-tooltip.png?resize=48%2C33&amp;ssl=1 48w\" sizes=\"(max-width: 824px) 100vw, 824px\" \/><\/a><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Background &amp; Text Color:<\/strong> Customize the internal fill color and text font color of the small popup description box so it stands out against your site theme background.<\/li>\n\n\n\n<li><strong>Tooltip Toggle:<\/strong> Turn this switch on to enable helpful hover-text or miniature image boxes for your product items.<\/li>\n\n\n\n<li><strong>Border Color:<\/strong> Sets a clean outline frame color for image-based tooltip popups to cleanly separate them from the rest of your page.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"663\" height=\"412\" src=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/tooltip-color-result-image.png?resize=663%2C412&#038;ssl=1\" alt=\"\" class=\"wp-image-29031\" srcset=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/tooltip-color-result-image.png?w=663&amp;ssl=1 663w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/tooltip-color-result-image.png?resize=300%2C186&amp;ssl=1 300w\" sizes=\"(max-width: 663px) 100vw, 663px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"663\" height=\"407\" src=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/Attribute-Style-option-result.png?resize=663%2C407&#038;ssl=1\" alt=\"Attribute-Style-option-result\" class=\"wp-image-29044\" srcset=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/Attribute-Style-option-result.png?w=663&amp;ssl=1 663w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/Attribute-Style-option-result.png?resize=300%2C184&amp;ssl=1 300w\" sizes=\"(max-width: 663px) 100vw, 663px\" \/><\/figure>\n<\/section>\n\n\n\n<section class=\"wp-block-group dual-color has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">How To Create Multi \/ Dual Color Swatches ( Pro version )<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>To create Dual color\/Multicolor, first, navigate to <strong>Products<\/strong> &gt;&gt; <strong>Attributes<\/strong>. Fill the Name field with your desired product attribute name. Select the Color attribute type from the type dropdown.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><a href=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/dual-color-swatches-1.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"663\" height=\"293\" src=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/dual-color-swatches-1.png?resize=663%2C293&#038;ssl=1\" alt=\"\" class=\"wp-image-36617\" srcset=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/dual-color-swatches-1.png?w=663&amp;ssl=1 663w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/dual-color-swatches-1.png?resize=300%2C133&amp;ssl=1 300w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/dual-color-swatches-1.png?resize=150%2C66&amp;ssl=1 150w\" sizes=\"(max-width: 663px) 100vw, 663px\" \/><\/a><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Now, we&#8217;ll create Red&amp;Blue and Green&amp;Black variations for the DualColor attribute.<\/li>\n\n\n\n<li>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.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><a href=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/dual-color-swatches-2png.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"663\" height=\"609\" src=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/dual-color-swatches-2png.png?resize=663%2C609&#038;ssl=1\" alt=\"\" class=\"wp-image-36618\" srcset=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/dual-color-swatches-2png.png?w=663&amp;ssl=1 663w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/dual-color-swatches-2png.png?resize=300%2C276&amp;ssl=1 300w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/dual-color-swatches-2png.png?resize=150%2C138&amp;ssl=1 150w\" sizes=\"(max-width: 663px) 100vw, 663px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Enable WooCommerce Dual Color Swatches On Variable Products<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>To create a variable product, Go to <strong>Products<\/strong> &gt; <strong>Add new<\/strong>. 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.<\/li>\n\n\n\n<li>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.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/Edit-product-Beanie-with-Log-%E2%80%B9-swati-%E2%80%94-WordPress.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1095\" height=\"411\" src=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/Edit-product-Beanie-with-Log-%E2%80%B9-swati-%E2%80%94-WordPress.png?resize=1095%2C411&#038;ssl=1\" alt=\"\" class=\"wp-image-36619\" srcset=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/Edit-product-Beanie-with-Log-%E2%80%B9-swati-%E2%80%94-WordPress.png?w=1095&amp;ssl=1 1095w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/Edit-product-Beanie-with-Log-%E2%80%B9-swati-%E2%80%94-WordPress.png?resize=300%2C113&amp;ssl=1 300w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/Edit-product-Beanie-with-Log-%E2%80%B9-swati-%E2%80%94-WordPress.png?resize=1024%2C384&amp;ssl=1 1024w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/Edit-product-Beanie-with-Log-%E2%80%B9-swati-%E2%80%94-WordPress.png?resize=768%2C288&amp;ssl=1 768w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/Edit-product-Beanie-with-Log-%E2%80%B9-swati-%E2%80%94-WordPress.png?resize=150%2C56&amp;ssl=1 150w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/a><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>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 <strong>Black\/red<\/strong> for any desired variation which you have created in your attribute.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/dual-color-swatches-3.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"663\" height=\"521\" src=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/dual-color-swatches-3.png?resize=663%2C521&#038;ssl=1\" alt=\"\" class=\"wp-image-36621\" srcset=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/dual-color-swatches-3.png?w=663&amp;ssl=1 663w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/dual-color-swatches-3.png?resize=300%2C236&amp;ssl=1 300w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/dual-color-swatches-3.png?resize=150%2C118&amp;ssl=1 150w\" sizes=\"(max-width: 663px) 100vw, 663px\" \/><\/a><\/figure>\n<\/section>\n\n\n\n<section class=\"wp-block-group tooltip-image has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">Tooltip Image Setting ( Pro version )<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>If you want to insert an image tooltip image-based product basis variation. Go to <strong>TH Swatches Pro &gt; Special &gt; Tooltip option.<\/strong><\/li>\n\n\n\n<li>You can set the Image tooltip image from Product &gt; Product Data &gt; Product Variation settings. The image which will upload here will be shown in your product Tooltip.<\/li>\n\n\n\n<li><strong>Enable Image Tooltip<\/strong> &#8211; Enable or disable the Tooltip from your product variation.<\/li>\n\n\n\n<li><strong>Select Tooltip Attribute<\/strong> &#8211; Select the attribute from the drop-down box, in which you want to show the image tooltip.<\/li>\n\n\n\n<li><strong>Width<\/strong> &#8211; You can adjust the width of your tooltip image, it will maintain the ratio of 1:1.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"636\" height=\"333\" src=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/tooltip-image-main-image.png?resize=636%2C333&#038;ssl=1\" alt=\"tooltip image main image\" class=\"wp-image-29057\" srcset=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/tooltip-image-main-image.png?w=636&amp;ssl=1 636w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/tooltip-image-main-image.png?resize=300%2C157&amp;ssl=1 300w\" sizes=\"(max-width: 636px) 100vw, 636px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Result of Tooltip Image &#8211;&nbsp;<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"663\" height=\"415\" src=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/tooltip-image-result.png?resize=663%2C415&#038;ssl=1\" alt=\"tooltip-image-result\" class=\"wp-image-29055\" srcset=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/tooltip-image-result.png?w=663&amp;ssl=1 663w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/tooltip-image-result.png?resize=300%2C188&amp;ssl=1 300w\" sizes=\"(max-width: 663px) 100vw, 663px\" \/><\/figure>\n<\/section>\n\n\n\n<section class=\"wp-block-group product-catalog has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">Product Catalog Setting ( Pro version )<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The dashboard features a real-time Live Preview card on the right side of your screen. As you adjust your toggles, sizes, or layouts, this visual simulation updates instantly to show exactly how your variations, tags, and product layout will look to customers on your storefront.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Core Display Toggles<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Enable Swatches:<\/strong> Turn this toggle on to show clickable color, image, or text swatches under product cards on your shop index pages.<\/li>\n\n\n\n<li><strong>Enable Single Swatches:<\/strong> Turn this switch on to separate your variations into individual product listings on your shop page. This operates your archive like a &#8220;catalog mode&#8221; where each option looks like its own standalone item.<\/li>\n\n\n\n<li><strong>Enable Variation Slider:<\/strong> Switch this toggle on to pack your swatches inside a swipeable carousel slider. This is perfect for keeping your shop layout clean if a product has a large list of options.<\/li>\n\n\n\n<li><strong>Enable Clear Link:<\/strong> Turn this switch on to add a quick &#8220;Clear&#8221; link next to the swatches on your catalog page, letting customers instantly reset their active selections.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"762\" src=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/08\/Variation-Swatches-_-catalog-1.png?resize=1024%2C762&#038;ssl=1\" alt=\"\" class=\"wp-image-105892\" srcset=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/08\/Variation-Swatches-_-catalog-1.png?resize=1024%2C762&amp;ssl=1 1024w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/08\/Variation-Swatches-_-catalog-1.png?resize=300%2C223&amp;ssl=1 300w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/08\/Variation-Swatches-_-catalog-1.png?resize=768%2C571&amp;ssl=1 768w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/08\/Variation-Swatches-_-catalog-1.png?resize=48%2C36&amp;ssl=1 48w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/08\/Variation-Swatches-_-catalog-1.png?w=1401&amp;ssl=1 1401w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Layout &amp; Sizing Control<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Swatches Alignment:<\/strong> Select how your swatches sit under your product information using the dropdown menu (e.g., Left, Center, or Right).<\/li>\n\n\n\n<li><strong>Width:<\/strong> Input a specific number value in pixels to scale the size of your swatch buttons. <br>Note: If you use circular options, their entire size is managed by this width field alone.<\/li>\n\n\n\n<li><strong>Font Size:<\/strong> Type a custom value in pixels (e.g., <code>14px<\/code>) to increase or decrease the text sizing inside your option blocks.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">This feature displays a miniature product image popup when customers place their mouse cursor over a variation button on individual product pages.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/08\/Variation-Swatches-_-catalog-2.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"532\" height=\"493\" src=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/08\/Variation-Swatches-_-catalog-2.png?resize=532%2C493&#038;ssl=1\" alt=\"\" class=\"wp-image-105878\" srcset=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/08\/Variation-Swatches-_-catalog-2.png?w=532&amp;ssl=1 532w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/08\/Variation-Swatches-_-catalog-2.png?resize=300%2C278&amp;ssl=1 300w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/08\/Variation-Swatches-_-catalog-2.png?resize=48%2C44&amp;ssl=1 48w\" sizes=\"(max-width: 532px) 100vw, 532px\" \/><\/a><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Enable Image Tooltip:<\/strong> Turn this toggle switch on to activate visual image popups when customers hover over variations on a single product page.<\/li>\n\n\n\n<li><strong>Select Tooltip Attribute:<\/strong> Use this dropdown menu to choose exactly which product option (like color or size) triggers the image popup when hovered.<\/li>\n\n\n\n<li><strong>Width:<\/strong> Type a custom number value in pixels to change how large the image popup looks. <br>Note: The system automatically locks the popup container to a perfectly square 1:1 shape ratio.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">This feature displays a miniature product image popup when customers place their mouse cursor over a variation button on individual product pages.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/08\/Variation-Swatches-_-catalog-3.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"540\" height=\"358\" src=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/08\/Variation-Swatches-_-catalog-3.png?resize=540%2C358&#038;ssl=1\" alt=\"\" class=\"wp-image-105880\" srcset=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/08\/Variation-Swatches-_-catalog-3.png?w=540&amp;ssl=1 540w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/08\/Variation-Swatches-_-catalog-3.png?resize=300%2C199&amp;ssl=1 300w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2026\/08\/Variation-Swatches-_-catalog-3.png?resize=48%2C32&amp;ssl=1 48w\" sizes=\"(max-width: 540px) 100vw, 540px\" \/><\/a><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Enable Stock:<\/strong> Turn this toggle switch on to display clear inventory availability labels directly on individual product pages.<\/li>\n\n\n\n<li><strong>Stock Threshold:<\/strong> Type a specific number value here to control when the low-stock warning triggers. The system will hide the inventory count until the stock drops to or below this exact number.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Result of Product Catalog&nbsp; &#8211;&nbsp;<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"663\" height=\"303\" src=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/product-catlog-result-doc.png?resize=663%2C303&#038;ssl=1\" alt=\"product-catlog-result-doc&#039;\" class=\"wp-image-29328\" srcset=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/product-catlog-result-doc.png?w=663&amp;ssl=1 663w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/product-catlog-result-doc.png?resize=300%2C137&amp;ssl=1 300w\" sizes=\"(max-width: 663px) 100vw, 663px\" \/><\/figure>\n<\/section>\n\n\n\n<section class=\"wp-block-group highlight-attribute has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">Highlight Attribute Setting ( Pro version )<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">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 <strong>Dashboard &gt; TH Swatches Pro &gt; Special &gt; Highlight attribute.&nbsp;&nbsp;<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Enable Highlight &#8211; <\/strong>Check the box and make your attribute large in size.<\/li>\n\n\n\n<li><strong>Select Highlight Attribute &#8211; <\/strong>Select the attribute from the drop-down box, which you want to Highlight in your product single page.<\/li>\n\n\n\n<li><strong>Width, Height, Font Size &#8211; <\/strong>You can add the width, height, and text font size of your attribute variation.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"630\" height=\"502\" src=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/highlight-attribute-image.png?resize=630%2C502&#038;ssl=1\" alt=\"highlight attribute image\" class=\"wp-image-29063\" srcset=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/highlight-attribute-image.png?w=630&amp;ssl=1 630w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/highlight-attribute-image.png?resize=300%2C239&amp;ssl=1 300w\" sizes=\"(max-width: 630px) 100vw, 630px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"663\" height=\"408\" src=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/Highlight-Attribute-Setting-result.png?resize=663%2C408&#038;ssl=1\" alt=\"Highlight-Attribute-Setting-result\" class=\"wp-image-29064\" srcset=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/Highlight-Attribute-Setting-result.png?w=663&amp;ssl=1 663w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/Highlight-Attribute-Setting-result.png?resize=300%2C185&amp;ssl=1 300w\" sizes=\"(max-width: 663px) 100vw, 663px\" \/><\/figure>\n<\/section>\n\n\n\n<section class=\"wp-block-group stock-setting has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">How to manage Stock? ( Pro version )<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>First, do the following setting To add <strong>Stock quantity<\/strong> in your Variable Product.<\/li>\n\n\n\n<li>Go to your <strong>Dashboard &gt;&nbsp; Products &gt; Add New Product or Click on the edit of your existing product.&nbsp;<\/strong><\/li>\n\n\n\n<li>Select&nbsp;<strong>Variable product<\/strong>&nbsp;from the&nbsp;<strong>Product Data<\/strong> dropdown. Now select your Attributes, and Enable the <strong>Used for variations<\/strong> checkbox.<\/li>\n\n\n\n<li>Go to the <strong>Variations&nbsp;section <\/strong>in the&nbsp;Product Data meta box. Select attributes for your variation and change additional data.<\/li>\n\n\n\n<li>In the additional data box, you&#8217;ll see the <strong>Manage Stock<\/strong> option, check the box. It will enable the options <strong>Stock quantity &amp; Low stock threshold. <\/strong>Add your stock values here.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"663\" height=\"563\" src=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/stock-quantity-doc.png?resize=663%2C563&#038;ssl=1\" alt=\"stock-quantity-doc\" class=\"wp-image-29332\" srcset=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/stock-quantity-doc.png?w=663&amp;ssl=1 663w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/stock-quantity-doc.png?resize=300%2C255&amp;ssl=1 300w\" sizes=\"(max-width: 663px) 100vw, 663px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Note &#8211; <\/strong>Using the above Stock setting you can add the stock value of a particular Variation which you want to display on your Product pages.<\/li>\n\n\n\n<li>Now navigate to your <strong>Dashboard &gt; TH Swatches Pro &gt; Special &gt; Stock. &nbsp;<\/strong><\/li>\n\n\n\n<li><strong>Enable Stock<\/strong> &#8211; Check the box and Show Stock availability on the Product single page.<\/li>\n\n\n\n<li><strong>Stock threshold<\/strong> &#8211; 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.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"636\" height=\"249\" src=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/stock-doc.png?resize=636%2C249&#038;ssl=1\" alt=\"\" class=\"wp-image-29338\" srcset=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/stock-doc.png?w=636&amp;ssl=1 636w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/stock-doc.png?resize=300%2C117&amp;ssl=1 300w\" sizes=\"(max-width: 636px) 100vw, 636px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"663\" height=\"406\" src=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/stock-result-image-doc.png?resize=663%2C406&#038;ssl=1\" alt=\"stock-result-image-doc\" class=\"wp-image-29336\" srcset=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/stock-result-image-doc.png?w=663&amp;ssl=1 663w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/stock-result-image-doc.png?resize=300%2C184&amp;ssl=1 300w\" sizes=\"(max-width: 663px) 100vw, 663px\" \/><\/figure>\n<\/section>\n\n\n\n<section class=\"wp-block-group filter-attribute has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">Filter Attribute Widget Layouts ( Pro version )<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>To show attribute variation in your widget area of the Shop page or other pages, first, navigate to Appearance &gt; widgets &gt; in the widget panel you&#8217;ll see <strong>Filter Product by Attribute Box<\/strong>.<\/li>\n\n\n\n<li>Drag &amp; 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.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"663\" height=\"291\" src=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/add-widgets-filter-by-attibute.png?resize=663%2C291&#038;ssl=1\" alt=\"add-widgets-filter-by-attibute\" class=\"wp-image-29340\" srcset=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/add-widgets-filter-by-attibute.png?w=663&amp;ssl=1 663w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/add-widgets-filter-by-attibute.png?resize=300%2C132&amp;ssl=1 300w\" sizes=\"(max-width: 663px) 100vw, 663px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>For Filter Attribute Style layouts, Go to your <strong>Dashboard &gt; TH Swatches Pro &gt; Special &gt; Filter Attribute Widget.&nbsp;<\/strong><\/li>\n\n\n\n<li>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.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"663\" height=\"200\" src=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/filter-attibute-widget-style.png?resize=663%2C200&#038;ssl=1\" alt=\"filter-attibute-widget-style\" class=\"wp-image-29342\" srcset=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/filter-attibute-widget-style.png?w=663&amp;ssl=1 663w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/filter-attibute-widget-style.png?resize=300%2C90&amp;ssl=1 300w\" sizes=\"(max-width: 663px) 100vw, 663px\" \/><\/figure>\n<\/section>\n\n\n\n<section class=\"wp-block-group product-basis has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">Product Basis Swatches Customization (Advanced) ( Pro version )<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>To customize product basis swatches, Go to Product data &gt; Variable product &gt; Thvs-swatches Settings. From there you can start customizing swatches.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><a href=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/Product-Basis-Swatches-Customization.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"663\" height=\"699\" src=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/Product-Basis-Swatches-Customization.png?resize=663%2C699&#038;ssl=1\" alt=\"\" class=\"wp-image-36624\" srcset=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/Product-Basis-Swatches-Customization.png?w=663&amp;ssl=1 663w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/Product-Basis-Swatches-Customization.png?resize=285%2C300&amp;ssl=1 285w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2021\/06\/Product-Basis-Swatches-Customization.png?resize=150%2C158&amp;ssl=1 150w\" sizes=\"(max-width: 663px) 100vw, 663px\" \/><\/a><\/figure>\n<\/section>\n\n\n\n<section class=\"wp-block-group get-support has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">Get Help<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>If you face any difficulties, feel free to contact our support team at the <a href=\"https:\/\/www.support.themehunk.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">support forum<\/a>.<\/li>\n\n\n\n<li>You can also <a href=\"https:\/\/themehunk.com\/fr\/contact-us\/\" target=\"_blank\" rel=\"noreferrer noopener\">Contact us.<\/a> by filling out the form or ping us at our Live chat for pre-sales queries.<\/li>\n<\/ul>\n<\/section>\n","protected":false},"excerpt":{"rendered":"<p>Plugin Installation ( Free Version ) TH Variation Swatches Plugin will replace default swatches with professionally styled and colourful swatches. For using this plugin first install &amp; activate WooCommerce in your dashboard. Step 1: &nbsp;Go to your WordPress&nbsp;Dashboard &gt; Wp Admin Plugins &gt; Add New. Then in the search box,&nbsp; enter the name &#8220;TH Variation [&hellip;]<\/p>\n","protected":false},"author":7288,"featured_media":0,"template":"","meta":{"footnotes":""},"class_list":["post-28171","docs","type-docs","status-publish","hentry","docscate-lite-plugin","docscate-pro-plugin","docstag-swatches"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/themehunk.com\/wp-json\/wp\/v2\/docs\/28171","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themehunk.com\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/themehunk.com\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/themehunk.com\/wp-json\/wp\/v2\/users\/7288"}],"version-history":[{"count":16,"href":"https:\/\/themehunk.com\/wp-json\/wp\/v2\/docs\/28171\/revisions"}],"predecessor-version":[{"id":106065,"href":"https:\/\/themehunk.com\/wp-json\/wp\/v2\/docs\/28171\/revisions\/106065"}],"wp:attachment":[{"href":"https:\/\/themehunk.com\/wp-json\/wp\/v2\/media?parent=28171"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}