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!