buttonwoocommercecheckout

Woocommerce place order button state once clicked


When the place order button is clicked on my woocommerce site it takes a few seconds to complete the order, the user however cant see that the wheel turning to show the script is running as this is at the top of the page. Is there a way to change the text on the button once clicked to 'Please Wait' or at least change the colour once visited.

I tried changing the colour of the visited state using the following css but it doent work

.woocommerce #respond input#submit, .woocommerce a.button:visited, .woocommerce button.button:visited, .woocommerce input.button:visited {
    color: #ffffff;
    background-color: #262a2b;
      border-radius: 0px;
    
}

Solution

  • Use this:

    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;
    }