WooCommerce - reload the order on click of a button via Ajax

Question

I'm adding a 'Remove' button next to each item in the Order via this function in functions.php:

add_action( 'woocommerce_order_item_meta_end', 'display_remove_order_item_button', 10, 3 );
function display_remove_order_item_button( $item_id, $item, $order ){
    // Avoiding displaying buttons on email notification
    if( ! ( is_wc_endpoint_url( 'view-order' ) || is_wc_endpoint_url( 'order-received' ) ) ) return;

    if( isset($_POST["remove_item_$item_id"]) && $_POST["remove_item_$item_id"] == 'Remove this item' ){
        wc_delete_order_item( $item_id );
    }

    echo '<form class="cart" method="post" enctype="multipart/form-data" style= "margin-top:12px;">
    <input type="submit" class="button" name="remove_item_'.$item_id.'" value="Remove this item" />
    </form>';
}

The issue is, after clicking the Remove button you then have to refresh the order page in order for the item to disappear.

I'd like that to happen automatically. I suppose I need to use Ajax to call the above function, but not quite sure how to do that.

Thanks in advance

Answer 1

Assuming your example is working, you'll change the function to look something like this:

add_action( 'woocommerce_order_item_meta_end', 'display_remove_order_item_button', 10, 3 );
function display_remove_order_item_button( $item_id, $item, $order ){
    // Avoiding displaying buttons on email notification
    if( ! ( is_wc_endpoint_url( 'view-order' ) || is_wc_endpoint_url( 'order-received' ) ) ) return;

    echo '<form class="cart" method="post" enctype="multipart/form-data" style= "margin-top:12px;">
<input type="submit" id="remove-btn" data-id="'.$item_id.'" data-order="'.$order->get_order_number().'" class="button" name="remove_item_'.$item_id.'" value="Remove this item" />
    </form>';
}

We gave the button a unique ID so we can detect clicks using jQuery. Notice data-id attribute, that's where we're passing $item_id. Now that display function is ready, we need to create an ajax call:

add_action('wp_head', 'ajax_call_remove_item');
function ajax_call_remove_item() {
?>
<script type="text/javascript" >
jQuery(document).ready(function($) {
    $(document).on("click","#remove-btn",function(e) {
    e.stopImmediatePropagation();
    e.preventDefault();

    // get data values from the button
        var details = $(this).data();
        var container = $(this).closest('td').parent('tr');
      $(this).closest('td').append('<div id="loader">Data is loading</div>');
        var data = {
            action: 'remove_item',
            // get id from data
            id: details.id,
            orderid: details.order,
        };

        $.post('<?php echo esc_url( home_url() ); ?>/wp-admin/admin-ajax.php', data, function(response) {
           // display the response
           $(container).empty();       
           $(container).html(response);       
        });

    });
});

</script>
<?php
}

Now a function to handle POST data, delete the item and return a response:

add_action('wp_ajax_remove_item', 'remove_item_callback_wp');
add_action( 'wp_ajax_nopriv_remove_item', 'remove_item_callback_wp' );
function remove_item_callback_wp() {
     $item_id = $_POST['id'];
     $order_id = $_POST['orderid'];

    $order    = new WC_Order($order_id);


    foreach ($order->get_items() as $order_item_id => $item){
        if($order_item_id == $item_id){
            wc_delete_order_item(absint($order_item_id));
        }
    }


     echo "This items has been removed";

     exit(); 
}