We have a configurable product on the front-end with two drop-downs (size and color)

How can I get the final simple product id once the user has made their selections

We have done this in Magento 1 but don't know how to do this in Magento 2. Any suggestion will be appreciated.

  • Specify where you want to this product Id? – Dhiren Vasoya Jan 10 '18 at 10:49
  • Hi Dhiren, I want this product ID on configurable product page. Want simple product ID after user selected all options. e.g. if there are 2 attributes are there size and color so if user select Small size and red color so we want ID of this simple product. – Vish Jan 11 '18 at 5:57
  • Hi...did you find out any answer for this? – Rita Jose Feb 23 '18 at 4:49
  • @RitaJose Please check answer added by me just now. Hope it will help you :) – Vish Feb 24 '18 at 5:47

Got solution. I am writing answer of my question. Hope it will help others.

requirejs(['jquery','underscore'], function(jQuery,_){
        jQuery( ".product-options-wrapper div" ).click(function() {
    function selpro () {
        var selected_options = {};
            var attribute_id    = jQuery(v).attr('attribute-id');
            var option_selected = jQuery(v).attr('option-selected');
            //console.log(attribute_id, option_selected);
            if(!attribute_id || !option_selected){ return;}
            selected_options[attribute_id] = option_selected;

        var product_id_index = jQuery('[data-role=swatch-options]').data('mageSwatchRenderer').options.jsonConfig.index;
        var found_ids = [];
        jQuery.each(product_id_index, function(product_id,attributes){
            var productIsSelected = function(attributes, selected_options){
                return _.isEqual(attributes, selected_options);
            if(productIsSelected(attributes, selected_options)){


I write js code for get simple product id after selection. You can add following js Code in bottom of this file. app/design/frontend/[your_theme_package]/[your_theme]/Magento_ConfigurableProduct/templates/product/view/type/options/configurable.phtml

<script type="text/javascript">
require(["jquery"], function(jQuery) {
  jQuery(".product-options-wrapper select[id^='attribute']").last().on('change', function() {
      setTimeout(function (){
      }, 500); 
  }); }); </script>

Then clear cache, it works for me. See this screenshot:

enter image description here

  • Thank you for answer but its already done. – Vish Jan 19 '18 at 9:51
  • This answer worked for me while the selected answer errors. The time delay is the critical step. I think some class variable names might have changed since the chosen answer was selected. – JustinP Mar 8 at 21:21
  • can we get custom attributes from it – insoftservice Aug 28 at 13:22
  • Thanks Man!! You Saved My Day!! :) – Rakesh Donga Nov 21 at 11:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.