{"id":555,"date":"2020-06-16T08:03:48","date_gmt":"2020-06-16T08:03:48","guid":{"rendered":"https:\/\/demo.getwooplugins.com\/woocommerce-variation-swatches\/product-details\/?page_id=555"},"modified":"2020-06-17T06:28:07","modified_gmt":"2020-06-17T06:28:07","slug":"radio-variation-swatches","status":"publish","type":"page","link":"https:\/\/demo.getwooplugins.com\/woocommerce-variation-swatches\/product-details\/radio-variation-swatches\/","title":{"rendered":"Radio Variation Swatches"},"content":{"rendered":"<a href=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2018\/05\/Radio-Swatches.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5549\" src=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2018\/05\/Radio-Swatches.gif\" alt=\"\" width=\"1920\" height=\"1080\" \/><\/a>\r\n<p style=\"text-align: center;\"><strong>Frontend Preview<\/strong><\/p>\r\n\r\n<div class=\"wp-block-buttons aligncenter\">\r\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link\" href=\"https:\/\/demo.getwooplugins.com\/woocommerce-variation-swatches\/product-details\/product\/polo-ralph-lauren-ph3127-58\/\" target=\"_blank\" rel=\"noreferrer noopener\">Live Demo<\/a><\/div>\r\n\r\n\r\n\r\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-background has-vivid-red-background-color\" href=\"https:\/\/bit.ly\/unlock-all-features-color-swatches-catalog\" target=\"_blank\" rel=\"noreferrer noopener\">Unlock Premium Features<\/a><\/div>\r\n<\/div>\r\n\r\n<ol>\r\n \t<li style=\"text-align: left;\"><a href=\"#global-radio\">How To Create To Radio Variation Swatches For Global Attributes<\/a><\/li>\r\n \t<li style=\"text-align: left;\"><a href=\"#manual-radio\">How To Create To Radio Variation Swatches For Manual Attributes<\/a><\/li>\r\n \t<li style=\"text-align: left;\"><a href=\"#scratch-radio\">How To Create To Radio Variation Swatches From Scratch<\/a><\/li>\r\n<\/ol>\r\n\r\n<hr \/>\r\n\r\n<span id=\"global-radio\" style=\"color: #fff;\">.<\/span>\r\n<h3>How To Create Radio Variation Swatches For Globally Created Attributes<\/h3>\r\n<iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/vY0N11j6jxY?rel=0\" width=\"1080\" height=\"420\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe>\r\n<p style=\"text-align: center;\"><strong>Video Tutorial<\/strong><\/p>\r\n\r\n\r\n<hr \/>\r\n\r\nHead to the <strong>Products &gt;&gt; Attributes<\/strong>. All existing global attributes are listed in the attribute list page section. After installing <strong>WooCommerce Variation Swatches plugin<\/strong>, it adds <strong>Type<\/strong> field. By default it would show <strong>Select<\/strong> under Type title.\r\n\r\n<a href=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2018\/05\/label-02.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-5668\" src=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2018\/05\/label-02.png\" alt=\"\" width=\"1004\" height=\"103\" \/><\/a>\r\n\r\nAs <strong>WooCommerce Variation Swatches<\/strong> Plugin comes with 4 attribute types: Color, Image, Button and Radio. You can set any of attribute type for your desired attribute.\r\n\r\nFor demonstration purpose, <strong>Size<\/strong> attribute has been created. We&#8217;ll add <strong>Radio<\/strong>\u00a0attribute type for Size attribute.\r\n\r\nTo set <strong>Radio<\/strong> attribute type to Image attribute, click on <strong>Edit<\/strong>.\r\n\r\n<a href=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2018\/05\/Radio-10.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-5676\" src=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2018\/05\/Radio-10.png\" alt=\"\" width=\"1003\" height=\"102\" \/><\/a>\r\n\r\n&nbsp;\r\n\r\nAfter selecting edit link, it will open attribute editing panel. Select <strong>Radio<\/strong>\u00a0Type from the type dropdown.\r\n\r\n<a href=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2018\/05\/Radio-08.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-5677\" src=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2018\/05\/Radio-08.png\" alt=\"\" width=\"1000\" height=\"661\" \/><\/a>\r\n\r\nWhen attribute type selection is completed, get back to the attribute list page. The Attribute list would look like the following image. Now <strong>Size Attribute<\/strong> is showing <strong>Radio type<\/strong> instead of default <strong>Select<\/strong> type.\r\n\r\n<a href=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2018\/05\/Radio-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-5678\" src=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2018\/05\/Radio-1.png\" alt=\"\" width=\"1007\" height=\"105\" \/><\/a>\r\n\r\nAfter selecting attribute type, the frontend of the product would look like the following screenshot. Don&#8217;t be panic, if you find your attribute variations weird. It happens because you haven&#8217;t set any image for variations yet.\r\n\r\n<a href=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2018\/05\/Radio-07.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-5679\" src=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2018\/05\/Radio-07.png\" alt=\"\" width=\"1009\" height=\"549\" \/><\/a>\r\n\r\n<hr \/>\r\n\r\n<span id=\"manual-radio\" style=\"color: #fff;\">.<\/span>\r\n<h3>How To Create Radio Variation Swatches From Manually Created Attributes<\/h3>\r\n<iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/7WbxBZWtD2k?rel=0\" width=\"1080\" height=\"420\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe>\r\n<p style=\"text-align: center;\"><strong>Video Tutorial<\/strong><\/p>\r\n\r\n\r\n<hr \/>\r\n\r\nStep O1: Pro Plugin Setup\r\nIf you have variable products in your store and don&#8217;t have product attributes created globally, it means you have created attribute and it&#8217;s variations manually. To convert manually created attribute variations into image swatches, make sure you have premium version of WooCommerce Variation Swatches created.\r\n\r\n[button style=&#8221;rounded-btn&#8221; text=&#8221;Live Demo&#8221; button_link=&#8221;https:\/\/demo.getwooplugins.com\/woocommerce-variation-swatches\/product\/cap-2\/?radio-doc-demo&#8221; link_target=&#8221;_blank&#8221; type=&#8221;medium-btn&#8221; bg_color=&#8221;#333333&#8243; text_color=&#8221;#FFFFFF&#8221;] [button style=&#8221;rounded-btn&#8221; text=&#8221;Upgrade to Premium Version&#8221; button_link=&#8221;http:\/\/bit.ly\/label-manual-doc-pro&#8221; link_target=&#8221;_blank&#8221; type=&#8221;medium-btn&#8221; bg_color=&#8221;#56bfd4&#8243; text_color=&#8221;#FFFFFF&#8221;]\r\n<h4>Step O2: Change Manual Attribute Type<\/h4>\r\nIf you head to your Attributes tab\u00a0 from product data\u00a0inside your product edit mode,\u00a0and found variations are separated by pipe sign like the following screen. It means you have created\u00a0 variation manually.&#8217;\r\n\r\n<a href=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2018\/05\/label-05.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5672\" src=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2018\/05\/label-05.png\" alt=\"\" width=\"2312\" height=\"710\" \/><\/a>\r\n\r\nTo Convert these manually created attribute variations, head to Swatches Settings tab, and select <strong>Radio<\/strong> type from Select (Default) Dropdown.\r\n\r\n<a href=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2018\/05\/Radio-11.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter  wp-image-5681\" src=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2018\/05\/Radio-11.png\" alt=\"\" width=\"1006\" height=\"305\" \/><\/a>\r\n\r\nAfter selecting attribute type, the frontend of the product would look like the following screenshot.\r\n\r\n<a href=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2018\/05\/Radio-07.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-5679\" src=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2018\/05\/Radio-07.png\" alt=\"\" width=\"1009\" height=\"549\" \/><\/a>\r\n\r\n<span id=\"scratch-radio\" style=\"color: #fff;\">.<\/span>\r\n<h3>How To Create Radio Variation Swatches From Scratch<\/h3>\r\n<iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/seQ8skXDyPE?rel=0\" width=\"1080\" height=\"420\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe>\r\n<p style=\"text-align: center;\"><strong>Video Tutorial<\/strong><\/p>\r\n\r\n<h4>Step 01: Create Attribute<\/h4>\r\nAt first, we have to create <strong>radio<\/strong> attribute and its variations globally. To create radio attribute globally, navigate to <strong>Products &gt;&gt; Attributes<\/strong>. As we\u2019ll create radio attribute for our product. Fill the <strong>name<\/strong> field with your desired attribute name. In this tutorial, I\u2019ve termed attribute name: <strong>Size<\/strong>.\r\n\r\nYou can leave Slug field empty. It automatically generates the slug for the attribute. From the <strong>Type<\/strong> dropdown select <strong>radio<\/strong> attribute type. When the mandatory fields are filled, select <strong>Add Attribute<\/strong> button.\r\n\r\n<a href=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2018\/05\/radio-attribute.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-648 aligncenter\" src=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2018\/05\/radio-attribute-1024x998.png\" alt=\"\" width=\"1024\" height=\"998\" \/><\/a>\r\n\r\nAfter creating attribute, you will notice a list is created in the right side. Check the following screenshot.\r\n\r\n<a href=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2018\/05\/radio-size.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-650\" src=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2018\/05\/radio-size-1024x107.png\" alt=\"\" width=\"1024\" height=\"107\" \/><\/a>\r\n<h4>Step 02: Create Attribute Variations<\/h4>\r\nThe more variation you would add, they would get added to this list. When an attribute is created, we need to create attribute variations. To create product variations, click on the <strong>Configure terms<\/strong> from the attribute list.\r\n\r\n<a href=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2018\/05\/radio-size-configure.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-651\" src=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2018\/05\/radio-size-configure-1024x107.png\" alt=\"\" width=\"1024\" height=\"107\" \/><\/a>\r\n\r\nAs we have created a <strong>radio<\/strong> attribute. We\u2019ll add label title as variations inside the button attribute. In this tutorial, we\u2019ll add <strong>Small<\/strong>, <strong>Medium<\/strong>, and <strong>Large<\/strong>\u00a0variations. To create variations inside <strong>radio<\/strong> attribute. Fill the <strong>Name<\/strong> field with your desired variation name, leave the slug field empty and save the setting each time.\r\n\r\n<a href=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2018\/05\/list-attr.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-599\" src=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2018\/05\/list-attr-1024x313.png\" alt=\"\" width=\"1024\" height=\"313\" \/><\/a>\r\n<h4>Step 03: Enable Attribute Variation in Variable Product<\/h4>\r\nIt\u2019s time to enable <strong>radio<\/strong> swatches inside a variable product. To enable radio swatches in your desired product. Get into your desired product edit mode. Make sure you have <strong>variable product<\/strong> selected from <strong>Product Data<\/strong>.\r\n\r\n<a href=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2018\/05\/product-data.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-598\" src=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2018\/05\/product-data-1024x384.png\" alt=\"\" width=\"1024\" height=\"384\" \/><\/a>\r\n\r\nAfter selecting the <strong>Variable product<\/strong> from <strong>Product data<\/strong> dropdown, head to the <strong>Attributes<\/strong> Tab. Click on <strong>Custom product attribute<\/strong> dropdown. In this dropdown, you can see all your globally created attributes. As we\u2019ve only created a <strong>Size<\/strong> attribute, it\u2019s now showing <strong>Size<\/strong> attribute.\r\n\r\n<a href=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2018\/05\/size.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-600\" src=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2018\/05\/size-1024x462.png\" alt=\"\" width=\"1024\" height=\"462\" \/><\/a>\r\n\r\nNow select the <strong>Size<\/strong> attribute and click on <strong>Add<\/strong>. You can see the following screens appears afterward.\r\n\r\n<a href=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2018\/05\/size-attribute.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-601\" src=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2018\/05\/size-attribute-1024x264.png\" alt=\"\" width=\"1024\" height=\"264\" \/><\/a>\r\n\r\nIf you want to select all available variations of the <strong>size<\/strong> attribute, click on <strong>Select all<\/strong> button. If you want to deselect all selected variations at once. Click on <strong>Select none<\/strong> button. Add all variations selecting <strong>Select All<\/strong> button, checked <strong>Used for variations<\/strong> settings and click on <strong>Save Attributes<\/strong> button. Check the following screenshot for guideline.\r\n\r\n<a href=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2018\/05\/variation-swatches.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-602\" src=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2018\/05\/variation-swatches-1024x262.png\" alt=\"\" width=\"1024\" height=\"262\" \/><\/a>\r\n\r\nIn this tutorial, I am going to select <strong>Create variation from all attributes<\/strong> and click <strong>Go<\/strong> button. It\u2019ll add all available variations like the following.\r\n\r\nYou can see the above image that <strong>Small<\/strong>, <strong>Medium<\/strong>, and <strong>Large<\/strong> image variations are there. From this screen you can add variation image, variation price, and other variation specific details. When you have done with adding all your required details in each variation, click the <strong>Save Changes<\/strong> button.\r\n\r\nRemember! Don\u2019t forget to add the price in each variation, otherwise, variations won\u2019t be visible on the product frontend.","protected":false},"excerpt":{"rendered":"<p>Frontend Preview How To Create To Radio Variation Swatches For Global Attributes How To Create To Radio Variation Swatches For Manual Attributes How To Create To Radio Variation Swatches From Scratch . How To Create Radio Variation Swatches For Globally Created Attributes Video Tutorial Head to the Products &gt;&gt; Attributes. All existing global attributes are &hellip;<\/p>\n<p class=\"read-more\"> <a class=\"\" href=\"https:\/\/demo.getwooplugins.com\/woocommerce-variation-swatches\/product-details\/radio-variation-swatches\/\"> <span class=\"screen-reader-text\">Radio Variation Swatches<\/span> Read More &raquo;<\/a><\/p>\n","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":"disabled","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\/555"}],"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=555"}],"version-history":[{"count":5,"href":"https:\/\/demo.getwooplugins.com\/woocommerce-variation-swatches\/product-details\/wp-json\/wp\/v2\/pages\/555\/revisions"}],"predecessor-version":[{"id":744,"href":"https:\/\/demo.getwooplugins.com\/woocommerce-variation-swatches\/product-details\/wp-json\/wp\/v2\/pages\/555\/revisions\/744"}],"wp:attachment":[{"href":"https:\/\/demo.getwooplugins.com\/woocommerce-variation-swatches\/product-details\/wp-json\/wp\/v2\/media?parent=555"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}