{"id":5394,"date":"2022-10-12T09:58:03","date_gmt":"2022-10-12T09:58:03","guid":{"rendered":"https:\/\/webnus.net\/shoppress\/helpdesk\/?p=5394"},"modified":"2024-01-22T09:18:17","modified_gmt":"2024-01-22T09:18:17","slug":"woocommerce-variation-swatches","status":"publish","type":"post","link":"https:\/\/webnus.net\/shoppress\/helpdesk\/woocommerce-variation-swatches\/","title":{"rendered":"WooCommerce Variation Swatches"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_78 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/webnus.net\/shoppress\/helpdesk\/woocommerce-variation-swatches\/#Beginners_Guide_What_are_WooCommerce_Variation_Swatches\" >Beginners Guide: What are WooCommerce Variation Swatches?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/webnus.net\/shoppress\/helpdesk\/woocommerce-variation-swatches\/#How_to_Use_Woocommerce_Variation_Swatches\" >How to Use Woocommerce Variation Swatches?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/webnus.net\/shoppress\/helpdesk\/woocommerce-variation-swatches\/#WooCommerce_Variation_Swatches_Color_Type\" >WooCommerce Variation Swatches Color Type<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/webnus.net\/shoppress\/helpdesk\/woocommerce-variation-swatches\/#WooCommerce_Variation_Swatches_ButtonLabel_Type\" >WooCommerce Variation Swatches Button\/Label Type<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/webnus.net\/shoppress\/helpdesk\/woocommerce-variation-swatches\/#WooCommerce_Variation_Swatches_Image_Type\" >WooCommerce Variation Swatches Image Type<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/webnus.net\/shoppress\/helpdesk\/woocommerce-variation-swatches\/#Practical_Solutions\" >Practical Solutions<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/webnus.net\/shoppress\/helpdesk\/woocommerce-variation-swatches\/#How_to_Add_Color_Variations_in_WooCommerce_Products\" >How to Add Color Variations in WooCommerce Products?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/webnus.net\/shoppress\/helpdesk\/woocommerce-variation-swatches\/#How_Can_I_Sell_Shoes_in_Different_Sizes_in_WooCommerce\" >How Can I Sell Shoes in Different Sizes in WooCommerce?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/webnus.net\/shoppress\/helpdesk\/woocommerce-variation-swatches\/#How_Can_I_Define_an_Individual_Price_for_Each_Color_or_Variation\" >How Can I Define an Individual Price for Each Color or Variation?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/webnus.net\/shoppress\/helpdesk\/woocommerce-variation-swatches\/#Is_It_Possible_to_Add_Separate_Images_for_Each_Color\" >Is It Possible to Add Separate Images for Each Color?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/webnus.net\/shoppress\/helpdesk\/woocommerce-variation-swatches\/#How_Can_I_Add_Descriptions_for_Each_Variation\" >How Can I Add Descriptions for Each Variation?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/webnus.net\/shoppress\/helpdesk\/woocommerce-variation-swatches\/#How_to_Turn_the_Default_WooCommerce_Variation_Swatches_Into_Buttons\" >How to Turn the Default WooCommerce Variation Swatches Into Buttons?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/webnus.net\/shoppress\/helpdesk\/woocommerce-variation-swatches\/#How_to_Display_the_Unavailability_of_A_Variation_Swatch\" >How to Display the Unavailability of A Variation Swatch?<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n\n<p>The purpose of intuitive <a href=\"http:\/\/woocommerce.com\" target=\"_blank\" rel=\"noreferrer noopener\">Woocommerce<\/a> Variation Swatches is to enhance the user experience by displaying product variants, colors, buttons, and photos. <\/p>\n\n\n\n<p>Instead of the regular WooCommerce Variation Swatches styles, you can add a beautiful style for your swatches that displays all the variants appropriately next to each other.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Beginners_Guide_What_are_WooCommerce_Variation_Swatches\"><\/span>Beginners Guide: What are WooCommerce Variation Swatches?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>WooCommerce Variation Swatches provide an excellent solution for new clothing store owners who want to showcase their products of different types and colors in a visually appealing and user-friendly manner. <\/p>\n\n\n\n<p>This feature allows customers to easily view and select product variations, such as <strong>sizes<\/strong>, <strong>styles<\/strong>, and <strong>colors<\/strong>, directly from the product page.<\/p>\n\n\n\n<p>By implementing WooCommerce Variation Swatches, online shops like clothing store owners can enhance the shopping experience for their customers. <\/p>\n\n\n\n<p>Instead of relying solely on dropdown menus or text-based options, the swatches display product attributes as <strong>attractive visual representations<\/strong>. <\/p>\n\n\n\n<p>This allows shoppers to quickly and intuitively navigate through the available options, making their purchasing process smoother and more enjoyable.<\/p>\n\n\n\n<p>For instance, a clothing store owner can use WooCommerce Variation Swatches to showcase different colors and styles of a particular dress. <\/p>\n\n\n\n<p>By displaying color options as swatches, customers can instantly see the available choices and make a selection based on their preferences.<\/p>\n\n\n\n<p>This makes the product page look better and helps customers make decisions easier.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_to_Use_Woocommerce_Variation_Swatches\"><\/span>How to Use Woocommerce Variation Swatches?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>To activate the WooCommerce Variation Swatches Option, please head to the <strong>ShopPress menu > Modules<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/10\/variation-swatches-01.png\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1822\" height=\"1298\" src=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/10\/variation-swatches-01.png\" alt=\"WooCommerce Variation Swatches\" class=\"wp-image-6457\" srcset=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/10\/variation-swatches-01.png 1822w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/10\/variation-swatches-01-300x214.png 300w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/10\/variation-swatches-01-1024x730.png 1024w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/10\/variation-swatches-01-768x547.png 768w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/10\/variation-swatches-01-1536x1094.png 1536w\" sizes=\"(max-width: 1822px) 100vw, 1822px\" \/><\/a><\/figure>\n\n\n\n<p>To adjust options based on your preferences, simply click on the <strong>Config <\/strong>button<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><a href=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/variation-swatches-02.png\"><img decoding=\"async\" width=\"1806\" height=\"912\" src=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/variation-swatches-02.png\" alt=\"WooCommerce Variation Swatches\" class=\"wp-image-6459\" style=\"width:undefinedpx\" srcset=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/variation-swatches-02.png 1806w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/variation-swatches-02-300x151.png 300w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/variation-swatches-02-1024x517.png 1024w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/variation-swatches-02-768x388.png 768w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/variation-swatches-02-1536x776.png 1536w\" sizes=\"(max-width: 1806px) 100vw, 1806px\" \/><\/a><\/figure>\n\n\n\n<p>Then, navigate to the product you want to apply the variation swatch on.<\/p>\n\n\n\n<p>In the <strong>Attributes <\/strong>tab underneath the <strong>Product Data<\/strong> section, add a new attribute and set a new name and value for it.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/10\/variation-swatch-02.png\"><img decoding=\"async\" width=\"1904\" height=\"932\" src=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/10\/variation-swatch-02.png\" alt=\"Variation Swatch\" class=\"wp-image-5396\" srcset=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/10\/variation-swatch-02.png 1904w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/10\/variation-swatch-02-300x147.png 300w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/10\/variation-swatch-02-1024x501.png 1024w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/10\/variation-swatch-02-768x376.png 768w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/10\/variation-swatch-02-1536x752.png 1536w\" sizes=\"(max-width: 1904px) 100vw, 1904px\" \/><\/a><\/figure>\n\n\n\n<p><strong>Note: <\/strong>Make sure to check the \u201c<strong>Used for variations<\/strong>\u201d option and Separate the values with the \u201c|\u201d sign.<\/p>\n\n\n\n<p>Now, navigate to <strong>Swatches Settings<\/strong> and choose the swatch type that you want to use for the product. <\/p>\n\n\n\n<p>You can choose between Color, Button\/Label, and Image.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"WooCommerce_Variation_Swatches_Color_Type\"><\/span><strong>WooCommerce Variation Swatches Color Type<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>You can use <strong>Variation Swatches Color Type<\/strong> to sell products with different colors<strong>.<\/strong><\/p>\n\n\n\n<p>First, add your preferred color in the <strong>Attributes <\/strong>tab.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/10\/variation-swatch-04.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1502\" height=\"438\" src=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/10\/variation-swatch-04.png\" alt=\"Variation Swatches Color Type\" class=\"wp-image-5398\" srcset=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/10\/variation-swatch-04.png 1502w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/10\/variation-swatch-04-300x87.png 300w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/10\/variation-swatch-04-1024x299.png 1024w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/10\/variation-swatch-04-768x224.png 768w\" sizes=\"(max-width: 1502px) 100vw, 1502px\" \/><\/a><\/figure>\n\n\n\n<p>Then, choose the color type, then you can specify the color for each product item.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/10\/variation-swatch-03.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1886\" height=\"1338\" src=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/10\/variation-swatch-03.png\" alt=\"Variation Swatches Color Type\" class=\"wp-image-5397\" srcset=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/10\/variation-swatch-03.png 1886w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/10\/variation-swatch-03-300x213.png 300w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/10\/variation-swatch-03-1024x726.png 1024w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/10\/variation-swatch-03-768x545.png 768w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/10\/variation-swatch-03-1536x1090.png 1536w\" sizes=\"(max-width: 1886px) 100vw, 1886px\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default\"><a href=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/10\/variation-swatch-08.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1999\" height=\"1064\" src=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/10\/variation-swatch-08.png\" alt=\"Variation Swatches Color Type\" class=\"wp-image-5402\" srcset=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/10\/variation-swatch-08.png 1999w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/10\/variation-swatch-08-300x160.png 300w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/10\/variation-swatch-08-1024x545.png 1024w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/10\/variation-swatch-08-768x409.png 768w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/10\/variation-swatch-08-1536x818.png 1536w\" sizes=\"(max-width: 1999px) 100vw, 1999px\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"WooCommerce_Variation_Swatches_ButtonLabel_Type\"><\/span><strong>WooCommerce Variation Swatches Button\/Label Type<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>You can show buttons or labels for your product variations by choosing the <strong>Button\/Label<\/strong> type.<\/p>\n\n\n\n<p>Choose the <strong>Button\/Label<\/strong> swatch type and you can see the values you entered on the attribute tab will appear here. <\/p>\n\n\n\n<p>Also, you can set the label text for each value.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/10\/variation-swatch-05.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1898\" height=\"1286\" src=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/10\/variation-swatch-05.png\" alt=\"Variation Swatches Button\/Label Type\" class=\"wp-image-5399\" srcset=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/10\/variation-swatch-05.png 1898w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/10\/variation-swatch-05-300x203.png 300w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/10\/variation-swatch-05-1024x694.png 1024w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/10\/variation-swatch-05-768x520.png 768w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/10\/variation-swatch-05-1536x1041.png 1536w\" sizes=\"(max-width: 1898px) 100vw, 1898px\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/10\/variation-swatch-09.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1999\" height=\"1060\" src=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/10\/variation-swatch-09.png\" alt=\"Variation Swatches Button\/Label Type\" class=\"wp-image-5403\" srcset=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/10\/variation-swatch-09.png 1999w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/10\/variation-swatch-09-300x159.png 300w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/10\/variation-swatch-09-1024x543.png 1024w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/10\/variation-swatch-09-768x407.png 768w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/10\/variation-swatch-09-1536x814.png 1536w\" sizes=\"(max-width: 1999px) 100vw, 1999px\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"WooCommerce_Variation_Swatches_Image_Type\"><\/span><strong>WooCommerce Variation Swatches Image Type<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>You can use images for your variations by choosing the swatch image type. <\/p>\n\n\n\n<p>As you can see in the screenshot below, you can upload your desired image for every value to be displayed on the single product page.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/10\/variation-swatch-06.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1892\" height=\"1290\" src=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/10\/variation-swatch-06.png\" alt=\"Woocommerce Variation Swatches\" class=\"wp-image-5400\" srcset=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/10\/variation-swatch-06.png 1892w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/10\/variation-swatch-06-300x205.png 300w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/10\/variation-swatch-06-1024x698.png 1024w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/10\/variation-swatch-06-768x524.png 768w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/10\/variation-swatch-06-1536x1047.png 1536w\" sizes=\"(max-width: 1892px) 100vw, 1892px\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/10\/variation-swatch-07.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1999\" height=\"1258\" src=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/10\/variation-swatch-07.png\" alt=\"Woocommerce Variation Swatches\" class=\"wp-image-5401\" srcset=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/10\/variation-swatch-07.png 1999w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/10\/variation-swatch-07-300x189.png 300w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/10\/variation-swatch-07-1024x644.png 1024w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/10\/variation-swatch-07-768x483.png 768w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/10\/variation-swatch-07-1536x967.png 1536w\" sizes=\"(max-width: 1999px) 100vw, 1999px\" \/><\/a><\/figure>\n\n\n\n<p>Finally, update your product page and you can see the swatch has been applied to the product on the single product page.<\/p>\n\n\n\n<div class=\"wp-block-stackable-spacer stk-block-spacer stk--no-padding stk-block stk-fc19864\" data-block-id=\"fc19864\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Practical_Solutions\"><\/span>Practical Solutions<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_to_Add_Color_Variations_in_WooCommerce_Products\"><\/span>How to Add Color Variations in WooCommerce Products?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Through the ShopPress plugin, you can define individual colors for each type of your product. <\/p>\n\n\n\n<p>For example, for a t-shirt that comes in various colors, you can showcase your preferred colors to the end user. <\/p>\n\n\n\n<p>To achieve this, follow the steps below:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Start by navigating to the <strong>ShopPress <\/strong>menu.<\/li>\n\n\n\n<li>Enable the &#8220;<strong>WooCommerce Variation Swatches<\/strong>&#8221; module from the <strong>Modules<\/strong> section.<\/li>\n\n\n\n<li>Proceed to the WordPress menu and go to <strong>Products &gt; Attributes<\/strong>.<\/li>\n\n\n\n<li>Create a new attribute named &#8220;<strong>Color<\/strong>.&#8221;<\/li>\n\n\n\n<li>In the Type field, input &#8220;<strong>Color<\/strong>,&#8221; and click on the &#8220;<strong>Add attribute<\/strong>&#8221; button.<\/li>\n<\/ol>\n\n\n\n<p>These steps will enable you to set up color variations for your products using the ShopPress plugin.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"540\" src=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-1024x540.png\" alt=\"\" class=\"wp-image-6364\" srcset=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-1024x540.png 1024w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-300x158.png 300w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-768x405.png 768w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-1536x810.png 1536w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Now under the Terms tab, click on <strong>Configure Terms<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"147\" src=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-1-1024x147.png\" alt=\"\" class=\"wp-image-6365\" srcset=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-1-1024x147.png 1024w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-1-300x43.png 300w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-1-768x110.png 768w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-1-1536x221.png 1536w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-1.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Here you can select countless colors for your products. Just select the name and the <strong>HEX code<\/strong> and click on <strong>Add New Color<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"856\" height=\"1024\" src=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-2-856x1024.png\" alt=\"\" class=\"wp-image-6366\" srcset=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-2-856x1024.png 856w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-2-251x300.png 251w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-2-768x919.png 768w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-2.png 886w\" sizes=\"(max-width: 856px) 100vw, 856px\" \/><\/figure>\n\n\n\n<p>The selected colors can now be found in the <strong>Attributes <\/strong>menu.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"469\" src=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-3-1024x469.png\" alt=\"\" class=\"wp-image-6367\" srcset=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-3-1024x469.png 1024w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-3-300x137.png 300w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-3-768x352.png 768w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-3-1536x704.png 1536w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-3.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Navigate to the product page to which you intend to add colors and select &#8216;<strong>Variable Product<\/strong>&#8216; from the &#8216;<strong>Product Data<\/strong>&#8216; tab.<\/li>\n\n\n\n<li>In the subsequent step, choose the color attribute that you have previously added.<\/li>\n\n\n\n<li>Select the desired colors for your product in the &#8216;<strong>Value<\/strong>&#8216; section, and finally, click the &#8216;<strong>Save Attributes<\/strong>&#8216; button.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"385\" src=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-4-1024x385.png\" alt=\"\" class=\"wp-image-6368\" srcset=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-4-1024x385.png 1024w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-4-300x113.png 300w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-4-768x288.png 768w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-4-1536x577.png 1536w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-4.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Now, from the Variations menu, you have the option to add all (by clicking on the &#8216;<strong>Regenerate Variations<\/strong>&#8216; button) or a specific number (by clicking on &#8216;<strong>Add Manually<\/strong>&#8216;) of your desired colors to the product.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"522\" src=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-5-1024x522.png\" alt=\"\" class=\"wp-image-6369\" style=\"width:840px;height:auto\" srcset=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-5-1024x522.png 1024w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-5-300x153.png 300w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-5-768x392.png 768w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-5-1536x783.png 1536w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-5.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong>Note: <\/strong>Please ensure that you have defined a price for each variation and that it is in stock to display that variation.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"582\" src=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-6-1024x582.png\" alt=\"\" class=\"wp-image-6370\" srcset=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-6-1024x582.png 1024w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-6-300x170.png 300w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-6-768x436.png 768w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-6-1536x873.png 1536w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-6.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Now, refresh the page once, and you will observe that the colors are displayed on the frontend section of your website.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"456\" src=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-7-1024x456.png\" alt=\"\" class=\"wp-image-6371\" srcset=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-7-1024x456.png 1024w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-7-300x134.png 300w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-7-768x342.png 768w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-7-1536x684.png 1536w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-7.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_Can_I_Sell_Shoes_in_Different_Sizes_in_WooCommerce\"><\/span>How Can I Sell Shoes in Different Sizes in WooCommerce?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>For selling shoes or any other product with different sizes, we follow a similar process as outlined above, with the difference that, during the attribute definition step, we use &#8216;<strong>Button\/Label<\/strong>&#8216; instead of typing the color\u2019s name.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"726\" height=\"1024\" src=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-8-726x1024.png\" alt=\"\" class=\"wp-image-6372\" srcset=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-8-726x1024.png 726w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-8-213x300.png 213w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-8-768x1083.png 768w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-8.png 888w\" sizes=\"(max-width: 726px) 100vw, 726px\" \/><\/figure>\n\n\n\n<p>Next, add all the desired sizes to the &#8216;<strong>Configure terms<\/strong>&#8216; section.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"499\" src=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-9-1024x499.png\" alt=\"\" class=\"wp-image-6373\" srcset=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-9-1024x499.png 1024w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-9-300x146.png 300w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-9-768x374.png 768w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-9-1536x749.png 1536w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-9.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Now, similar to colors, you can add all (by clicking on the &#8216;<strong>Regenerate Variations<\/strong>&#8216; button) or a specific number (by clicking on &#8216;<strong>Add Manually<\/strong>&#8216;) of your desired sizes to the product from the Variations menu.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"371\" src=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-10-1024x371.png\" alt=\"\" class=\"wp-image-6374\" srcset=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-10-1024x371.png 1024w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-10-300x109.png 300w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-10-768x278.png 768w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-10-1536x557.png 1536w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-10.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong>Note: <\/strong>Please ensure that you have defined a price for each variation and that it is in stock to display that variation.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"284\" src=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/10\/variation_swatches_size.png\" alt=\"variation swatches size\" class=\"wp-image-6375\" srcset=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/10\/variation_swatches_size.png 624w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/10\/variation_swatches_size-300x137.png 300w\" sizes=\"(max-width: 624px) 100vw, 624px\" \/><\/figure>\n\n\n\n<p>Now, refresh the page once, and you will observe that the sizes are displayed as buttons on the frontend of your website.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_Can_I_Define_an_Individual_Price_for_Each_Color_or_Variation\"><\/span>How Can I Define an Individual Price for Each Color or Variation?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>To define an individual price for each color or variation of a product, follow these steps:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>After defining the colors on the <strong>Products &gt; Attributes<\/strong> page, proceed to the product editing page.<\/li>\n\n\n\n<li>Navigate to the &#8216;<strong>Product Data<\/strong>&#8216; tab and enter the &#8216;<strong>Attributes<\/strong>&#8216; menu.<\/li>\n\n\n\n<li>Add your desired colors (similar to question number 1).<\/li>\n\n\n\n<li>From the &#8216;<strong>Variations<\/strong>&#8216; menu, add all (by clicking on the &#8216;<strong>Regenerate Variations<\/strong>&#8216; button) or a specific number (by clicking on &#8216;<strong>Add Manually<\/strong>&#8216;) of your desired colors to the product.<\/li>\n\n\n\n<li>By clicking on each Variation, you can now customize the price for that specific Variation (in this case, color).<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"583\" src=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-11-1024x583.png\" alt=\"\" class=\"wp-image-6376\" srcset=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-11-1024x583.png 1024w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-11-300x171.png 300w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-11-768x437.png 768w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-11-1536x875.png 1536w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-11.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Is_It_Possible_to_Add_Separate_Images_for_Each_Color\"><\/span>Is It Possible to Add Separate Images for Each Color?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>To define a separate image for each product, as with the previous methods, you first need to add each image as an attribute on the <strong>Products &gt; Attributes<\/strong> page. <\/p>\n\n\n\n<p>In this example, we are defining a separate image for each color of the product. On the <strong>Products &gt; Attributes<\/strong> page, choose &#8216;<strong>Image<\/strong>&#8216; as the attribute type.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"729\" height=\"1024\" src=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-12-729x1024.png\" alt=\"\" class=\"wp-image-6377\" srcset=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-12-729x1024.png 729w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-12-213x300.png 213w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-12-768x1079.png 768w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-12.png 898w\" sizes=\"(max-width: 729px) 100vw, 729px\" \/><\/figure>\n\n\n\n<p>Now, add all the desired images for your product to the &#8216;<strong>Configure terms<\/strong>&#8216; section.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"787\" src=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-13-1024x787.png\" alt=\"\" class=\"wp-image-6378\" srcset=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-13-1024x787.png 1024w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-13-300x230.png 300w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-13-768x590.png 768w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-13-1536x1180.png 1536w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-13.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>In this way, you add all the images for various colors of the product.<\/p>\n\n\n\n<p>Now, go to the product page to which you want to add the images and select &#8216;<strong>Variable Product<\/strong>&#8216; from the &#8216;<strong>Product Data<\/strong>&#8216; tab. <\/p>\n\n\n\n<p>In the next step, choose the image attribute that you have previously added. <\/p>\n\n\n\n<p>Add the desired images for your product in the &#8216;<strong>Value<\/strong>&#8216; section, and finally, click the &#8216;<strong>Save Attributes<\/strong>&#8216; button.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"387\" src=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-14-1024x387.png\" alt=\"\" class=\"wp-image-6379\" srcset=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-14-1024x387.png 1024w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-14-300x113.png 300w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-14-768x290.png 768w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-14-1536x580.png 1536w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-14.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Now, from the Variations menu, you can add all (by clicking on the &#8216;<strong>Regenerate Variations<\/strong>&#8216; button) or a specific number (by clicking on &#8216;<strong>Add Manually<\/strong>&#8216;) of your desired images to the product. <\/p>\n\n\n\n<p>Then, by clicking on each image variation, you can customize the image for that specific variation.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"493\" src=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-15-1024x493.png\" alt=\"\" class=\"wp-image-6380\" srcset=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-15-1024x493.png 1024w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-15-300x144.png 300w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-15-768x370.png 768w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-15-1536x739.png 1536w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-15.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong>Note: <\/strong>Please ensure that you have defined a price for each variation and that it is in stock to display that variation.<\/p>\n\n\n\n<p>Now, refresh the page once, and you will observe that the images are displayed on the frontend of your website.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"465\" src=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-16-1024x465.png\" alt=\"\" class=\"wp-image-6381\" srcset=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-16-1024x465.png 1024w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-16-300x136.png 300w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-16-768x348.png 768w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-16-1536x697.png 1536w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-16.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_Can_I_Add_Descriptions_for_Each_Variation\"><\/span>How Can I Add Descriptions for Each Variation?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>To define separate descriptions for each color or specific variation of a product, follow these steps:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>After defining the colors on the Attributes page, go to the product editing page.<\/li>\n\n\n\n<li>In the &#8216;<strong>Variable Products<\/strong>&#8216; tab, after adding your desired colors, navigate from the &#8216;<strong>Attributes<\/strong>&#8216; menu to the &#8216;<strong>Variations<\/strong>&#8216; menu.<\/li>\n\n\n\n<li>By clicking on each specific variation of the product, you can enter the desired description for that variation in the &#8216;<strong>Description<\/strong>&#8216; section.<\/li>\n<\/ul>\n\n\n\n<p>This way, you can provide unique descriptions for each color or variation of your product.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"723\" src=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-17-1024x723.png\" alt=\"\" class=\"wp-image-6382\" srcset=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-17-1024x723.png 1024w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-17-300x212.png 300w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-17-768x542.png 768w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-17-1536x1085.png 1536w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-17.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Now, on the product page, you will see that a description has been added to the specific variation.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"321\" src=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/10\/variation_swatches_cloth_color.png\" alt=\"variation swatches cloth color\" class=\"wp-image-6383\" srcset=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/10\/variation_swatches_cloth_color.png 624w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/10\/variation_swatches_cloth_color-300x154.png 300w\" sizes=\"(max-width: 624px) 100vw, 624px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_to_Turn_the_Default_WooCommerce_Variation_Swatches_Into_Buttons\"><\/span>How to Turn the Default WooCommerce Variation Swatches Into Buttons?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>The default display of variations in WooCommerce is in dropdown menus. <\/p>\n\n\n\n<p>To alter this behavior, navigate to the ShopPress menu and activate the &#8220;<strong>Convert Dropdown to Label Swatches<\/strong>&#8221; option under the Modules section. <\/p>\n\n\n\n<p>This will transform all dropdowns into buttons or labels for display.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"588\" src=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-18-1024x588.png\" alt=\"\" class=\"wp-image-6384\" srcset=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-18-1024x588.png 1024w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-18-300x172.png 300w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-18-768x441.png 768w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-18-1536x882.png 1536w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-18.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"283\" src=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/10\/modules_variation_swatches.png\" alt=\"shoppress modules variation swatches\" class=\"wp-image-6388\" srcset=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/10\/modules_variation_swatches.png 624w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/10\/modules_variation_swatches-300x136.png 300w\" sizes=\"(max-width: 624px) 100vw, 624px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_to_Display_the_Unavailability_of_A_Variation_Swatch\"><\/span>How to Display the Unavailability of A Variation Swatch?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>In online stores, a specific variation of a product may encounter unavailability. <\/p>\n\n\n\n<p>To prevent the purchase of such unavailable variations and ensure that users cannot order a product that is out of stock, you can follow these steps:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Navigate to the product editing page.<\/li>\n\n\n\n<li>In the &#8220;<strong>Variable Products<\/strong>&#8221; section, go to the &#8220;<strong>Variations<\/strong>&#8221; menu.<\/li>\n\n\n\n<li>Click on the specific variation you wish to modify.<\/li>\n\n\n\n<li>In the inventory settings, select the &#8220;<strong>Out of Stock<\/strong>&#8221; option.<\/li>\n<\/ol>\n\n\n\n<p>Now, this particular variation of the product becomes unavailable for purchase, and users cannot place orders for it.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"557\" src=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-19-1024x557.png\" alt=\"\" class=\"wp-image-6385\" srcset=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-19-1024x557.png 1024w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-19-300x163.png 300w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-19-768x418.png 768w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-19-1536x835.png 1536w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/image-19.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>The purpose of intuitive Woocommerce Variation Swatches is to enhance the user experience by displaying product variants, colors, buttons, and photos. Instead of the regular WooCommerce Variation Swatches styles, you can add a beautiful style for your swatches that displays all the variants appropriately next to each other. Beginners Guide: What are WooCommerce Variation Swatches? [&hellip;]<\/p>\n","protected":false},"author":9,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[39],"tags":[88],"class_list":["post-5394","post","type-post","status-publish","format-standard","hentry","category-modules","tag-woocommerce-variation-swatches"],"_links":{"self":[{"href":"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-json\/wp\/v2\/posts\/5394","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-json\/wp\/v2\/comments?post=5394"}],"version-history":[{"count":20,"href":"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-json\/wp\/v2\/posts\/5394\/revisions"}],"predecessor-version":[{"id":6460,"href":"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-json\/wp\/v2\/posts\/5394\/revisions\/6460"}],"wp:attachment":[{"href":"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-json\/wp\/v2\/media?parent=5394"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-json\/wp\/v2\/categories?post=5394"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-json\/wp\/v2\/tags?post=5394"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}