Woocommerce - Move add to cart button variable product

Question

I am working on a custom theme. I need to move the add to cart button from the woocommerce_single_variation (variable.php) section into the woocommerce_after_single_product_summary (content-single-product.php) section.

I have been able to do this by adding the following to my functions.php file.

function remove_loop_button(){
remove_action( 'woocommerce_single_variation', 'woocommerce_single_variation_add_to_cart_button', 20 );
}
add_action('init','remove_loop_button');

add_action( 'woocommerce_after_single_product_summary', 'woocommerce_single_variation_add_to_cart_button', 30 );

However when I do this the button shows up but is not functional. Clicking on it just does nothing. Does anyone know is it possible to move the add to cart button in such a way? Please note this is for variable products not single so I'm thinking the behavior is different.

I appreciate any help that can be given. Thanks!

Answer 1

As @LoicTheAztec mentioned, your add to cart button moved out from the product form, so it won't do anything unless you write some JS to simulate that submit action.

function inject_add_cart_form_script() { ?>

<script type="text/javascript">

(function($){
    $(document).on( 'click', 'single_add_to_cart_button', function(){
        $('form.cart').submit();
    });
})(jQuery);

</script>
<?php 
}
add_action('woocommerce_after_single_product_summary', 'inject_add_cart_form_script');