title: woocommerce product data metabox in front-end
body: <p>I'm trying to get the woocommerce product data metabox to work exactly as it dose in the backend in the frontend including ajax content loading of attributes and variants.</p>
  
  <p>I've got it done by coping the output of the metabox and the related js/css code to the frontend with slightly modifying some code to work in the frontend. Now the problem is that i couldn't get the add attribute and variants to work properly, for example when i click on save attribute it keeps on the loading screen for ever. same for the variant section. this is the code of saving an attribute from my frontend js, have i missed something to change for it work the same it does in the backend?</p>
  
  <pre><code>    // Save attributes and update variations
  $( '.save_attributes' ).on( 'click', function() {
  
      $( '#woocommerce-product-data' ).block({
          message: null,
          overlayCSS: {
              background: '#fff',
              opacity: 0.6
          }
      });
  
      var data = {
          post_id:  woocommerce_admin_meta_boxes.post_id,
          data:     $( '.product_attributes' ).find( 'input, select, textarea' ).serialize(),
          action:   'woocommerce_save_attributes',
          security: woocommerce_admin_meta_boxes.save_attributes_nonce
      };
  
      $.post( woocommerce_admin_meta_boxes.ajax_url, data, function() {
          // Reload variations panel
          var this_page = window.location.toString();
          this_page = this_page.replace( 'post-new.php?', 'post.php?post=' + woocommerce_admin_meta_boxes.post_id + '&amp;action=edit&amp;' );
  
          // Load variations panel
          $( '#variable_product_options' ).load( this_page + ' #variable_product_options_inner', function() {
              $( '#variable_product_options' ).trigger( 'reload' );
          });
      });
  });
  </code></pre>