woocommerce product data metabox in front-end

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.

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?

    // 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 + '&action=edit&' );

        // Load variations panel
        $( '#variable_product_options' ).load( this_page + ' #variable_product_options_inner', function() {
            $( '#variable_product_options' ).trigger( 'reload' );
        });
    });
});