CODEWITHSUNDEEP
buttonwoocommercecheckout
Mark
Mark

Reputation: 23

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

Upvotes: 2

Views: 2147

Answers (1)

Sapna Singh
Sapna Singh

Reputation: 139

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

Upvotes: 1

Related Questions