Menu

Snippets

Yet another programmer blogging about code

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 {
    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!