Woocommerce Question posted in
The official Woocommerce documentation can be found here.

Woocommerce place order button state once clicked, add text

When the place order button is clicked on my woocommerce site it takes a few seconds to complete the order, the user can see that the wheel turning to show the script is running. I am looking for a solution to add the text "please wait" under the turning wheel, so that my customer doesn’t leave.

I tried to add this code as a hook that was here on the site, but it doesn’t work for me.

Thank you advance for help. I’m sure it will help others…

add_action( 'wp_footer', 'custom_checkout_jquery_script' );
function custom_checkout_jquery_script() {
  if ( is_checkout() && ! is_wc_endpoint_url() ) :
?>
  <script type="text/javascript">
  jQuery( function($){
      jQuery('form.checkout').on('submit', function(event) {
        jQuery('button#place_order').text('Please Wait');
        event.preventDefault();
      });
  });
</script>
 <?php
  endif;
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thank you for your code.

    i tried it and put in my child-theme, file functions.php. The result is the same, no text is displayed. Turning wheel only. You can see on image. I tried detele the cache.

    I have: Wordpress 6.6.1 Theme Astra Pro 4.7.3 Woocomerce 9.1.4

    Thanks for help.

    Turning wheel without text


  2. 0

    I tried your code and works but it does not restore the original text if there is validation or any error occurs. So, to overcome this issue you can try the following code:

    function custom_checkout_jquery_script() {
    if(is_checkout() && ! is_wc_endpoint_url()){
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            // Change the text of the Place Order button during AJAX request
            $(document).on('click', '#place_order', function() {
                var $this = $(this);
                $this.data('original-text', $this.text()); // Store original text
                $this.text('Please Wait'); // Set loading text

                $(document.body).on('checkout_place_order_success checkout_error', function() {
                    $this.text($this.data('original-text')); // Restore original text
                });
            });
        });
    </script>
    <?php
    }
}
add_action('wp_footer', 'custom_checkout_jquery_script');

    Add the code in the child theme’s functions.php

    Code tested and worked

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search