{"id":21265,"date":"2023-10-18T16:50:47","date_gmt":"2023-10-18T10:50:47","guid":{"rendered":"https:\/\/hasthemes.com\/?post_type=docs&#038;p=21265"},"modified":"2024-04-28T14:46:06","modified_gmt":"2024-04-28T08:46:06","password":"","slug":"how-to-set-up-product-variations","status":"publish","type":"docs","link":"https:\/\/hasthemes.com\/docs\/how-to-set-up-product-variations\/","title":{"rendered":"How to Set Up Product Variations"},"content":{"rendered":"\n<p>Now that you have defined the product attributes, it's time to set up product variations to display the variation swatches on your website's front-end.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>To configure product variations, navigate to <strong>&#8220;Products&#8221;<\/strong> and select <strong>&#8220;All Products.&#8221;<\/strong><\/li>\n\n\n\n<li>Locate the product for which you want to set up variations and click on <strong>&#8220;Edit&#8221;<\/strong> to proceed.<\/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-6.png\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1550\" height=\"799\" src=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-6.png\" alt=\"click on the edit\" class=\"has-border-color wp-image-21150\" style=\"border-color:#fafafa;border-width:8px;border-radius:8px\" srcset=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-6.png 1550w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-6-300x155.png 300w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-6-1024x528.png 1024w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-6-768x396.png 768w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-6-1536x792.png 1536w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-6-360x186.png 360w\" sizes=\"(max-width: 1550px) 100vw, 1550px\" \/><\/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 the product data section, choose <strong>&#8220;Variable Product&#8221;<\/strong> as the product type.<\/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-7.png\"><img decoding=\"async\" width=\"1586\" height=\"788\" src=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-7.png\" alt=\"select variable product option\" class=\"has-border-color wp-image-21153\" style=\"border-color:#fafafa;border-width:8px;border-radius:8px\" srcset=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-7.png 1586w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-7-300x149.png 300w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-7-1024x509.png 1024w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-7-768x382.png 768w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-7-1536x763.png 1536w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-7-360x179.png 360w\" sizes=\"(max-width: 1586px) 100vw, 1586px\" \/><\/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>Navigate to the <strong>&#8220;Attributes&#8221;<\/strong> tab and choose the attributes you wish to display on the front-end.<gwmw style=\"display:none;\"><\/gwmw><\/li>\n\n\n\n<li>Click on the <strong>&#8220;Add&#8221;<\/strong> button to include them 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-8.png\"><img decoding=\"async\" width=\"1586\" height=\"856\" src=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-8.png\" alt=\"add an attribute\" class=\"has-border-color wp-image-21154\" style=\"border-color:#fafafa;border-width:8px;border-radius:8px\" srcset=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-8.png 1586w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-8-300x162.png 300w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-8-1024x553.png 1024w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-8-768x415.png 768w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-8-1536x829.png 1536w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-8-360x194.png 360w\" sizes=\"(max-width: 1586px) 100vw, 1586px\" \/><\/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>After adding the attributes, click the <strong>&#8220;Select All&#8221;<\/strong> button to add all variants to the product.<\/li>\n\n\n\n<li>Make sure the <strong>&#8220;Used For Variation&#8221;<\/strong> button is checked.<\/li>\n\n\n\n<li>Click the <strong>&#8220;Save Attribute&#8221;<\/strong> button to save the changes.<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-9.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1593\" height=\"811\" src=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-9.png\" alt=\"Save Configuration\" class=\"has-border-color wp-image-21158\" style=\"border-color:#fafafa;border-width:8px;border-radius:8px\" srcset=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-9.png 1593w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-9-300x153.png 300w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-9-1024x521.png 1024w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-9-768x391.png 768w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-9-1536x782.png 1536w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-9-360x183.png 360w\" sizes=\"(max-width: 1593px) 100vw, 1593px\" \/><\/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>After saving the attributes, proceed to the <strong>&#8220;Variations&#8221;<\/strong> tab.<gwmw style=\"display:none;\"><\/gwmw><\/li>\n\n\n\n<li>Click on the <strong>&#8220;Add Manually&#8221;<\/strong> button to generate the variations.<\/li>\n\n\n\n<li>This action will add variations to the product based on the attributes you previously selected.<\/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-10.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1593\" height=\"563\" src=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-10.png\" alt=\"click on the add manually\" class=\"has-border-color wp-image-21162\" style=\"border-color:#fafafa;border-width:8px;border-radius:8px\" srcset=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-10.png 1593w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-10-300x106.png 300w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-10-1024x362.png 1024w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-10-768x271.png 768w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-10-1536x543.png 1536w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-10-360x127.png 360w\" sizes=\"(max-width: 1593px) 100vw, 1593px\" \/><\/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\/swatchly-configaration-11.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1584\" height=\"482\" src=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-11.png\" alt=\"choose a color\" class=\"has-border-color wp-image-21163\" style=\"border-color:#fafafa;border-width:8px;border-radius:8px\" srcset=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-11.png 1584w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-11-300x91.png 300w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-11-1024x312.png 1024w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-11-768x234.png 768w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-11-1536x467.png 1536w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-11-360x110.png 360w\" sizes=\"(max-width: 1584px) 100vw, 1584px\" \/><\/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>For each variant, customize the image and price by opening the drop-down menu.<gwmw style=\"display:none;\"><\/gwmw><\/li>\n\n\n\n<li>Select the desired variation from the drop-down menu.<\/li>\n\n\n\n<li>Set a custom price for the variant by entering the amount in the <strong>&#8220;Regular Price&#8221;<\/strong> field.<gwmw style=\"display:none;\"><\/gwmw><\/li>\n\n\n\n<li>Add an image for the variant by clicking the image button.<\/li>\n\n\n\n<li>Repeat this process for other variants as needed.<\/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-12.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1587\" height=\"877\" src=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-12.png\" alt=\"add varient price and image\" class=\"has-border-color wp-image-21164\" style=\"border-color:#fafafa;border-width:8px;border-radius:8px\" srcset=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-12.png 1587w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-12-300x166.png 300w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-12-1024x566.png 1024w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-12-768x424.png 768w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-12-1536x849.png 1536w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-12-360x199.png 360w\" sizes=\"(max-width: 1587px) 100vw, 1587px\" \/><\/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>After editing the fields, click on the <strong>&#8220;Save Changes&#8221;<\/strong> button located at the bottom, then proceed to <strong>&#8220;Update&#8221;<\/strong> the product.<gwmw style=\"display:none;\"><\/gwmw><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-13.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1248\" height=\"673\" src=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-13.png\" alt=\"variant product\" class=\"has-border-color wp-image-21166\" style=\"border-color:#fafafa;border-width:8px;border-radius:8px\" srcset=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-13.png 1248w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-13-300x162.png 300w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-13-1024x552.png 1024w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-13-768x414.png 768w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/swatchly-configaration-13-360x194.png 360w\" sizes=\"(max-width: 1248px) 100vw, 1248px\" \/><\/a><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Now that you have defined the product attributes, it&#8217;s time to set up product variations to display the variation swatches on your website&#8217;s front-end.<\/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-21265","docs","type-docs","status-publish","hentry","doc_category-how-to-use-swatchly"],"acf":[],"year_month":"2025-11","word_count":235,"total_views":"1430","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":"Now that you have defined the product attributes, it's time to set up product variations to display the variation swatches on your website's front-end.","knowledge_base_info":[],"knowledge_base_slug":[],"_links":{"self":[{"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/docs\/21265","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=21265"}],"version-history":[{"count":2,"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/docs\/21265\/revisions"}],"predecessor-version":[{"id":25633,"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/docs\/21265\/revisions\/25633"}],"wp:attachment":[{"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/media?parent=21265"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/doc_category?post=21265"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/doc_tag?post=21265"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}