Avoiding the ability to repeatedly click the "add to cart" button in WordPress/WooCommerce

Question

Avoiding the ability to repeatedly click the "add to cart" button in WordPress/WooCommerce

I am looking for a solution to prevent double clicking on the add to cart button in WordPress. Currently, I can click on the button multiple times and it causes issues with the product quantity in the cart page. The cart page incorrectly shows that the product already exists in the cart due to the double clicks.

Even after trying the code below, the issue persists:

do_action('woocommerce_before_shop_loop_item');

function onlyonce(){ ?>
<script>
jQuery(document).ready(function($){
$('.cart').one('submit', function() {
$(this).find('button[type="submit"]').attr('disabled','disabled');
});
});

</script>
<?php }

https://i.stack.imgur.com/LPwaT.jpg

php jquery wordpress woocommerce

Answer 1

Answer №1

If you want to improve user experience, consider disabling the button on a click event instead of upon submission.

Feel free to test out the code snippet below and see if it works for your needs.

Note: This code serves as a reference only; I will remove it once you confirm its effectiveness.

jQuery(document).ready(function($) {

  $('#submitBtn').on('click', function() {
    console.log('disabling');
    $(this).attr('disabled', 'disabled');
    console.log('disabled');

    // then submit your form
  });
  /*
    $('.cart').one('submit', function() {
      $(this).find('button[type="submit"]').attr('disabled', 'disabled');
    });
    */
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="submitBtn" type="submit">Checkout</button>

Answer 2

If you want to improve user experience, consider disabling the button on a click event instead of upon submission.

Feel free to test out the code snippet below and see if it works for your needs.

Note: This code serves as a reference only; I will remove it once you confirm its effectiveness.

jQuery(document).ready(function($) {

  $('#submitBtn').on('click', function() {
    console.log('disabling');
    $(this).attr('disabled', 'disabled');
    console.log('disabled');

    // then submit your form
  });
  /*
    $('.cart').one('submit', function() {
      $(this).find('button[type="submit"]').attr('disabled', 'disabled');
    });
    */
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="submitBtn" type="submit">Checkout</button>

Avoiding the ability to repeatedly click the "add to cart" button in WordPress/WooCommerce

Answer №1

Similar questions

Prevent header from being displayed in XML response in Symfony 2

Ways to navigate through a webpage without encountering any overflow issues

Quickly view products in Opencart will automatically close after adding them to the cart and redirecting the

Handling MethodNotAllowedHttpException in IIS, AngularJS, and Laravel: A Comprehensive Guide

PHP: Retrieving the current time zone from the database

Saving data from AJAX queries

Joomla update query malfunctioning - seeking resolution

Wordpress AJAX request results in a value not found

Turn off the CSS hover effect for a custom button if the ng disabled attribute is set to true

Modifying the input field's name attribute while utilizing multiple datasets in typeahead.js

Should a checkbox be added prior to the hyperlink?

Retrieve the Corresponding Content Inside the Div Element

Make sure to tick the checkbox by clicking on the <tr> element using jQuery

What is the best way to swap values in an array with values from a different array?

verifying the AJAX validation request URL

Chosen item from the list

How to enable drag-and-drop functionality for an iframe?

How to efficiently retrieve individual values from input fields using jQuery AJAX while the inputs are within a foreach loop

What is the best way to create a Laravel object for use in JavaScript in a Laravel Blade?

Retrieve the names from one table by querying another table