{"id":305,"date":"2024-06-28T08:56:44","date_gmt":"2024-06-28T08:56:44","guid":{"rendered":"https:\/\/wpretro.com\/vsw\/docs\/getting-started\/my-section\/setting-up-variation-swatches\/"},"modified":"2024-06-28T14:09:29","modified_gmt":"2024-06-28T14:09:29","slug":"setting-up-variation-swatches","status":"publish","type":"docs","link":"https:\/\/wpretro.com\/vsw\/docs\/getting-started\/main\/setting-up-variation-swatches\/","title":{"rendered":"Setting Up Variation Swatches"},"content":{"rendered":"\n<h3 class=\"wp-block-heading\"><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">In Variation Suite, you can enhance your product pages by displaying variations using attractive swatches. Follow these steps to set up a variation swatch layout:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"1-accessing-variation-display-settings\">1: Accessing Variation Display Settings<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>In the left-hand menu, click on <strong>WooCommerce<\/strong>.<\/li>\n\n\n\n<li>Select <strong>Settings<\/strong>.<\/li>\n\n\n\n<li>Click on the <strong>Variation Suite<\/strong> tab.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"527\" src=\"https:\/\/wpretro.com\/vsw\/wp-content\/uploads\/2024\/06\/3-2-1024x527.png\" alt=\"\" class=\"wp-image-341\" srcset=\"https:\/\/wpretro.com\/vsw\/wp-content\/uploads\/2024\/06\/3-2-1024x527.png 1024w, https:\/\/wpretro.com\/vsw\/wp-content\/uploads\/2024\/06\/3-2-300x154.png 300w, https:\/\/wpretro.com\/vsw\/wp-content\/uploads\/2024\/06\/3-2-768x395.png 768w, https:\/\/wpretro.com\/vsw\/wp-content\/uploads\/2024\/06\/3-2-600x309.png 600w, https:\/\/wpretro.com\/vsw\/wp-content\/uploads\/2024\/06\/3-2.png 1155w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"2-configuring-swatches-layout\">2: Configuring Swatches Layout<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Under <strong>Variation Display<\/strong>, choose <strong>Swatches<\/strong> from the options.<\/li>\n\n\n\n<li>This setting allows you to display product variations using colorful buttons, images, or labels.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1014\" src=\"https:\/\/wpretro.com\/vsw\/wp-content\/uploads\/2024\/06\/4-2-1024x1014.png\" alt=\"\" class=\"wp-image-342\" srcset=\"https:\/\/wpretro.com\/vsw\/wp-content\/uploads\/2024\/06\/4-2-1024x1014.png 1024w, https:\/\/wpretro.com\/vsw\/wp-content\/uploads\/2024\/06\/4-2-300x297.png 300w, https:\/\/wpretro.com\/vsw\/wp-content\/uploads\/2024\/06\/4-2-150x150.png 150w, https:\/\/wpretro.com\/vsw\/wp-content\/uploads\/2024\/06\/4-2-768x760.png 768w, https:\/\/wpretro.com\/vsw\/wp-content\/uploads\/2024\/06\/4-2-600x594.png 600w, https:\/\/wpretro.com\/vsw\/wp-content\/uploads\/2024\/06\/4-2-100x100.png 100w, https:\/\/wpretro.com\/vsw\/wp-content\/uploads\/2024\/06\/4-2.png 1096w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Customize the shape and appearance of swatches by adjusting options such as label shape, color shape, and image shape.<\/li>\n\n\n\n<li>Configure specific sizes for label, color, and image swatch shapes to match your design preferences (be sure to check the front end to verify).<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"3-setting-up-attributes-for-swatches\">3: Setting Up Attributes for Swatches<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Go to <strong>Products &gt; Attributes<\/strong>.<\/li>\n\n\n\n<li>Create or edit an attribute that you want to use for swatches (e.g., Color, Size).<\/li>\n\n\n\n<li>Set the <strong>Swatch Type<\/strong> (it can be a &#8220;Color&#8221; or &#8220;Image&#8221; or the default &#8220;Label&#8221;).<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"631\" height=\"740\" src=\"https:\/\/wpretro.com\/vsw\/wp-content\/uploads\/2024\/06\/5-2.png\" alt=\"\" class=\"wp-image-343\" srcset=\"https:\/\/wpretro.com\/vsw\/wp-content\/uploads\/2024\/06\/5-2.png 631w, https:\/\/wpretro.com\/vsw\/wp-content\/uploads\/2024\/06\/5-2-256x300.png 256w, https:\/\/wpretro.com\/vsw\/wp-content\/uploads\/2024\/06\/5-2-600x704.png 600w\" sizes=\"auto, (max-width: 631px) 100vw, 631px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Add or edit terms for the attribute, you can add an image or a color (or both, one will be selected automatically depending on the attribute type).<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"811\" src=\"https:\/\/wpretro.com\/vsw\/wp-content\/uploads\/2024\/06\/6-1-1024x811.png\" alt=\"\" class=\"wp-image-344\" srcset=\"https:\/\/wpretro.com\/vsw\/wp-content\/uploads\/2024\/06\/6-1-1024x811.png 1024w, https:\/\/wpretro.com\/vsw\/wp-content\/uploads\/2024\/06\/6-1-300x238.png 300w, https:\/\/wpretro.com\/vsw\/wp-content\/uploads\/2024\/06\/6-1-768x608.png 768w, https:\/\/wpretro.com\/vsw\/wp-content\/uploads\/2024\/06\/6-1-600x475.png 600w, https:\/\/wpretro.com\/vsw\/wp-content\/uploads\/2024\/06\/6-1.png 1160w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Remember<\/strong>, you can assign this layout to specific categories by editing each category and setting the &#8220;Variations Display Mode&#8221; option accordingly. This flexibility allows you to tailor the shopping experience based on product categories and customer preferences.<\/p>\n","protected":false},"featured_media":0,"parent":302,"menu_order":2,"comment_status":"open","ping_status":"closed","template":"","meta":{"ghostkit_customizer_options":"","ghostkit_custom_css":"","ghostkit_custom_js_head":"","ghostkit_custom_js_foot":"","ghostkit_typography":""},"doc_tag":[],"class_list":["post-305","docs","type-docs","status-publish","hentry"],"comment_count":0,"_links":{"self":[{"href":"https:\/\/wpretro.com\/vsw\/wp-json\/wp\/v2\/docs\/305","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpretro.com\/vsw\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/wpretro.com\/vsw\/wp-json\/wp\/v2\/types\/docs"}],"replies":[{"embeddable":true,"href":"https:\/\/wpretro.com\/vsw\/wp-json\/wp\/v2\/comments?post=305"}],"version-history":[{"count":3,"href":"https:\/\/wpretro.com\/vsw\/wp-json\/wp\/v2\/docs\/305\/revisions"}],"predecessor-version":[{"id":345,"href":"https:\/\/wpretro.com\/vsw\/wp-json\/wp\/v2\/docs\/305\/revisions\/345"}],"up":[{"embeddable":true,"href":"https:\/\/wpretro.com\/vsw\/wp-json\/wp\/v2\/docs\/302"}],"next":[{"title":"Creating a Variation Grid Layout","link":"https:\/\/wpretro.com\/vsw\/docs\/getting-started\/main\/creating-a-variation-grid-layout\/","href":"https:\/\/wpretro.com\/vsw\/wp-json\/wp\/v2\/docs\/308"}],"prev":[{"title":"How to Install Variation Suite","link":"https:\/\/wpretro.com\/vsw\/docs\/getting-started\/main\/how-to-install-variation-suite\/","href":"https:\/\/wpretro.com\/vsw\/wp-json\/wp\/v2\/docs\/303"}],"wp:attachment":[{"href":"https:\/\/wpretro.com\/vsw\/wp-json\/wp\/v2\/media?parent=305"}],"wp:term":[{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/wpretro.com\/vsw\/wp-json\/wp\/v2\/doc_tag?post=305"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}