Posted on

WooCommerce: Change Add to Cart “Quantity” into a Drop-down

The default WooCommerce Add to Cart “Quantity Input” is a simple input field where you can enter the number of items or click on the “+” and “-” to increase/reduce the quantity.

A freelance client hired me to turn that input into a “Select” drop-down. For their audience and UX requirements, it makes sense to let their customers choose the quantity from a drop-down instead of having to manually input the number.

Online there are complex snippets, but I decided to make things easier. The WooCommerce function responsible to generate the quantity input is called “woocommerce_quantity_input“. Luckily, it’s a pluggable function – which means we can simply add this exact same function name to our child theme’s functions.php to completely override it.

WooCommerce: turn Add to Cart Quantity input into a select drop-down

PHP Snippet: Turn Add to Cart “Quantity” into a select drop-down – WooCommerce

 

/**
 * @snippet       Add to Cart Quantity drop-down - WooCommerce
 * @how-to        Watch tutorial @ https://businessbloomer.com/?p=19055
 * @sourcecode    https://businessbloomer.com/?p=72757
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 3.1.1
 */

function woocommerce_quantity_input() {
  
  $min = 1;
  $max = 5;
  $step = 1;
  $options = '';
  
  for ( $count = $min; $count <= $max; $count = $count+$step ) {
    $options .= '<option value="' . $count . '">' . $count . '</option>';
  }
  
  echo '<div class="select-qty"><label>Qty</label><select name="quantity">' . $options . '</select></div>';
}

Where to add this code?

You can place PHP snippets at the bottom of your child theme functions.php file (before "?>" if you have it). CSS, on the other hand, goes in your child theme style.css file. Make sure you know what you are doing when editing such delicate files - if you need more guidance, please take a look at my free WooCommerce Customization video tutorial.

Does this snippet still work?

Please let me know in the comments if everything worked as expected. I would be happy to revise the snippet if you report otherwise (please provide screenshots). I have tested this code with Storefront theme, the WooCommerce version listed above and a WordPress-friendly hosting on PHP 7.

If you think this code saved you time & money, please join other Business Bloomer supporters and avail of 365 days of WooCommerce benefits. Thank you in advance :)

Need Help with WooCommerce?

Check out these free videos, tutorials and tips!

  • how-to-edit-woocommerce-with-php-snippets
  • woocommerce-hooks-add_action-list-visual
  • woocommerce-customize-single-product-page-PHP
  • woocommerce-customize-shop-page-PHP
  • woocommerce-advanced-customization
  • how-to-edit-woocommerce-cart
  • woocommerce-customize-checkout-page-PHP
  • woocommerce-email-customization
  • woocommerce-conditional-logic

Rodolfo Melogli

Author, WooCommerce expert, WordCamp speaker and Internet marketer, Rodolfo Melogli has worked as a WooCommerce freelancer since 2011. He helps entrepreneurs and developers overcome their WooCommerce nightmares :) Rodolfo is the organiser of WordCamp Dublin, the Dublin WooCommerce Meetup, the Dublin Ecommerce Meetup and the Dublin WordPress Meetup. He enjoys interacting with people, travelling and chasing tennis & soccer balls. Of course, he loves pizza too.

