Trigger a javascript function when a WooCommerce order comes in processing status

Question

I am having trouble calling a js function after I process a Woocommerce order. I have the following code in my functions.php:

add_action( 'wp_enqueue_scripts', 'enqueue_so_18552010' );
add_action( 'woocommerce_order_status_processing', 'purchaseCompleted' );

function enqueue_so_18552010()
{
    wp_enqueue_script( 
        'my-java', // Handle
        get_stylesheet_directory_uri() . '/js/custom.js?V=2020.08.01v12', // URL for child or parent themes
        array( 'jquery' ), // Dependencies
        false, // Version
        true // In footer
    );
}
    
    function purchaseCompleted()
    {
        //JS FUNCTION'S CALL GOES HERE
    }

I want to call a js function that is in the custom.js file, but so far I haven't been successful. I was able to call a function from that file from an unrelated page template, but not using the woocommerce_order_status_processing call. Is this possible?

PHP executes code on server side, javascript code is executed on browser.I think it's impossible to execute js code using php. — Marios Nikolaou, Aug 05 '20 at 20:49

LoicTheAztec · Accepted Answer · 2023-08-05T08:57:41.943

In WooCommerce, When customer place an order after payment, it's redirected to "Order received" (Thankyou) page, that is the only moment where you can trigger javascript function for a "processing" order status:

1). Enqueuing a Js File

add_action('wp_enqueue_scripts', 'order_received_enqueue_js_script');
function order_received_enqueue_js_script() {
    // Only on order received" (thankyou)
    if( ! is_wc_endpoint_url('order-received') )
        return;

    $order_id = absint( get_query_var('order-received') ); // Get the order ID

    $order = wc_get_order( $order_id ); // Get the WC_Order Object

    // Only for processing orders
    if ( ! is_a( $order, 'WC_Order') || ! $order->has_status( 'processing' ) ) {
        return;
    }

    wp_enqueue_script( 
        'my-java', // Handle
        get_stylesheet_directory_uri() . '/js/custom.js?V=2020.08.01v12', // URL for child or parent themes
        array( 'jquery' ), // Dependencies
        false, // Version
        true // In footer
    );
}

2). Calling a javascript function

add_action('wp_footer', 'order_received_js_script');
function order_received_js_script() {
    // Only on order received" (thankyou)
    if( ! is_wc_endpoint_url('order-received') )
        return; // Exit

    $order_id = absint( get_query_var('order-received') ); // Get the order ID

    if( get_post_type( $order_id ) !== 'shop_order' ) {
        return; // Exit
    }

    $order = wc_get_order( $order_id ); // Get the WC_Order Object

    // Only for processing orders
    if ( method_exists( $order, 'has_status') && ! $order->has_status( 'processing' ) ) {
        return; // Exit
    }

    ?>
    <script>
    // Once DOM is loaded
    jQuery( function($) { 
        // Trigger a function (example)
        myJsFunctionName('order-received', 'processing', {
            'order_id':       '<?php echo $order->get_order_id(); ?>',
            'order_key':      '<?php echo $order->get_order_key(); ?>',
            'transaction_id': '<?php echo $order->get_order_id(); ?>',
            'total':          '<?php echo $order->get_total(); ?>',
            'currency':       '<?php echo $order->get_currency(); ?>'
        });
    });
    </script>
    <?php
}

This kind of example is used by tracking scripts for example, like for GooGle Analytics…

I see.. First one goes in functions.php and the second in the footer.php, correct? — waching, Aug 06 '20 at 12:45
No both goes in functions.php the first register a script in Wordpress queue, The 2nd is displayed in footer, but both will only be on "order received" page, after payment. — LoicTheAztec, Aug 06 '20 at 13:33
It worked! After I added your code and made my own js function, I only had to change the version in the custom.js filename so it would get reloaded (and the function would get recognized), and it worked! Thank you!!! — waching, Aug 07 '20 at 17:00

score 2 · Answer 2 · answered Aug 05 '20 at 21:47

You can use the “wp_footer” action in PHP to output a JS function declaration like so:

function my_php_function() {
echo '<script>
function myFunction() {
  console.log("myFunction() was called.");
}
</script>';
}
add_action('wp_footer', 'my_php_function');

https://wordpress.org/support/topic/calling-a-function-from-functions-php/

score 0 · Answer 3 · answered Jun 06 '21 at 05:56

0

refer this site - Woocommerce checkout page hooks

example-

 function ts_review_order_before_submit(){
   echo'<button onclick="js_function()" id="function" > JS 
          function 
        </button>'
 }

answered Jun 06 '21 at 05:56

chamod rathnayake

775
8
15

Trigger a javascript function when a WooCommerce order comes in processing status

3 Answers3

Linked