{"id":20752,"date":"2023-10-10T17:30:04","date_gmt":"2023-10-10T11:30:04","guid":{"rendered":"https:\/\/hasthemes.com\/?post_type=docs&#038;p=20752"},"modified":"2025-09-11T11:15:41","modified_gmt":"2025-09-11T05:15:41","password":"","slug":"configuring-attributes-and-enabling-swatch-types","status":"publish","type":"docs","link":"https:\/\/hasthemes.com\/docs\/configuring-attributes-and-enabling-swatch-types\/","title":{"rendered":"How to Configure Attributes"},"content":{"rendered":"\n<p>Swatchly allows you to enhance the product browsing experience by configuring attributes and enabling different swatch types, such as image and color swatches. Additionally, tooltips can be enabled to provide additional information to customers. Follow the steps below to configure attributes and enable swatches accordingly.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" style=\"font-size:22px\"><strong>Step 1:<\/strong> <strong>Starting Configuring Attributes<\/strong><gwmw style=\"display:none;\"><\/gwmw><\/h3>\n\n\n\n<p>Before enabling swatch types, ensure that your product attributes are properly configured in WooCommerce. To configure attributes:<gwmw style=\"display:none;\"><\/gwmw><gwmw style=\"display:none;\"><\/gwmw><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>1-<\/strong> <strong>Select &#8220;Attributes&#8221; from the Dropdown:<\/strong> From the Products section, select <strong>&#8220;Attributes&#8221;<\/strong> from the dropdown menu.<gwmw style=\"display:none;\"><\/gwmw><gwmw style=\"display:none;\"><\/gwmw><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full has-custom-border\"><a href=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-1.png\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1462\" height=\"748\" src=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-1.png\" alt=\"click on the attributes\" class=\"has-border-color wp-image-21125\" style=\"border-color:#fafafa;border-width:8px;border-radius:8px\" srcset=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-1.png 1462w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-1-300x153.png 300w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-1-1024x524.png 1024w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-1-768x393.png 768w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-1-360x184.png 360w\" sizes=\"(max-width: 1462px) 100vw, 1462px\" \/><\/a><\/figure>\n\n\n\n<div style=\"height:15px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>2-<\/strong> <strong>Add a New Attribute:<\/strong> Click on the <strong>&#8220;Add New Attribute&#8221;<\/strong> button. Enter the attribute name<strong> (e.g., &#8220;Color&#8221;)<\/strong> and attribute type<strong>(e.g., &#8220;Label,&#8221; &#8220;Color,&#8221; &#8220;Image&#8221;)<\/strong>. Click <strong>&#8220;Add Attributes.&#8221;<\/strong><gwmw style=\"display:none;\"><\/gwmw><gwmw style=\"display:none;\"><\/gwmw><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full has-custom-border\"><a href=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-2.png\"><img decoding=\"async\" width=\"1364\" height=\"701\" src=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-2.png\" alt=\"add attribute\" class=\"has-border-color wp-image-21126\" style=\"border-color:#fafafa;border-width:8px;border-radius:8px\" srcset=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-2.png 1364w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-2-300x154.png 300w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-2-1024x526.png 1024w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-2-768x395.png 768w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-2-360x185.png 360w\" sizes=\"(max-width: 1364px) 100vw, 1364px\" \/><\/a><\/figure>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" style=\"font-size:22px\"><strong>Step 2:<\/strong> <strong>Configuring the terms of the Attributes<\/strong><gwmw style=\"display:none;\"><\/gwmw><\/h3>\n\n\n\n<p>In WooCommerce, configuring the terms of attributes involves setting up the specific values or options available for each attribute. These terms represent the different variations or options that a product can have within a particular attribute.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>After adding attributes, you'll need to set up the terms for each attribute. Click on the <strong>&#8220;Configure terms&#8221;<\/strong> button next to each attribute to proceed with configuring its specific terms or options.<gwmw style=\"display:none;\"><\/gwmw><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full is-resized has-custom-border\"><a href=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-3.png\"><img decoding=\"async\" width=\"1641\" height=\"699\" src=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-3.png\" alt=\"click on the configure terms\" class=\"has-border-color wp-image-21130\" style=\"border-color:#fafafa;border-width:8px;border-radius:8px;aspect-ratio:2.347639484978541;width:1200px;height:auto\" srcset=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-3.png 1641w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-3-300x128.png 300w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-3-1024x436.png 1024w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-3-768x327.png 768w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-3-1536x654.png 1536w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-3-360x153.png 360w\" sizes=\"(max-width: 1641px) 100vw, 1641px\" \/><\/a><\/figure>\n\n\n\n<div style=\"height:15px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li>In this example, we'll focus on configuring color options for a specific attribute. There are four components you can define for each color option: the color name, slug (unique identifier), a brief description, and a color selector to visually represent the color. Customize these options based on your preferences. Once satisfied, click the <strong>&#8220;Add New Color&#8221;<\/strong> button at the bottom to include it in the list.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full has-custom-border\"><a href=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-4.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1615\" height=\"820\" src=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-4.png\" alt=\"add new color\" class=\"has-border-color wp-image-21133\" style=\"border-color:#fafafa;border-width:8px;border-radius:8px\" srcset=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-4.png 1615w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-4-300x152.png 300w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-4-1024x520.png 1024w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-4-768x390.png 768w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-4-1536x780.png 1536w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-4-360x183.png 360w\" sizes=\"(max-width: 1615px) 100vw, 1615px\" \/><\/a><\/figure>\n\n\n\n<div style=\"height:15px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li>You can add as many attributes as you need based on the requirement. Once you have added the terms, the final screen would like the below image.<gwmw style=\"display:none;\"><\/gwmw><gwmw style=\"display:none;\"><\/gwmw><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full has-custom-border\"><a href=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-5.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1578\" height=\"810\" src=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-5.png\" alt=\"color attribute list\" class=\"has-border-color wp-image-21138\" style=\"border-color:#fafafa;border-width:8px;border-radius:8px\" srcset=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-5.png 1578w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-5-300x154.png 300w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-5-1024x526.png 1024w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-5-768x394.png 768w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-5-1536x788.png 1536w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-5-360x185.png 360w\" sizes=\"(max-width: 1578px) 100vw, 1578px\" \/><\/a><\/figure>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Swatchly allows you to enhance the product browsing experience by configuring attributes and enabling different swatch types, such as image and color swatches. Additionally, tooltips can be enabled to provide additional information to customers. Follow the steps below to configure attributes and enable swatches accordingly. Step 1: Starting Configuring Attributes Before enabling swatch types, ensure [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","_mi_skip_tracking":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"doc_category":[245],"doc_tag":[],"class_list":["post-20752","docs","type-docs","status-publish","hentry","doc_category-how-to-use-swatchly"],"acf":[],"year_month":"2025-11","word_count":280,"total_views":"1478","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"Kausar mamun","author_nicename":"mamun","author_url":"https:\/\/hasthemes.com\/author\/mamun\/"},"doc_category_info":[{"term_name":"Swatchly","term_url":"https:\/\/hasthemes.com\/docs-category\/how-to-use-swatchly\/"}],"doc_tag_info":[],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"htmega_size_585x295":false,"htmega_size_1170x536":false,"htmega_size_396x360":false,"betterdocs-category-thumb":false},"uagb_author_info":{"display_name":"Kausar mamun","author_link":"https:\/\/hasthemes.com\/author\/mamun\/"},"uagb_comment_info":0,"uagb_excerpt":"Swatchly allows you to enhance the product browsing experience by configuring attributes and enabling different swatch types, such as image and color swatches. Additionally, tooltips can be enabled to provide additional information to customers. Follow the steps below to configure attributes and enable swatches accordingly. Step 1: Starting Configuring Attributes Before enabling swatch types, ensure&hellip;","knowledge_base_info":[],"knowledge_base_slug":[],"_links":{"self":[{"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/docs\/20752","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/comments?post=20752"}],"version-history":[{"count":24,"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/docs\/20752\/revisions"}],"predecessor-version":[{"id":33591,"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/docs\/20752\/revisions\/33591"}],"wp:attachment":[{"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/media?parent=20752"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/doc_category?post=20752"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/doc_tag?post=20752"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}