{"id":30441,"date":"2023-06-28T07:34:37","date_gmt":"2023-06-28T05:34:37","guid":{"rendered":"https:\/\/www.markhendriksen.com\/?p=30441"},"modified":"2023-06-28T07:45:50","modified_gmt":"2023-06-28T05:45:50","slug":"how-to-add-variation-swatches-for-woocommerce","status":"publish","type":"post","link":"https:\/\/www.markhendriksen.com\/how-to-add-variation-swatches-for-woocommerce\/","title":{"rendered":"How to add variation swatches for woocommerce"},"content":{"rendered":"\n<p>Variation swatches can be an effective way to keep customers interested and increase sales for an e-commerce store that offers products with multiple variations. By placing product options into swatches, customers can more easily visualize available options. This leads to a smoother shopping experience and higher conversion rates as customers choose their preferred variation.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Table of contents<\/h3>\n\n\n\n<ul class=\"wp-block-list\" id=\"listsquare-listsquare-single\"><li><a href=\"#what-are-variations-swatches\">What are variation swatches?<\/a><\/li><li><a href=\"#install-variations-swatches-plugin\">Install variation swatches for WooCommerce plugin<\/a><\/li><li><a href=\"#color-swatches\">Color swatches on the shop page<\/a><\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"what-are-variations-swatches\">What are variation swatches?<\/h2>\n\n\n\n<p>WooCommerce swatches are an improved way of presenting additional product options on your WooCommerce store. By using product variation swatches rather than the traditional WooCommerce dropdown fields, your product pages become more interactive and user-friendly.<\/p>\n\n\n\n<p>Color swatches provide an enhanced visual representation of available product options, making it easier for customers to distinguish and choose the product characteristics they desire.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"374\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/06\/Variations-swatches-example.jpg\" alt=\"Variations swatches example\" class=\"wp-image-30450\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/06\/Variations-swatches-example.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/06\/Variations-swatches-example-380x209.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/06\/Variations-swatches-example-300x165.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/06\/Variations-swatches-example-510x281.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/06\/Variations-swatches-example-109x60.jpg 109w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/06\/Variations-swatches-example-164x90.jpg 164w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p>Image swatches allow you to display a small image with each variation that customers can click on to select.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"install-variations-swatches-plugin\">Install variation swatches for WooCommerce plugin<\/h2>\n\n\n\n<p>To use variations swatches for your WooCommerce site you have to install a plugin. In WordPress navigate to Plugins > Add New and search for <a href=\"https:\/\/wordpress.org\/plugins\/woo-variation-swatches\/\" target=\"_blank\" rel=\"noreferrer noopener\">Variation Swatches for WooCommerce By Emran Ahmed<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"569\" height=\"340\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/06\/Variation-Swatches-for-WooCommerce-by-Emran-Ahmed.jpg\" alt=\"Variation Swatches for WooCommerce-by Emran Ahmed\" class=\"wp-image-30451\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/06\/Variation-Swatches-for-WooCommerce-by-Emran-Ahmed.jpg 569w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/06\/Variation-Swatches-for-WooCommerce-by-Emran-Ahmed-380x227.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/06\/Variation-Swatches-for-WooCommerce-by-Emran-Ahmed-300x179.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/06\/Variation-Swatches-for-WooCommerce-by-Emran-Ahmed-510x305.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/06\/Variation-Swatches-for-WooCommerce-by-Emran-Ahmed-100x60.jpg 100w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/06\/Variation-Swatches-for-WooCommerce-by-Emran-Ahmed-151x90.jpg 151w\" sizes=\"(max-width: 569px) 100vw, 569px\" \/><\/figure>\n\n\n\n<p>Install and activate this plugin.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Creating WooCommerce attributes<\/h3>\n\n\n\n<p>You need to create <a href=\"https:\/\/www.markhendriksen.com\/how-to-create-woocommerce-product-attributes\/\">WooCommerce attributes<\/a> first in order to use the variations swatches. When you create a new attribute you have some extra options in the Type dropdown field.<\/p>\n\n\n\n<p>Choose Color.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"548\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/06\/Set-type-to-color-in-the-attribute.jpg\" alt=\"Set type to color in the attribute\" class=\"wp-image-30452\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/06\/Set-type-to-color-in-the-attribute.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/06\/Set-type-to-color-in-the-attribute-380x306.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/06\/Set-type-to-color-in-the-attribute-300x242.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/06\/Set-type-to-color-in-the-attribute-510x411.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/06\/Set-type-to-color-in-the-attribute-74x60.jpg 74w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/06\/Set-type-to-color-in-the-attribute-112x90.jpg 112w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p>After you have created the color attribute you have to configure some color terms.<\/p>\n\n\n\n<p>Click on Configure Terms.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"273\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/06\/Create-some-colors.jpg\" alt=\"Create some colors\" class=\"wp-image-30453\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/06\/Create-some-colors.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/06\/Create-some-colors-380x153.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/06\/Create-some-colors-300x120.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/06\/Create-some-colors-510x205.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/06\/Create-some-colors-149x60.jpg 149w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/06\/Create-some-colors-224x90.jpg 224w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p>Here you can create the colors for your attribute.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"275\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/06\/Create-colors-for-your-attribute.jpg\" alt=\"Create colors for your attribute\" class=\"wp-image-30454\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/06\/Create-colors-for-your-attribute.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/06\/Create-colors-for-your-attribute-380x154.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/06\/Create-colors-for-your-attribute-300x121.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/06\/Create-colors-for-your-attribute-510x206.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/06\/Create-colors-for-your-attribute-148x60.jpg 148w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/06\/Create-colors-for-your-attribute-223x90.jpg 223w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p>Your color attribute is now set. To display the color attribute on your product page I recommend following my tutorial &#8220;<a href=\"https:\/\/www.markhendriksen.com\/how-to-create-woocommerce-product-attributes\/\">How to Create WooCommerce Product Attributes<\/a>&#8220;.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Additional variations settings<\/h3>\n\n\n\n<p>If you navigate to GetWooPlugins &gt; Swatches Settings you will find additional settings for this plugin.<\/p>\n\n\n\n<p>I am not going to cover them all in this tutorial, but here you can find them. The options are pretty much straightforward.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"268\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/06\/Variation-Swatches-for-WooCommerce-Settings.jpg\" alt=\"Variation Swatches for WooCommerce Settings\" class=\"wp-image-30455\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/06\/Variation-Swatches-for-WooCommerce-Settings.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/06\/Variation-Swatches-for-WooCommerce-Settings-380x150.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/06\/Variation-Swatches-for-WooCommerce-Settings-300x118.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/06\/Variation-Swatches-for-WooCommerce-Settings-510x201.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/06\/Variation-Swatches-for-WooCommerce-Settings-152x60.jpg 152w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/06\/Variation-Swatches-for-WooCommerce-Settings-228x90.jpg 228w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"color-swatches\">Color swatches on the shop page<\/h2>\n\n\n\n<p>If you want the color swatches to be visible on the products on the shop page then you have to purchase the <a href=\"https:\/\/getwooplugins.com\/plugins\/woocommerce-variation-swatches?ref=24057\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Pro version<\/a> of this plugin.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"382\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/06\/Color-swatches-on-the-home-page.jpg\" alt=\"Color swatches on the home page\" class=\"wp-image-30456\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/06\/Color-swatches-on-the-home-page.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/06\/Color-swatches-on-the-home-page-380x213.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/06\/Color-swatches-on-the-home-page-300x169.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/06\/Color-swatches-on-the-home-page-510x287.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/06\/Color-swatches-on-the-home-page-107x60.jpg 107w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/06\/Color-swatches-on-the-home-page-160x90.jpg 160w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p>With the pro version, you can also change the image by selecting the color. For example, if you choose a blue color then it will change the image.<\/p>\n\n\n\n<p>See the demo site for a live example.<\/p>\n\n\n<div class=\"gb-button-wrapper gb-button-wrapper-3d840ae7\">\n\n<a class=\"gb-button gb-button-72c9ce72 gb-button-text button-for-posts\" href=\"https:\/\/getwooplugins.com\/plugins\/woocommerce-variation-swatches?ref=24057\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">See Demo<\/a>\n\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>If you&#8217;re looking to improve the customer shopping experience on your WooCommerce store, consider adding product variation swatches. By highlighting product attributes in an easy-to-use visual format, customers can quickly find what they&#8217;re looking for and complete their purchase more efficiently.<\/p>\n\n\n\n<p>These swatches can be used in many ways, such as filtering products, displaying options without creating variations, and improving how variation options are displayed on your store. Ultimately, this creates a better user experience and leads to informed purchase decisions.<\/p>\n\n\n\n<p>If you have any questions please let me know in the comments below<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Variation swatches can be an effective way to keep customers interested and increase sales for an e-commerce store that offers products with multiple variations. By placing product options into swatches, customers can more easily visualize available options. This leads to a smoother shopping experience and higher conversion rates as customers choose their preferred variation. Table [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":30459,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[66],"tags":[],"class_list":["post-30441","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-woocommerce-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.1.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Add Variation Swatches for WooCommerce<\/title>\n<meta name=\"description\" content=\"Discover the power of variation swatches for WooCommerce and how it can add color and style to your shop page!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.markhendriksen.com\/how-to-add-variation-swatches-for-woocommerce\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Add Variation Swatches for WooCommerce\" \/>\n<meta property=\"og:description\" content=\"Discover the power of variation swatches for WooCommerce and how it can add color and style to your shop page!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.markhendriksen.com\/how-to-add-variation-swatches-for-woocommerce\/\" \/>\n<meta property=\"og:site_name\" content=\"Mark Hendriksen\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/madebymarkhendriksen\" \/>\n<meta property=\"article:published_time\" content=\"2023-06-28T05:34:37+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-06-28T05:45:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/06\/How-to-add-variation-swatches-for-woocommerce.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"720\" \/>\n\t<meta property=\"og:image:height\" content=\"400\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Mark Hendriksen\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mark Hendriksen\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-add-variation-swatches-for-woocommerce\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-add-variation-swatches-for-woocommerce\/\"},\"author\":{\"name\":\"Mark Hendriksen\",\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/person\/d40c4ac37512479c71b48ad2879fb765\"},\"headline\":\"How to add variation swatches for woocommerce\",\"datePublished\":\"2023-06-28T05:34:37+00:00\",\"dateModified\":\"2023-06-28T05:45:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-add-variation-swatches-for-woocommerce\/\"},\"wordCount\":503,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.markhendriksen.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-add-variation-swatches-for-woocommerce\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/06\/How-to-add-variation-swatches-for-woocommerce.jpg\",\"articleSection\":[\"WooCommerce Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.markhendriksen.com\/how-to-add-variation-swatches-for-woocommerce\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-add-variation-swatches-for-woocommerce\/\",\"url\":\"https:\/\/www.markhendriksen.com\/how-to-add-variation-swatches-for-woocommerce\/\",\"name\":\"How to Add Variation Swatches for WooCommerce\",\"isPartOf\":{\"@id\":\"https:\/\/www.markhendriksen.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-add-variation-swatches-for-woocommerce\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-add-variation-swatches-for-woocommerce\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/06\/How-to-add-variation-swatches-for-woocommerce.jpg\",\"datePublished\":\"2023-06-28T05:34:37+00:00\",\"dateModified\":\"2023-06-28T05:45:50+00:00\",\"description\":\"Discover the power of variation swatches for WooCommerce and how it can add color and style to your shop page!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-add-variation-swatches-for-woocommerce\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.markhendriksen.com\/how-to-add-variation-swatches-for-woocommerce\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-add-variation-swatches-for-woocommerce\/#primaryimage\",\"url\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/06\/How-to-add-variation-swatches-for-woocommerce.jpg\",\"contentUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/06\/How-to-add-variation-swatches-for-woocommerce.jpg\",\"width\":720,\"height\":400,\"caption\":\"How to add variation swatches for woocommerce\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-add-variation-swatches-for-woocommerce\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.markhendriksen.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WooCommerce Tutorials\",\"item\":\"https:\/\/www.markhendriksen.com\/woocommerce-tutorials\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to add variation swatches for woocommerce\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.markhendriksen.com\/#website\",\"url\":\"https:\/\/www.markhendriksen.com\/\",\"name\":\"Mark Hendriksen\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.markhendriksen.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.markhendriksen.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.markhendriksen.com\/#organization\",\"name\":\"Mark Hendriksen\",\"url\":\"https:\/\/www.markhendriksen.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/01\/Mark-Hendriksen-Logo.png\",\"contentUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/01\/Mark-Hendriksen-Logo.png\",\"width\":354,\"height\":40,\"caption\":\"Mark Hendriksen\"},\"image\":{\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/madebymarkhendriksen\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/person\/d40c4ac37512479c71b48ad2879fb765\",\"name\":\"Mark Hendriksen\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/1416c89ed4da57b902960a21b7fa25cb91558d39eff48c8b5017bd4c9bcc59a9?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/1416c89ed4da57b902960a21b7fa25cb91558d39eff48c8b5017bd4c9bcc59a9?s=96&d=mm&r=g\",\"caption\":\"Mark Hendriksen\"},\"url\":\"https:\/\/www.markhendriksen.com\/author\/twopixels\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Add Variation Swatches for WooCommerce","description":"Discover the power of variation swatches for WooCommerce and how it can add color and style to your shop page!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.markhendriksen.com\/how-to-add-variation-swatches-for-woocommerce\/","og_locale":"en_US","og_type":"article","og_title":"How to Add Variation Swatches for WooCommerce","og_description":"Discover the power of variation swatches for WooCommerce and how it can add color and style to your shop page!","og_url":"https:\/\/www.markhendriksen.com\/how-to-add-variation-swatches-for-woocommerce\/","og_site_name":"Mark Hendriksen","article_publisher":"https:\/\/www.facebook.com\/madebymarkhendriksen","article_published_time":"2023-06-28T05:34:37+00:00","article_modified_time":"2023-06-28T05:45:50+00:00","og_image":[{"width":720,"height":400,"url":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/06\/How-to-add-variation-swatches-for-woocommerce.jpg","type":"image\/jpeg"}],"author":"Mark Hendriksen","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Mark Hendriksen","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.markhendriksen.com\/how-to-add-variation-swatches-for-woocommerce\/#article","isPartOf":{"@id":"https:\/\/www.markhendriksen.com\/how-to-add-variation-swatches-for-woocommerce\/"},"author":{"name":"Mark Hendriksen","@id":"https:\/\/www.markhendriksen.com\/#\/schema\/person\/d40c4ac37512479c71b48ad2879fb765"},"headline":"How to add variation swatches for woocommerce","datePublished":"2023-06-28T05:34:37+00:00","dateModified":"2023-06-28T05:45:50+00:00","mainEntityOfPage":{"@id":"https:\/\/www.markhendriksen.com\/how-to-add-variation-swatches-for-woocommerce\/"},"wordCount":503,"commentCount":0,"publisher":{"@id":"https:\/\/www.markhendriksen.com\/#organization"},"image":{"@id":"https:\/\/www.markhendriksen.com\/how-to-add-variation-swatches-for-woocommerce\/#primaryimage"},"thumbnailUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/06\/How-to-add-variation-swatches-for-woocommerce.jpg","articleSection":["WooCommerce Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.markhendriksen.com\/how-to-add-variation-swatches-for-woocommerce\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.markhendriksen.com\/how-to-add-variation-swatches-for-woocommerce\/","url":"https:\/\/www.markhendriksen.com\/how-to-add-variation-swatches-for-woocommerce\/","name":"How to Add Variation Swatches for WooCommerce","isPartOf":{"@id":"https:\/\/www.markhendriksen.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.markhendriksen.com\/how-to-add-variation-swatches-for-woocommerce\/#primaryimage"},"image":{"@id":"https:\/\/www.markhendriksen.com\/how-to-add-variation-swatches-for-woocommerce\/#primaryimage"},"thumbnailUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/06\/How-to-add-variation-swatches-for-woocommerce.jpg","datePublished":"2023-06-28T05:34:37+00:00","dateModified":"2023-06-28T05:45:50+00:00","description":"Discover the power of variation swatches for WooCommerce and how it can add color and style to your shop page!","breadcrumb":{"@id":"https:\/\/www.markhendriksen.com\/how-to-add-variation-swatches-for-woocommerce\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.markhendriksen.com\/how-to-add-variation-swatches-for-woocommerce\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.markhendriksen.com\/how-to-add-variation-swatches-for-woocommerce\/#primaryimage","url":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/06\/How-to-add-variation-swatches-for-woocommerce.jpg","contentUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/06\/How-to-add-variation-swatches-for-woocommerce.jpg","width":720,"height":400,"caption":"How to add variation swatches for woocommerce"},{"@type":"BreadcrumbList","@id":"https:\/\/www.markhendriksen.com\/how-to-add-variation-swatches-for-woocommerce\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.markhendriksen.com\/"},{"@type":"ListItem","position":2,"name":"WooCommerce Tutorials","item":"https:\/\/www.markhendriksen.com\/woocommerce-tutorials\/"},{"@type":"ListItem","position":3,"name":"How to add variation swatches for woocommerce"}]},{"@type":"WebSite","@id":"https:\/\/www.markhendriksen.com\/#website","url":"https:\/\/www.markhendriksen.com\/","name":"Mark Hendriksen","description":"","publisher":{"@id":"https:\/\/www.markhendriksen.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.markhendriksen.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.markhendriksen.com\/#organization","name":"Mark Hendriksen","url":"https:\/\/www.markhendriksen.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.markhendriksen.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/01\/Mark-Hendriksen-Logo.png","contentUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/01\/Mark-Hendriksen-Logo.png","width":354,"height":40,"caption":"Mark Hendriksen"},"image":{"@id":"https:\/\/www.markhendriksen.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/madebymarkhendriksen"]},{"@type":"Person","@id":"https:\/\/www.markhendriksen.com\/#\/schema\/person\/d40c4ac37512479c71b48ad2879fb765","name":"Mark Hendriksen","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.markhendriksen.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/1416c89ed4da57b902960a21b7fa25cb91558d39eff48c8b5017bd4c9bcc59a9?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1416c89ed4da57b902960a21b7fa25cb91558d39eff48c8b5017bd4c9bcc59a9?s=96&d=mm&r=g","caption":"Mark Hendriksen"},"url":"https:\/\/www.markhendriksen.com\/author\/twopixels\/"}]}},"_links":{"self":[{"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/posts\/30441","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/comments?post=30441"}],"version-history":[{"count":3,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/posts\/30441\/revisions"}],"predecessor-version":[{"id":30463,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/posts\/30441\/revisions\/30463"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/media\/30459"}],"wp:attachment":[{"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/media?parent=30441"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/categories?post=30441"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/tags?post=30441"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}