Add a custom script on “place order” button on woocommerce checkout page

Question

I'm trying to add this script on "place order" button of woocommerce checkout page:

$('#place_order').addClass('disabled');

but If I put it inside the footer.php file it doesn't work.

I've find a resource that suggests to me to override the woocommerce checkout.js file make a clone inside /my-theme/woocommerce folder but now I don't understand where to put my custom script in order to make it works.

Thank you

Answer 1

Your script has to be put inside the ready handler, but still you have one problem, on each ready event ( whenever DOM is fully loaded ) woocommerce update the Order Review section through Ajax, so this action will remove your disabled class from the Place Order button.

You can use the custom event updated_checkout which will be triggered at the end of each Update Order Review ajax action.

Do some thing like this.

function add_checkout_script() { ?>

    <script type="text/javascript">

        jQuery(document).on( "updated_checkout", function(){
                $('#place_order').addClass('disabled');
            });         

    </script>

<?php       
}
add_action( 'woocommerce_after_checkout_form', 'add_checkout_script' );