WooCommerce quantity fields without spinners

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 {

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:


to here:


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

And job is done in Opera too!

  • Daniel

    This worked for me too:

    input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */

    • If you read this post fully, you’ll see that this “fix” does nothing for non-WebKit browsers, e.g. Opera currently still shows a spinner (and maybe one day, Firefox and IE will too). Better is to not use the number subtype, just use the text subtype with a pattern as this induces the correct effect in all browsers.