For a client project we’re currently working on, I get to dive into WooCommerce for the first time. The client was already using JigoShop—WooCommerce was forked from that project—so WooCommerce was a logical upgrade.
One thing that frustrated me was how WooCommerce used a number input field for setting the quantity a customer wanted to purchase. A select field felt more natural, perhaps because that’s what Amazon (and other eCommerce behemoths) use. Using a select field for quantity inputs improves the user experience, and looks better too!
There are a number of code snippets that purport to replace WooCommerce’s quantity inputs with a quantity select field floating around the web, but they all had problems. Some only worked on the product page but not the cart. Others worked in both places, but didn’t properly update the quantity in certain places, or didn’t accurately reflect the current quantity.
Using the code from this version by Github user “kloon” as a starting point, I fixed it up so it worked exactly as desired: it correctly updates the quantity, and reflects the current quantity in the cart. Check out the snippet after the jump!
All you need to do is download this file and place it at yourtheme/woocommerce/global/quantity-input.php — it will automatically override WooCommerce’s native quantity input and you’ll be on your way to select field awesomeness!
Want more eCommerce tips?
If you're building an eCommerce shop, we think you'd like our (infrequent) emails. You'll get code snippets, business advice, and more. Sign up below.
Nice, this goes straight into my snippets repo!
This is great! Any idea on how to make the totals auto-update after select via jquery?
Sort of! I have a snippet that I used to do something like that. It’s not perfect but I’ll try to get it cleaned up and publish it!
That would be awesome!
This snippet works great! The only place I’ve found an issue is with a new WooCommerce extension that WooThemes recently released called One-Page Checkout. It allows you to make a page or a post function as a one-page checkout for any product.
The problem is that when this page is loaded for a given product, even though the select box says “1”, there is nothing in the cart. Also, when you change the quantity to a higher number, nothing is ever added to the cart. I’m assuming I’d need to hook into some sort of JavaScript function when the select changes to update the cart. Any thoughts?
Hey Michael,
I created a quick snippet to put into my functions.php file that updates the cart total when the Qty select is changed (on the cart page). You can check it out at https://gist.github.com/rours/637b722debac38037766
Let me know if you have any questions.
That’s pretty sweet—thanks for sharing!
Nice one. This goes straight to my page.
One thing i noticed is the quantity selector is really close to the purchase button.
How could i add some spacing there?
Hi, This snip is great but it does not return the quantity of the product for the max_value. Is there a way to go through the loop using the actual quantity available for the iterator end?
Hey this code is awesome but is there a way to have it not applied to products that are specified as “sold individually” in Woocommerce. Or even have it applied to only certain product categories?
The site I am working on sells roses by the dozen. Is there a way to have the quantity field read “1 dozen, 2 dozen, 3 dozen, etc” instead of just reading “1,2,3, etc?”
Hi, I have implemented this snippet in my child theme dir and it shows an dropdown select but it does not update the quantity. I am using the One Page Checkout plugin… Can you give me some help why it’s not working?
Hi Chris,
Could you maybe share that snippet too?
Thanks!
Hi, did you manage to implement this snippet working and updating the one page checkout?
You can do this by adding “dozen” after $count . ‘ and before .
Thanks for this Stippen. It Work Great on all. Only the Format on my Site ist Not so Fine. The Selctfield is over the Place in Cart Button.
Can you help me please??
For example please take a Look herne:
http://www.tanz-stoffe.de/produkt/grundstoffe-essentials/stretch-satin/
Thanks
Thomas