29 thoughts on “WooCommerce: Change Add to Cart “Quantity” into a Drop-down

  1. I have to say, as Aman said above, this code is completely worthless, as it does not work on the cart page and only on a product page. Aman was nice enough to use the word impractical.

    In fact, leaving this code up on the internet does a disservice to the greater WordPress community. If you are not willing to take the time to get it right, please don’t post it in general. This post should be taken down.

    – Tim

    1. Tim, thanks so much for your comment. I felt like publishing it as you’re possibly part of that 0.01% that believes this article does a disservice – that’s fine with me of course ๐Ÿ™‚ Thanks again

  2. I am trying to add the Quantity in Drop Down Menu snippet but am receiving this error:

    Don’t Panic

    The code snippet you are trying to save produced a fatal error on line 21:

    “Cannot redeclare woocommerce_quantity_input() (previously declared in /var/www/west-coast-pretzels/wp-content/plugins/woocommerce/includes/wc-template-functions.php:1253)
    The previous version of the snippet is unchanged, and the rest of this site should be functioning normally as before.”

    1. Hey Kevin, thanks for your comment! I think someone was having this same problem, scroll through the previous comment and see if there is a fix ๐Ÿ™‚

    2. may be just change in snippet the div tag to a span tag!

      div tag will “fill” the whole line …

      check it with browser debugger

  3. Its work like a charm, but unlucky there is a problem, the “add to cart” button moved to below quantity selector. any one can help me how to move back the “add to cart” button next to quantity selector again?

    1. Hey Anam, thanks so much for your comment! You will need some custom, simple CSS there so I’m afraid I can’t help here ๐Ÿ™‚

  4. Thank you for the starting point, i use your info a lot! For anyone who is interested there is also this option I have put together here.

    https://gist.github.com/splozm/a73d19659dd11e26fcae67d74ae0ba4c

    It accurately reflects the quantity a user has selected and displays with a drop down in the basket.

    1. Thanks Alex ๐Ÿ™‚

  5. This snippet works great to change the qty selector to drop down. It also helps to style qty drop down. However, unfortunately, the quantities in the cart are not calculated accurately in the cart. These issues make this snippet rather impractical in its current form.

    Still, many thanks Rodolfo for your work.

    1. Hey Matt, thanks for your comment ๐Ÿ™‚ I just retested this and it correctly adds to cart from the single product page (haven’t tested other scenarios). The problem appears in the Cart, where the quantities are back to 1 despite the price is correctly calculated… Ok, a little buggy, I will see if I can fix this soon ๐Ÿ™‚

    2. This is a first attempt that only works on the single product page – still needs lots of work though:

      
      add_action( 'wp_footer', 'bbloomer_update_qty' ); 
       
      function bbloomer_update_qty() { 
          if ( is_product() ) { 
              ?> 
              <script type="text/javascript"> 
      			jQuery('input.qty').replaceWith('<select name="quantity">' +
      			'<option value="1">1</option>' +
      			'<option value="2">2</option>' +
      			'<option value="3">3</option>' +
      			'<option value="4">4</option>' +
      			'<option value="5">5</option>' +
      			'</select>'); 
              </script> 
              <?php 
          } 
      }
      
      
  6. Hi Rodolfo,
    Thank you for great tutorials, They are helping us a lot. I have interesting task which i am struggling to get around. for above quantity drop down, is there any possibility to add more option as a last option. people choose predefined quantities from drop down and if someone want to enter quantity which is not in the list, they will click on more and as soon as they click on more quantity input text box will be open then customer can enter their desired quantity. It would be great if you could help me with it.

    1. Hello Sunny, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. Thanks a lot for your understanding! ~R

  7. Hi
    I have just added it. But in the cart page the value that is set in drop down is not remaining selected. Once I select it and hit update cart button then it revers back to 1 and the total is not also updated. Any idea about this ?

    1. Aman, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom troubleshooting work and I cannot provide a solution here via the blog comments. Thanks a lot for your understanding! ~R

    2. 
      function woocommerce_quantity_input($data = null,$product)
      {
          global $post;
          if ( is_null( $product ) ) {
              $product = $GLOBALS['product'];
          }
        
          if (!$data['input_name']) {
              $defaults = array(
                  'input_name' =&gt; 'quantity',
                  'input_value' =&gt; 100,
                  'max_value' =&gt; apply_filters('woocommerce_quantity_input_max', '10000', $product),
                  'min_value' =&gt; apply_filters('woocommerce_quantity_input_min', '50', $product),
                  'step' =&gt; apply_filters('woocommerce_quantity_input_step', '100', $product),
                  'style' =&gt; apply_filters('woocommerce_quantity_style', 'float:left;margin-right:10px;', $product)
              );
          } else {
              $defaults = array(
                  'input_name' =&gt; $data['input_name'],
                  'input_value' =&gt; $data['input_value'],
                  'step' =&gt; apply_filters('cw_woocommerce_quantity_input_step', '100', $product),
                  'max_value' =&gt; apply_filters('cw_woocommerce_quantity_input_max', '10000', $product),
                  'min_value' =&gt; apply_filters('cw_woocommerce_quantity_input_min', '100', $product),
                  'style' =&gt; apply_filters('cw_woocommerce_quantity_style', 'float:left;margin-right:10px;', $product)
              );
          }
      
          $options = '';
      
          $quantities = array(100, 250, 500, 1000, 2000, 4000, 6000, 8000, 10000);
      
          if (!in_array($defaults['input_value'],$quantities))
              $quantities[] = $defaults['input_value'];
      
          asort($quantities);
      
          foreach ($quantities as $qty) {
              $selected = $qty === $defaults['input_value'] ? ' selected' : '';
      
              $options .= '' . $qty . '';
      
          }
          echo '' . $options . '';
      }
      
      
    3. I have the same problem!

  8. Thanks

  9. Hey i nice idea indeed!
    But I’m here to report and error unfortunately:
    “The code snippet you are trying to save produced a fatal error on line 21:

    Cannot redeclare woocommerce_quantity_input() (previously declared in /data/vhosts/oramonline.it/httpdocs/woodef/wp-content/plugins/woocommerce/includes/wc-template-functions.php:1080)”

    The line 21 is: “}”

    1. Hey Paolo, thanks for your comment! You should place my snippet in the functions.php of your child theme, not via a third party code snippet plugin. Let me know ๐Ÿ™‚

  10. Awesome one, Worked like charm. . thanks

  11. Thanks for the snippets Rodolfo! Your snippets have helped me out numerous times when I have needed to customize WooCommerce for my clients.

    Cheers,
    Shaun.

  12. I like the idea of a pluggable function, but it seems like you need to use it in functions.php and not in a custom plugin. As I understand it, if you use it in a plugin there is a chance your plugin will load before Woocommerce and the WC function will take precedence. Or does WC have an if-exists test in its declaration?

    1. Hey Peter, thanks for your comment! It’s highly recommended to use child themes and not code snippet plugins – in there everything should work and load correctly ๐Ÿ™‚

Questions? Feedback? Support? Leave your Comment Now!
If you're writing code, please wrap it between: [php] code_here [/php]

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.