title: Auto select first available options from a variation on WooCommerce variable products
body: <p>I have a t-shirt product that has a choice of sizes and colours. After selecting of one variation I would like the first available option to be auto selected in the other variation.</p>
  <p>For example, if I had a white t-shirt with only Large and Extra Large and a green t-shirt with only Small and Medium, when the user selects White it should auto select to Large. However, if the user then changes their mind and goes for Green, it should auto select to Small. Although, this should only occur if there isn't an already available option selected in the other variation.</p>
  <p>Whilst I can run a script to select the first enabled option on change, once the user changes to a different colour again, WooCommerce gives an 'Out of stock' warning and clears their choices before I can run the script on change again.</p>
  <p>I've attempted to run with on <code>woocommerce_variation_select_change</code>, <code>woocommerce_variation_has_changed</code> and <code>show_variation</code> <code>hide_variation</code> without any luck.</p>
  <p>Any help would be much appreciated. Below is roughly what I've come up with so far:</p>
  <pre class="lang-js prettyprint-override"><code>$(document).on( 'change', '.variations select', function( event ) {
          
      if ( !$(this).val() ) return false;
      var select = $(this);
      var variations = $(this).closest('.variations');
      
      $(variations).find('select').not(select).each(function() {
  
          var val = $(this).val();
              
          if ( !val || ( val &amp;&amp; !$(this).find('option[value='+val+']:enabled') ) ) {
  
              $(this).find('option:enabled').each(function() {
                              
                  if ( $(this).attr('value') ) {
                          
                      $(this).prop('selected', 'selected');
                      return false;
      
                  }
  
              });
          
          } 
  
      });
      
  });
  </code></pre>