Question 29967 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Disable Woocomerce register button after one click – WordPress

Hello I would like to disable the woocommmerce register page button after one click to avoid multiple clicks.

I have searched the forums and found a bunch of solutions for custom forms and I’ve tried the following JS code but had no luck. I have a feeling I am setting the wrong selector because I cannot for the life of me figure out what the correct selector for the default register button is.

    <script>
    function disableButton() {
        var btn = document.getElementById('woocommerce-register-nonce');
        btn.disabled = true;
        btn.innerText = 'Posting...'
    }
</script>

I’ve also tried :

<script>    
jQuery('woocommerce-Button.woocommerce-button.button.woocommerce-form-register__submit').live('click', function (e) {
      var self = this;
      $(this).attr("disabled", "disabled");
      do_something();
      setTimeout(function () {
          $(self).removeAttr('disabled');
      }, 10000);
  });
</script>

Some guidance would be very much appreciated.

Update!

Based on Onboardmass’s suggestion I have corrected the selector and got it partially working using jquery.

<script>
    
    jQuery('.woocommerce-Button.woocommerce-button.button.woocommerce-form-register__submit').click(function(){
    jQuery(this).attr("disabled", "disabled");
});
    
    </script>

The button now gets disabled on click however the issue I’m facing now is that the form does not get submitted.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    For anyone else who may need this I was able to figure this one out by reading through the suggestions and other threads I found. Thank you Onboardmass & Martin for the guidance!

    The time out function is required for the click to register.

    <script>
$(document).ready(function () {
$(".woocommerce-Button.woocommerce-button.button.woocommerce-form-register__submit").click(function () {
    setTimeout(function () { disableButton(); }, 0);
});

function disableButton() {
    $(".woocommerce-Button.woocommerce-button.button.woocommerce-form-register__submit").prop('disabled', true);
}
});
</script>

  2. 0

    The issue you’re facing is because the selector is incorrect. It should be .woocommerce-Button.woocommerce-button.button.woocommerce-form-register__submit.

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

Back To Top
Search