{"id":21208,"date":"2023-10-18T15:25:35","date_gmt":"2023-10-18T09:25:35","guid":{"rendered":"https:\/\/hasthemes.com\/?post_type=docs&#038;p=21208"},"modified":"2023-10-18T15:25:40","modified_gmt":"2023-10-18T09:25:40","password":"","slug":"how-to-customize-swatchly-design-settings","status":"publish","type":"docs","link":"https:\/\/hasthemes.com\/docs\/how-to-customize-swatchly-design-settings\/","title":{"rendered":"How to Customize Swatchly Design Settings"},"content":{"rendered":"\n<p>Tailor the design and appearance of Swatchly to match your preferences and enhance the visual appeal of your product variations. Customize the design settings of Swatchly to tailor the appearance of swatches and tooltips based on your preferences. Here's a detailed breakdown of how you can achieve this:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" style=\"font-size:24px\"><strong>For Swatches<\/strong><\/h3>\n\n\n\n<div style=\"height:2px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Customize Swatches<\/strong><gwmw style=\"display:none;\"><\/gwmw>\n<ul class=\"wp-block-list\">\n<li>Define the appearance of swatches in different states:\n<ul class=\"wp-block-list\">\n<li><strong><em>Normal<\/em>:<\/strong> Customize swatch text color, font size, line height, background color, and border for the normal state.<\/li>\n\n\n\n<li><strong><em>Hover<\/em>:<\/strong> Adjust swatch text color, background color, and border for the hover state.<\/li>\n\n\n\n<li><strong><em>Selected<\/em>:<\/strong> Modify swatch text color, background color, and border for the selected state.<\/li>\n\n\n\n<li><strong><em>Disable<\/em>:<\/strong> Set swatch text color, background color, and border for the disabled state.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/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\/customize-swatches-design-options-1.png\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1337\" height=\"673\" src=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/customize-swatches-design-options-1.png\" alt=\"\" class=\"has-border-color wp-image-21220\" style=\"border-color:#fafafa;border-width:8px;border-radius:8px\" srcset=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/customize-swatches-design-options-1.png 1337w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/customize-swatches-design-options-1-300x151.png 300w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/customize-swatches-design-options-1-1024x515.png 1024w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/customize-swatches-design-options-1-768x387.png 768w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/customize-swatches-design-options-1-585x295.png 585w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/customize-swatches-design-options-1-360x181.png 360w\" sizes=\"(max-width: 1337px) 100vw, 1337px\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full has-custom-border\"><a href=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/customize-swatches-design-options-1-1.png\"><img decoding=\"async\" width=\"1346\" height=\"413\" src=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/customize-swatches-design-options-1-1.png\" alt=\"\" class=\"has-border-color wp-image-21221\" style=\"border-color:#fafafa;border-width:8px;border-radius:8px\" srcset=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/customize-swatches-design-options-1-1.png 1346w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/customize-swatches-design-options-1-1-300x92.png 300w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/customize-swatches-design-options-1-1-1024x314.png 1024w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/customize-swatches-design-options-1-1-768x236.png 768w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/customize-swatches-design-options-1-1-360x110.png 360w\" sizes=\"(max-width: 1346px) 100vw, 1346px\" \/><\/a><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Customize Swatches (Product List)<\/strong>\n<ul class=\"wp-block-list\">\n<li>Customize swatch appearance specifically for the product list:<gwmw style=\"display:none;\"><\/gwmw>\n<ul class=\"wp-block-list\">\n<li><strong><em>Normal<\/em>:<\/strong> Tailor swatch text color, font size, line height, background color, and border for the normal state.<\/li>\n\n\n\n<li><strong><em>Hover<\/em>:<\/strong> Modify swatch text color, background color, and border for the hover state.<\/li>\n\n\n\n<li><strong><em>Selected<\/em>:<\/strong> Adjust swatch text color, background color, and border for the selected state.<gwmw style=\"display:none;\"><\/gwmw><\/li>\n\n\n\n<li><strong><em>Disable<\/em>:<\/strong> Set swatch text color, background color, and border for the disabled state.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/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\/customize-swatches-design-options-2.png\"><img decoding=\"async\" src=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/customize-swatches-design-options-2.png\" alt=\"\" class=\"has-border-color wp-image-21213\" style=\"border-color:#fafafa;border-width:8px;border-radius:8px\"\/><\/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:24px\"><strong><strong>For Tooltip<\/strong><\/strong><gwmw style=\"display:none;\"><\/gwmw><\/h3>\n\n\n\n<div style=\"height:2px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><strong>Tooltip Customize<\/strong><\/strong>\n<ul class=\"wp-block-list\">\n<li>Customize the appearance of tooltips:\n<ul class=\"wp-block-list\">\n<li>Configure tooltip width, maximum width, background color, border, and spacing.<gwmw style=\"display:none;\"><\/gwmw><\/li>\n\n\n\n<li>Define text color, font size, line height, and padding for tooltip text.<\/li>\n\n\n\n<li>Adjust the arrow color, size, and spacing for the tooltip arrow.<\/li>\n\n\n\n<li>Set the border for the tooltip image.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/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\/customize-swatches-design-options-3.png\"><img decoding=\"async\" width=\"1340\" height=\"584\" src=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/customize-swatches-design-options-3.png\" alt=\"\" class=\"has-border-color wp-image-21217\" style=\"border-color:#fafafa;border-width:8px;border-radius:8px\" srcset=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/customize-swatches-design-options-3.png 1340w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/customize-swatches-design-options-3-300x131.png 300w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/customize-swatches-design-options-3-1024x446.png 1024w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/customize-swatches-design-options-3-768x335.png 768w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/customize-swatches-design-options-3-360x157.png 360w\" sizes=\"(max-width: 1340px) 100vw, 1340px\" \/><\/a><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Tooltip Customize (Product List)<\/strong>\n<ul class=\"wp-block-list\">\n<li>Tailor tooltip appearance specifically for the product list:\n<ul class=\"wp-block-list\">\n<li>Customize tooltip width, maximum width, background color, border, and spacing.<gwmw style=\"display:none;\"><\/gwmw><\/li>\n\n\n\n<li>Adjust text color, font size, line height, and padding for tooltip text.<\/li>\n\n\n\n<li>Modify the arrow color, size, and spacing for the tooltip arrow.<\/li>\n\n\n\n<li>Set the border for the tooltip image.<gwmw style=\"display:none;\"><\/gwmw><gwmw style=\"display:none;\"><\/gwmw><gwmw style=\"display:none;\"><\/gwmw><gwmw style=\"display:none;\"><\/gwmw><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/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\/customize-swatches-design-options-4.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1348\" height=\"560\" src=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/customize-swatches-design-options-4.png\" alt=\"\" class=\"has-border-color wp-image-21218\" style=\"border-color:#fafafa;border-width:8px;border-radius:8px\" srcset=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/customize-swatches-design-options-4.png 1348w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/customize-swatches-design-options-4-300x125.png 300w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/customize-swatches-design-options-4-1024x425.png 1024w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/customize-swatches-design-options-4-768x319.png 768w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/customize-swatches-design-options-4-360x150.png 360w\" sizes=\"(max-width: 1348px) 100vw, 1348px\" \/><\/a><\/figure>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>With these customization options, you can create a visually appealing and cohesive design for swatches and tooltips, enhancing the overall user experience on your WooCommerce store.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Tailor the design and appearance of Swatchly to match your preferences and enhance the visual appeal of your product variations. Customize the design settings of Swatchly to tailor the appearance of swatches and tooltips based on your preferences. Here&#8217;s a detailed breakdown of how you can achieve this: For Swatches For Tooltip With these customization [&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":[246,247],"class_list":["post-21208","docs","type-docs","status-publish","hentry","doc_category-how-to-use-swatchly","doc_tag-swatchly","doc_tag-variation-swatches-for-products"],"acf":[],"year_month":"2025-11","word_count":311,"total_views":"1305","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":[{"term_name":"Swatchly","term_url":"https:\/\/hasthemes.com\/docs-tag\/swatchly\/"},{"term_name":"Variation Swatches for Products","term_url":"https:\/\/hasthemes.com\/docs-tag\/variation-swatches-for-products\/"}],"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":"Tailor the design and appearance of Swatchly to match your preferences and enhance the visual appeal of your product variations. Customize the design settings of Swatchly to tailor the appearance of swatches and tooltips based on your preferences. Here's a detailed breakdown of how you can achieve this: For Swatches For Tooltip With these customization&hellip;","knowledge_base_info":[],"knowledge_base_slug":[],"_links":{"self":[{"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/docs\/21208","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=21208"}],"version-history":[{"count":11,"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/docs\/21208\/revisions"}],"predecessor-version":[{"id":33592,"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/docs\/21208\/revisions\/33592"}],"wp:attachment":[{"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/media?parent=21208"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/doc_category?post=21208"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/doc_tag?post=21208"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}