get simple product ID from configurable product in Magento 2<\/strong><\/em>?<\/p>\n\n\n\nIn Magento 2, a configurable product may contain multiple child products with different configurations. Recently, I was working on a custom development, where I wanted to get simple product IDs from configurable products in Magento 2.<\/p>\n\n\n\n
In this post, you\u2019ll learn to get the child product ID of a configurable product by swatch options using jQuery in Magento 2.<\/p>\n\n\n\n
jQuery to Get Child Product ID of Configurable Product in Magento 2<\/h2>\n\n\n\n
You can use jQuery to get a simple product ID from configuration products in Magento 2. It is the same method used by the default Magento 2 to get the page ID of the child product for configurable products.<\/p>\n\n\n\n
Here\u2019s the jQuery:<\/p>\n\n\n\n
$( \".product-options-wrapper .swatch-opt\" ).click(function() {\nselProId = ($('[data-role=swatch-options]').data('mage-SwatchRenderer').getProduct());\nconsole.log(selProId);\n});<\/pre>\n\n\n\nYou can use this jQuery anywhere to get the simple product ID from configurable products.<\/p>\n\n\n\n
It is the same method used by the default Magento 2 to get the page ID of the child product for configurable products. Once the customer selects the required options, the product ID of the simple product is returned.<\/p>\n\n\n\n
Easy, isn\u2019t it?<\/p>\n\n\n\n
Help others find this solution by sharing this post on social media.<\/p>\n\n\n\n
Thank You!<\/p>\n","protected":false},"excerpt":{"rendered":"
Hello, Magento devs, For product-level customization in Magento 2, the product ID acts as a unique identifier for the products. We showed you the complete method…<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34],"tags":[],"class_list":["post-2267","post","type-post","status-publish","format-standard","hentry","category-magento"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/2267","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=2267"}],"version-history":[{"count":1,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/2267\/revisions"}],"predecessor-version":[{"id":5100,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/2267\/revisions\/5100"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=2267"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=2267"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=2267"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}