This Article:
We’re going to add a simple block of code to our CSS stylesheet that makes the WooCommerce button appear disabled when a customer clicks it to checkout.
When your customers place an order, WooCommerce injects an overlay + spinner to let your customers know something is happening, then removes it when that something is done. In this case, the order form is processing.
While this is generally effective enough to discourage double clicking/double submissions, occasionally you may find you need an extra visual queue to encourage patience.
Difficulty:
Requirements:
- CSS
Visually Disable the WooCommerce Checkout Button When Processing
Within your child theme locate your custom stylesheet. Mine is named styles.css (yours could be named something different) and add this code block directly into your file. Save your file, and make sure you FLUSH YOUR CACHE to see your changes.
If working properly, your button will change from visually available, to visually disabled when customers press the button to place their order. Now if they miss the little processing GIF spinner, or you don’t have an overly to block the interface, customers have an extra visual indicator that shows them something is happening, and hopefully this encourages them to wait for that something to complete before hitting the button again.
/* This targets the order box */
.processing #order_review #place_order {
position: relative;
background:transparent!important;
border: #c3c3c3!important;
color: #c3c3c3!important;
cursor: not-allowed!important;
}
You can see we are using WooCommerce’s .processing class to target the #place_order button ID on the checkout button. From there, this CSS code simply turns the button background transparent, the text gray, and then applies a not-allowed circle with a cross out through it to make the button appear disabled. You can update the styles to match your own website colors, or set your button’s transparency to opacity: 0.5; for example, to make your button opaque when processing is taking place.
NOTE: This example does not disable the button officially, it simply adds a extra visual queue for your customers so they know something is happening after the “Place Order” button was submitted.