WooCommerce quantity fields without spinners

This post is more than 8 years old.

WooCommerce uses HTML5 number fields for shop quantities, because they restrict the characters you can enter, and Safari on iPad/iPhone conveniently shows the number keyboard. Webkit and Opera/Presto add spinners (up/down arrows) to HTML5 number fields. WooCommerce also adds +/- buttons surrounding qty fields, because IE and Firefox don’t add spinners. WooCommerce then uses CSS to hide the spinners on Webkit:

/* Disable input[type=number] buttons until the world is ready */
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
    display:none;
}

Of course, that means Opera/Presto still shows spinners. Yes, spinners and +/- buttons!

This Stack Overflow post shows how to get the same effect using a type="text" field that then works the same in all browsers. Instead of using type="number", you can use type="text" with a pattern that restricts the input characters to digits:

<input type="text" pattern="[0-9]*" ... />

Edit: now updated for WooCommerce 2.1+

To use that in WooCommerce, copy the quantity field template from here:

/wp-content/plugins/woocommerce/templates/global/quantity-input.php

to here:

/wp-content/themes/your-theme/woocommerce/global/quantity-input.php

Then replace type="number" with type="text" pattern="[0-9]*"

And job is done in Opera too!