Update order status via AJAX in WooCommerce Order received page

Question

I'm trying to change the status of my woocommerce orders from processing to completed when a client clicks a button on the thank you page via AJAX.

My code is as follows:

$.ajax({
    type: 'post',
    dataType: 'json',
    url: ajax_url,
    data: {action: 'redeem_complete'},
    success: function(response){
        alert("Order data successfully fetched.");                      
    }
});

and the php in my functions.php

add_action( 'wp_ajax_redeem_complete', 'fairbooks_redeem_complete');
add_action( 'wp_ajax_nopriv_redeem_complete', 'fairbooks_redeem_complete');

function fairbooks_redeem_complete($order_id){
        
    $order = wc_get_order( $order_id ); 
    $order->update_status( 'completed' );
    echo 'test';
    die();
}

I know the ajax works without the $order->update_status( 'completed' ); statement, but with it I get a 500 internal server error. I also know that If I don't use ajax and hook into the thank you page it changes the status without a problem. What is causing the error or is there perhaps a better way to go about this. Thanks in advance!

Answer 1

You need to pass the order Id from your javascript code to PHP as its not defined in your PHP WordPress Ajax receiver function, so it's normal to get an error 500 as $order variable is not defined and throw an error when using the method update_status() .

The following complete example is based on your code (and works without errors) :

add_action( 'woocommerce_thankyou', 'customer_completes_order_thankyou' );
function customer_completes_order_thankyou( $order_id ) {
    $order = wc_get_order( $order_id );
     // print_r($order->get_status()); // Uncomment for testing
    ?>
    <div><button class="button alt complete-status"><?php _e("Complete your order"); ?></button><br><br>
    <span class="response" style="color:green;"></span></div>
    <script type="text/javascript">
    jQuery(function($){
        if (typeof woocommerce_params === 'undefined')
            return false;

        $('button.complete-status').click( function(e){
            e.preventDefault();

            $.ajax({
                type: 'POST',
                dataType: 'json',
                url: woocommerce_params.ajax_url,
                data: {
                    'action': 'redeem_complete',
                    'order_id': <?php echo $order_id; ?>, // Here we send the order Id
                },
                success: function (response) {
                    $('.response').text("Order data successfully fetched.");
                    console.log("Order data successfully fetched.");
                }
            });
        });
    });
    </script>
    <?php
}

add_action( 'wp_ajax_redeem_complete', 'fairbooks_redeem_complete');
add_action( 'wp_ajax_nopriv_redeem_complete', 'fairbooks_redeem_complete');
function fairbooks_redeem_complete(){
    if ( isset($_POST['order_id']) && $_POST['order_id'] > 0 ) {
        $order = wc_get_order($_POST['order_id']);
        $order->update_status('completed');
        die();
    }
}

Code goes in functions.php file of your active child theme (or active theme). Tested and works.