title: Get currently selected variation and data from Woocommerce variable product
body: <p><strong>Situation:</strong> I have a bunch of variable products in a Wordpress WooCommerce shop. On the frontend there is a form with multiple select inputs, that let the user configure the product before adding it to the cart. The price and other information will change across the possible variations, so I need to keep track of that.</p>
  
  <p><strong>Aim:</strong> After the form has been changed by the user, Woocommerce will update a hidden field <code>input.variation_id</code> with the ID of the newly selected variation. Whenever that changes, I want to know that.</p>
  
  <p>Apparently, there is something that keeps track of changes, which works fine:</p>
  
  <pre><code>$( ".variations_form" ).on( "woocommerce_variation_select_change", function () {
      console.log('form has changed'); // fires correctly
  } );
  </code></pre>
  
  <p>I am also able to read the value of that hidden field, before it was changed:</p>
  
  <pre><code>var id = $('input.variation_id').val();
  console.log( id ); // returns correct value
  </code></pre>
  
  <p><strong>Problem:</strong> But when I try to call the value inside that function, I won't work.</p>
  
  <pre><code>$( ".variations_form" ).on( "woocommerce_variation_select_change", function () {
      var id = $('input.variation_id').val();
      console.log( id ); // fires, but returns empty
  } );
  </code></pre>
  
  <p>I’ve tried everything that came to my mind. If I type it directly into the browser console it works, but when I try to fetch it with the function above it is empty. What can I do?</p>
  
  <p>I previously worked with <code>$('form.variations_form select').change(...);</code> but it will mess up the variations and I want to make sure, that Woocommerce has updated all the information before I perform my action.</p>