{"id":793,"date":"2020-07-12T12:10:51","date_gmt":"2020-07-12T12:10:51","guid":{"rendered":"https:\/\/demo.getwooplugins.com\/woocommerce-variation-swatches\/product-details\/?page_id=793"},"modified":"2020-07-12T12:10:52","modified_gmt":"2020-07-12T12:10:52","slug":"dual-color-swatches","status":"publish","type":"page","link":"https:\/\/demo.getwooplugins.com\/woocommerce-variation-swatches\/product-details\/dual-color-swatches\/","title":{"rendered":"Dual Color Swatches"},"content":{"rendered":"\n<p><a href=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2018\/04\/swatches-double-color-settings.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-17436\" src=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2018\/04\/swatches-double-color-settings.jpg\" alt=\"\" width=\"750\" height=\"590\" \/><\/a><\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/91NFVUZtbRs\" width=\"1280\" height=\"400\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<h3>Step 01: Define Attribute Type<\/h3>\n<p>To kickstart creating multi\/dual color variation swatches globally, navigate to <strong>Products &gt;&gt; Attributes<\/strong>. Fill\u00a0\u00a0<strong>Name<\/strong> field with your desired product attribute name. I am going to name this attribute <strong>DualColor<\/strong>.<\/p>\n<p>Leave the <strong>Slug<\/strong> field empty. The system will create attribute slug on its own. Select <strong>Color<\/strong> attribute type from the type dropdown. Press <strong>Add Attribute<\/strong> button to continue the process.<\/p>\n<p><a href=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2019\/09\/dual-color-01.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-23224\" src=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2019\/09\/dual-color-01.png\" alt=\"Global Attribute\" width=\"801\" height=\"828\" \/><\/a><\/p>\n<p>After pressing <strong>Add Attribute<\/strong> button, you will notice a list on the right side. In the list, you can find <strong>DualColor<\/strong> attribute there.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-23225 aligncenter\" src=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2019\/09\/dual-color-02.png\" alt=\"\" width=\"800\" height=\"81\" \/><\/p>\n<h3>Step 02: Create Variation for DualColor Attribute<\/h3>\n<p>From the attribute list table, you have to press <strong>Configure terms<\/strong> link to create variations from <strong>DualColor<\/strong> attribute row.<\/p>\n<p>In this list table, you will find all your product attributes. All attributes come with Configure terms link. So, whenever you need to add new or edit existing variations you, you have to go in this way.<\/p>\n<p><a href=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2019\/09\/dual-color-03.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-23228 aligncenter\" src=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2019\/09\/dual-color-03.png\" alt=\"attribute configure terms\" width=\"807\" height=\"83\" \/><\/a><\/p>\n<p>Now, we&#8217;ll create <strong>Red&amp;Blue and<\/strong>\u00a0<strong>Green&amp;Black<\/strong> variations for <strong>DualColor<\/strong> attribute.<\/p>\n<p>Creating Attribute Variation is the same as creating Attribute itself. Fill the <strong>Name<\/strong> field with desired variation name, keep empty <strong>Slug<\/strong> field empty. Pick your desired <strong>Primary color<\/strong> and select <strong>Yes<\/strong> from <strong>is Dual Color<\/strong> option. Afterward, <strong>Secondary Color <\/strong>option\u00a0comes up. pick the secondary color from color-picker. Press <strong>Add new<\/strong> button to save the changes.<\/p>\n<p>For demonstration purposes, I&#8217;ve filled <strong>Name<\/strong> field with Red&amp;Blue title. Added Red color for primary and Blue color for secondary color options.<\/p>\n<p><a href=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2019\/09\/dual-color-04.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-23231\" src=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2019\/09\/dual-color-04.png\" alt=\"\" width=\"801\" height=\"1424\" \/><\/a><\/p>\n<p>I&#8217;ll do the same for the <strong>Green&amp;Black<\/strong> variation. After creating all your attribute variations, you can a variation list on the right side of the product variation creating form. So, you can see my created variable product variations.<\/p>\n<p><a href=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2019\/09\/dual-color-05.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-23232\" src=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2019\/09\/dual-color-05.png\" alt=\"\" width=\"802\" height=\"226\" \/><\/a><\/p>\n<h3>Step 03: Enable WooCommerce Dual Color Swatches On Variable Products<\/h3>\n<p>We have successfully created <strong>WooCommerce multicolor swatches for product attribute variations<\/strong> globally. Now, It\u2019s time to link them with variable products.<br \/>To create a variable product, head to the <strong>Products &gt;&gt; Add new<\/strong>. Give a name to your variable product and add some product description. Make sure you have <strong>variable product<\/strong> select from <strong>Product Data<\/strong> option.<\/p>\n<p><a href=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2019\/09\/dual-color-06.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-23237\" src=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2019\/09\/dual-color-06.png\" alt=\"\" width=\"800\" height=\"548\" \/><\/a><\/p>\n<p>Next, from the <strong>Attribute<\/strong> tab, press on\u00a0<strong>Custom product attribute<\/strong> dropdown. This dropdown list will reveal with all available product attributes created globally.<\/p>\n<p><a href=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2019\/09\/dual-color-7.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-23236\" src=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2019\/09\/dual-color-7.png\" alt=\"\" width=\"802\" height=\"521\" \/><\/a><\/p>\n<p>Select your desired Attribute from this list. In my turn, it\u2019s <strong>DualColor<\/strong> attribute. Select DualColor attribute, press <strong>Add<\/strong> button.<\/p>\n<p><a href=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2019\/09\/dual-color-08.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-23238\" src=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2019\/09\/dual-color-08.png\" alt=\"\" width=\"806\" height=\"267\" \/><\/a><\/p>\n<p>After Adding Dual Swatches, you can see the following screen. From here, you add all your attribute variations at once, pressing <strong>Select All<\/strong> button.<\/p>\n<p><a href=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2019\/09\/dual-color-09.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-23244\" src=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2019\/09\/dual-color-09.png\" alt=\"\" width=\"799\" height=\"264\" \/><\/a><\/p>\n<p>You can see in the following screenshot, I&#8217;ve my two variations: <strong>Green&amp;Black<\/strong> and <strong>Red&amp;Blue<\/strong> for <strong>DualColor<\/strong> attribute are there. Check <strong>Used for variations and press<\/strong> the <strong>Save attributes<\/strong> button<\/p>\n<p><a href=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2019\/09\/dual-color-10.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-23245\" src=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2019\/09\/dual-color-10.png\" alt=\"\" width=\"800\" height=\"263\" \/><\/a><\/p>\n<p>Get inside the next section called <strong>Variations<\/strong>. Click <strong>Add Variation<\/strong> dropdown. You can see <strong>Create variations from all attributes<\/strong> option comes up. Select the option and press the <strong>Go<\/strong> button.<\/p>\n<p><a href=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2019\/09\/dual-color-11.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-23255\" src=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2019\/09\/dual-color-11.png\" alt=\"\" width=\"801\" height=\"264\" \/><\/a><\/p>\n<p>After pressing the Go button, you can attribute variations are list one after another in accordion style. You can notice, my two attributes <strong>Green&amp;Black<\/strong> and <strong>Read&amp;Blue<\/strong> variation are there in the screenshot.<\/p>\n<p><a href=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2019\/09\/dual-color-12.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-23256\" src=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2019\/09\/dual-color-12.png\" alt=\"\" width=\"801\" height=\"264\" \/><\/a><\/p>\n<p>Now, these variable product variations will not appear in the product frontend without defining prices. For demonstration purpose, I&#8217;ll add price and feature image for <strong>Green&amp;Black<\/strong> variation.<\/p>\n<p><a href=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2019\/09\/dual-color-13.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-23259\" src=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2019\/09\/dual-color-13.png\" alt=\"\" width=\"800\" height=\"608\" \/><\/a><\/p>\n<p>I&#8217;ve done the same for the Red&amp;Blue variation. Click on the <strong>Save Changes<\/strong> button to update the changes. Now publish the product and get the product frontend. My product page is looking like the following screenshot.<\/p>\n<p><a href=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2019\/09\/dual-color-14.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-23263\" src=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2019\/09\/dual-color-14.png\" alt=\"\" width=\"801\" height=\"439\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"default","ast-global-header-display":"","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":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","footnotes":""},"_links":{"self":[{"href":"https:\/\/demo.getwooplugins.com\/woocommerce-variation-swatches\/product-details\/wp-json\/wp\/v2\/pages\/793"}],"collection":[{"href":"https:\/\/demo.getwooplugins.com\/woocommerce-variation-swatches\/product-details\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo.getwooplugins.com\/woocommerce-variation-swatches\/product-details\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo.getwooplugins.com\/woocommerce-variation-swatches\/product-details\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demo.getwooplugins.com\/woocommerce-variation-swatches\/product-details\/wp-json\/wp\/v2\/comments?post=793"}],"version-history":[{"count":1,"href":"https:\/\/demo.getwooplugins.com\/woocommerce-variation-swatches\/product-details\/wp-json\/wp\/v2\/pages\/793\/revisions"}],"predecessor-version":[{"id":794,"href":"https:\/\/demo.getwooplugins.com\/woocommerce-variation-swatches\/product-details\/wp-json\/wp\/v2\/pages\/793\/revisions\/794"}],"wp:attachment":[{"href":"https:\/\/demo.getwooplugins.com\/woocommerce-variation-swatches\/product-details\/wp-json\/wp\/v2\/media?parent=793"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}