{"id":363427,"date":"2023-01-06T10:40:08","date_gmt":"2023-01-06T10:40:08","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=363427"},"modified":"2023-01-06T10:45:15","modified_gmt":"2023-01-06T10:45:15","slug":"how-to-get-a-selected-swatches-option-on-product-page","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/how-to-get-a-selected-swatches-option-on-product-page\/","title":{"rendered":"How to get the selected swatches option on the product page."},"content":{"rendered":"\n<p>Sometimes we need to add some restrictions on selecting the swatches option, so in this blog, we will discuss how to get the selected swatches option with the help of javascript on the catalog product view page.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">&lt;script type=&quot;text\/javascript&quot;&gt;\n   requirejs(&#091;&#039;jquery&#039;,&#039;underscore&#039;], function($, _) {\n     $(window).load(function(){\n       $( &#039;&#091;class*=&quot;swatch-opt&quot;]&#039; ).on(&#039;click&#039;, &#039;.swatch-option&#039;,                                                                                                                                \n         function() {\n            getSelectedSwatchesOptions();\n         });\n     });\n    function getSelectedSwatchesOptions() {\n        var selected_options = {};\n        $(&#039;div.swatch-attribute&#039;).each(function(key, value){\n            var attribute_id    = $(value).attr(&#039;attribute-id&#039;);\n            var option_selected = $(value).attr(&#039;option-selected&#039;);\n            if(!attribute_id || !option_selected) { \n                return;\n            }\n            selected_options&#091;attribute_id] = option_selected;\n        });\n        console.log(selected_options);\n    }\n});\n&lt;\/script&gt;<\/pre>\n\n\n\n<p><strong>Selected two swatches (Size:L, Brand: Puma)<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/01\/Screenshot-from-2023-01-06-15-48-24.png\" alt=\"Screenshot-from-2023-01-06-15-48-24\" class=\"wp-image-363463\" width=\"819\" height=\"563\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/01\/Screenshot-from-2023-01-06-15-48-24.png 531w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/01\/Screenshot-from-2023-01-06-15-48-24-300x206.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/01\/Screenshot-from-2023-01-06-15-48-24-250x172.png 250w\" sizes=\"(max-width: 819px) 100vw, 819px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>After selecting these swatches you will get their selected option id and attribute id in your console like this:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\"> Object\n {\n     35: &quot;11&quot;\n     36: &quot;14&quot;\n }<\/pre>\n\n\n\n<p>Where <strong>35 <\/strong>is the attribute id and <strong>11 <\/strong>is the selected option id, now based on this option and attribute id you can do whatever you want, like restrict add to cart, and many things.<\/p>\n\n\n\n<p>This is all for now, hope this will help. For any doubts, you can comment below<\/p>\n\n\n\n<p>I&#8217;ll be back soon \ud83d\ude09<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Sometimes we need to add some restrictions on selecting the swatches option, so in this blog, we will discuss how to get the selected swatches option with the help of javascript on the catalog product view page. Selected two swatches (Size:L, Brand: Puma) After selecting these swatches you will get their selected option id and <a href=\"https:\/\/webkul.com\/blog\/how-to-get-a-selected-swatches-option-on-product-page\/\">[&#8230;]<\/a><\/p>\n","protected":false},"author":477,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[861,13341,13340,13339],"class_list":["post-363427","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-custom-options","tag-selected-options","tag-selected-swatches","tag-swatches"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to get the selected swatches option on the product page. - Webkul Blog<\/title>\n<meta name=\"description\" content=\"Sometimes we need to add some restrictions on selecting the swatches option, so in this blog, we will discuss how to get the selected swatches option with the help of javascript on the catalog product view 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:\/\/webkul.com\/blog\/how-to-get-a-selected-swatches-option-on-product-page\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to get the selected swatches option on the product page. - Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"Sometimes we need to add some restrictions on selecting the swatches option, so in this blog, we will discuss how to get the selected swatches option with the help of javascript on the catalog product view page\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/how-to-get-a-selected-swatches-option-on-product-page\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-01-06T10:40:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-01-06T10:45:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/01\/Screenshot-from-2023-01-06-15-48-24.png\" \/>\n<meta name=\"author\" content=\"Munassir Alam\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Munassir Alam\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-get-a-selected-swatches-option-on-product-page\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-get-a-selected-swatches-option-on-product-page\/\"},\"author\":{\"name\":\"Munassir Alam\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/013ee40caab80af25e1d0fbf5abd4c29\"},\"headline\":\"How to get the selected swatches option on the product page.\",\"datePublished\":\"2023-01-06T10:40:08+00:00\",\"dateModified\":\"2023-01-06T10:45:15+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-get-a-selected-swatches-option-on-product-page\/\"},\"wordCount\":127,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-get-a-selected-swatches-option-on-product-page\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/01\/Screenshot-from-2023-01-06-15-48-24.png\",\"keywords\":[\"Custom Options\",\"selected options\",\"selected-swatches\",\"Swatches\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/how-to-get-a-selected-swatches-option-on-product-page\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-get-a-selected-swatches-option-on-product-page\/\",\"url\":\"https:\/\/webkul.com\/blog\/how-to-get-a-selected-swatches-option-on-product-page\/\",\"name\":\"How to get the selected swatches option on the product page. - Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-get-a-selected-swatches-option-on-product-page\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-get-a-selected-swatches-option-on-product-page\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/01\/Screenshot-from-2023-01-06-15-48-24.png\",\"datePublished\":\"2023-01-06T10:40:08+00:00\",\"dateModified\":\"2023-01-06T10:45:15+00:00\",\"description\":\"Sometimes we need to add some restrictions on selecting the swatches option, so in this blog, we will discuss how to get the selected swatches option with the help of javascript on the catalog product view page\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-get-a-selected-swatches-option-on-product-page\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/how-to-get-a-selected-swatches-option-on-product-page\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-get-a-selected-swatches-option-on-product-page\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/01\/Screenshot-from-2023-01-06-15-48-24.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/01\/Screenshot-from-2023-01-06-15-48-24.png\",\"width\":531,\"height\":365,\"caption\":\"Screenshot-from-2023-01-06-15-48-24\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-get-a-selected-swatches-option-on-product-page\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to get the selected swatches option on the product page.\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/013ee40caab80af25e1d0fbf5abd4c29\",\"name\":\"Munassir Alam\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d3ee79d09c61b4c07a01a11900c614adf94a7913490a704e03f60d4e346df7a0?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d3ee79d09c61b4c07a01a11900c614adf94a7913490a704e03f60d4e346df7a0?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Munassir Alam\"},\"url\":\"https:\/\/webkul.com\/blog\/author\/munassir-alam632\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to get the selected swatches option on the product page. - Webkul Blog","description":"Sometimes we need to add some restrictions on selecting the swatches option, so in this blog, we will discuss how to get the selected swatches option with the help of javascript on the catalog product view 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:\/\/webkul.com\/blog\/how-to-get-a-selected-swatches-option-on-product-page\/","og_locale":"en_US","og_type":"article","og_title":"How to get the selected swatches option on the product page. - Webkul Blog","og_description":"Sometimes we need to add some restrictions on selecting the swatches option, so in this blog, we will discuss how to get the selected swatches option with the help of javascript on the catalog product view page","og_url":"https:\/\/webkul.com\/blog\/how-to-get-a-selected-swatches-option-on-product-page\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2023-01-06T10:40:08+00:00","article_modified_time":"2023-01-06T10:45:15+00:00","og_image":[{"url":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/01\/Screenshot-from-2023-01-06-15-48-24.png","type":"","width":"","height":""}],"author":"Munassir Alam","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Munassir Alam","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/how-to-get-a-selected-swatches-option-on-product-page\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/how-to-get-a-selected-swatches-option-on-product-page\/"},"author":{"name":"Munassir Alam","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/013ee40caab80af25e1d0fbf5abd4c29"},"headline":"How to get the selected swatches option on the product page.","datePublished":"2023-01-06T10:40:08+00:00","dateModified":"2023-01-06T10:45:15+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/how-to-get-a-selected-swatches-option-on-product-page\/"},"wordCount":127,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/how-to-get-a-selected-swatches-option-on-product-page\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/01\/Screenshot-from-2023-01-06-15-48-24.png","keywords":["Custom Options","selected options","selected-swatches","Swatches"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/how-to-get-a-selected-swatches-option-on-product-page\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/how-to-get-a-selected-swatches-option-on-product-page\/","url":"https:\/\/webkul.com\/blog\/how-to-get-a-selected-swatches-option-on-product-page\/","name":"How to get the selected swatches option on the product page. - Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/how-to-get-a-selected-swatches-option-on-product-page\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/how-to-get-a-selected-swatches-option-on-product-page\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/01\/Screenshot-from-2023-01-06-15-48-24.png","datePublished":"2023-01-06T10:40:08+00:00","dateModified":"2023-01-06T10:45:15+00:00","description":"Sometimes we need to add some restrictions on selecting the swatches option, so in this blog, we will discuss how to get the selected swatches option with the help of javascript on the catalog product view page","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/how-to-get-a-selected-swatches-option-on-product-page\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/how-to-get-a-selected-swatches-option-on-product-page\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/how-to-get-a-selected-swatches-option-on-product-page\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/01\/Screenshot-from-2023-01-06-15-48-24.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/01\/Screenshot-from-2023-01-06-15-48-24.png","width":531,"height":365,"caption":"Screenshot-from-2023-01-06-15-48-24"},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/how-to-get-a-selected-swatches-option-on-product-page\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to get the selected swatches option on the product page."}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/013ee40caab80af25e1d0fbf5abd4c29","name":"Munassir Alam","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d3ee79d09c61b4c07a01a11900c614adf94a7913490a704e03f60d4e346df7a0?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d3ee79d09c61b4c07a01a11900c614adf94a7913490a704e03f60d4e346df7a0?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Munassir Alam"},"url":"https:\/\/webkul.com\/blog\/author\/munassir-alam632\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/363427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/477"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=363427"}],"version-history":[{"count":10,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/363427\/revisions"}],"predecessor-version":[{"id":363499,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/363427\/revisions\/363499"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=363427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=363427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=363427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}