I want to execute a JavaScript code when someone place order on my Woocommerce site i googled and find this action hook add_action( 'woocommerce_checkout_order_processed', 'function_name', 1, 1 ); then in my callback function i did this echo "<script>alert('Working?')<script>"; but this is not alerting why?? I want to execute a code a soon as order successfully placed.

4 Answers 4


I'm afraid you can't do that. Cause in browser JavaScript works on DOM. And this woocommerce_checkout_order_processed hook will be fired before the DOM loads. So there is no way you can execute this code on firing this hook.

Now there are two solutions I got-

  1. Make it Ajaxified. So you don't need to reload the DOM and you can execute JavaScript on the DOM.

  2. Second solution is relatively easy but not full proof. As far I understood there should be button by pressing that the order should be processed, right? So you can track this button activity and alert on this activity.


You needed to put your alert inside an onload or a function for it to fire on echo from PHP. I believe alert() needs to be triggered by a function, onload, select, click etc.

You place a function with the alert in your header and then in the footer, call that function. The alert would only fire when a variable is set to true. You then echo true or false to that variable with PHP.

In your page header

var value = "<?php echo $value; ?>";`

function checkMe() {
   if("true" === value) {

after that, inside the footer of the page checkMe();

or even put it as the body tag onload function.

<body onload="checkMe()">

That should do the trick. With the call in the footer, your page will load before the alert, with the body onload it will beat your page to the punch. I usually put confirm() in the body onload if needed for displaying content and alert() in the footer for status box display. Your call on your preference though.


It does not work, because the JavaScript DOM is not loaded when the woocommerce hook fires. You need a hook that fires when it is loaded.

One possible hook is wp_footer. Then, when your woocommerce hook fires, notify the footer hook about it. We can use wp_cache_set for this, but only when the Wordpress object cache is enabled, because the cache would only be available within one request otherwise.

The notifier:

add_action('woocommerce_checkout_order_processed', 'my_order_processed', 1, 1);
function my_order_processed($order) {

    wp_cache_set('woocommerce_order_processed', true);

The receiver:

add_action( 'wp_footer', 'check_woocommerce_order_fired' );
function check_woocommerce_order_fired() {
    if (wp_cache_get('woocommerce_order_processed')) {
        echo '<script>alert("Working?")<script>';
        wp_cache_set('woocommerce_order_processed', false);

Also note that the above solution has some drawbacks. For example, the notifier and receiver do not neccessarily fire at the same (JavaScript) client (customer). For that you would also need to store and retrieve the customer from the cache.


I think it's safe to use the hook 'woocommerce_thankyou' in your case. It's triggered on the "Order Received" page.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.