Customize WooCommerce Quantity Selector

Question

I'm trying to change the default +/- quantity selector into a drop down menu with a given amount of number options (i.e. 1-10).

Anyone know how to accomplish this?

Let me know if you'd like me to post any of the code related to this.

Answer 1

I'd like to do this too. So far I found that the quantity markup is generated in woocommerce/templates/single-product/add-to-cart/quantity.php. You could make a copy of this file in a minimal mirror of the woocommerce/templates directory structure in your theme folder, e.g. in this case copy it to yourtheme/woocommerce/single-product/add-to-cart. There you can edit it without altering the plug-in and risk it being overwritten when the plug-in is updated.

Answer 2

There is a plugin that will do this for you called WooCommerce Advanced Product Quantities, it's free and will allow you to set Minimum, Maximum and Step values for all product quantity inputs. Set rules on a per product, per category/tag or site wide.

http://wordpress.org/plugins/woocommerce-incremental-product-quantities/

It also works with WooCommerce Thumbnail Input Quantities which will put those quantity boxes in all of your product thumbnail boxes.

http://wordpress.org/plugins/woocommerce-thumbnail-input-quantities/

Enjoy! Full disclosure, I'm the plugin author.

Answer 3

I have not tried this, but I found this code http://bastutor.blogspot.ca/2014/01/woocommerce-change-input-quantity-to-dropdown.html

/* Change Product Quantity Input to Dropdown */
function woocommerce_quantity_input() {
 global $product;

 $defaults = array(
  'input_name' => 'quantity',
  'input_value' => '1',
  'max_value'  => apply_filters( 'woocommerce_quantity_input_max', '', $product ),
  'min_value'  => apply_filters( 'woocommerce_quantity_input_min', '', $product ),
  'step'   => apply_filters( 'woocommerce_quantity_input_step', '1', $product ),
  'style'   => apply_filters( 'woocommerce_quantity_style', 'float:left; margin-right:10px;', $product )
 );

 if (!empty($defaults['min_value']))
  $min = $defaults['min_value'];
  else $min = 1;

 if (!empty($defaults['max_value']))
  $max = $defaults['max_value'];
  else $max = 20;

 if (!empty($defaults['step']))
  $step = $defaults['step'];
  else $step = 1;

 $options = '';
 for($count = $min;$count <= $max;$count = $count+$step){
  $options .= '<option value="' . $count . '">' . $count . '</option>';
 }

 echo '<div class="quantity_select" style="' . $defaults['style'] . '"><select name="' . esc_attr( $defaults['input_name'] ) . '" title="' . _x( 'Qty', 'Product quantity input tooltip', 'woocommerce' ) . '" class="qty">' . $options . '</select></div>';
}

Answer 4

You need to override the template "quantity-input.php" to do so add a file with the name as "quantity-input.php" in your-theme/woocommerce/global/ folder then you can make the changes in that file, now wordpress will use your file to display quantity input html.

Answer 5

Paste this in your function.php file The dropdown list works both on the product page and in the shopping cart.

Image

function woocommerce_quantity_input($args = array(), $product = null, $echo = true) {
       if (is_null($product)) {
          $product = $GLOBALS['product'];
       }
    
       // Default values
       $defaults = array(
          'input_name' => 'quantity',
          'input_value' => '1',
          'max_value' => apply_filters('woocommerce_quantity_input_max', -1, $product),
          'min_value' => apply_filters('woocommerce_quantity_input_min', 0, $product),
          'step' => 1,
       );
    
       $args = apply_filters('woocommerce_quantity_input_args', wp_parse_args($args, $defaults), $product);
    
       $args['min_value'] = max($args['min_value'], 0);
       $args['max_value'] = 0 < $args['max_value'] ? $args['max_value'] : 10;
    
       if (
          '' !== $args['max_value'] && $args['max_value'] < $args['min_value']
       ) {
          $args['max_value'] = $args['min_value'];
       }
    
       $options = '';
    
       // Add loop
       for ($count = $args['min_value']; $count <= $args['max_value']; $count = $count + $args['step']) {
    
          // Cart item quantity defined?
          if ('' !== $args['input_value'] && $args['input_value'] >= 1 && $count == $args['input_value']) {
             $selected = 'selected';
          } else {
             $selected = '';
          }
    
          $options .= '<option value="' . $count . '"' . $selected . '>' . $count . '</option>';
       }
    
       $html = '<div><div class="quantity form-select-wrapper"><select class="form- select" name="' . $args['input_name'] . '">' . $options . '</select></div><!--/.form-select-wrapper --></div>';
    
       if ($echo) {
          echo $html;
       } else {
          return $html;
       }
    }

Answer 6

Hi paste this in your function.php file
    
function woocommerce_quantity_input($data = null) {
    global $product;
    if (!$data) {
    $defaults = array(
    'input_name'   => 'quantity',
    'input_value'   => '1',
    'max_value'     => apply_filters( 'woocommerce_quantity_input_max', '', $product ),
    'min_value'     => apply_filters( 'woocommerce_quantity_input_min', '', $product ),
    'step'         => apply_filters( 'woocommerce_quantity_input_step', '1', $product ),
    'style'         => apply_filters( 'woocommerce_quantity_style', 'float:left;', $product )
    );
    } else {
    $defaults = array(
    'input_name'   => $data['input_name'],
    'input_value'   => $data['input_value'],
    'step'         => apply_filters( 'cw_woocommerce_quantity_input_step', '1', $product ),
    'max_value'     => apply_filters( 'cw_woocommerce_quantity_input_max', '', $product ),
    'min_value'     => apply_filters( 'cw_woocommerce_quantity_input_min', '', $product ),
    'style'         => apply_filters( 'cw_woocommerce_quantity_style', 'float:left;', $product )
    );
    }
    if ( ! empty( $defaults['min_value'] ) )
    $min = $defaults['min_value'];
    else $min = 1;
    if ( ! empty( $defaults['max_value'] ) )
    $max = $defaults['max_value'];
    else $max = 15;
    if ( ! empty( $defaults['step'] ) )
    $step = $defaults['step'];
    else $step = 1;
    $options = '';
    for ( $count = $min; $count <= $max; $count = $count+$step ) {
    $selected = $count === $defaults['input_value'] ? ' selected' : '';
    $options .= '<option value="' . $count . '"'.$selected.'>' . $count . '</option>';
    }
    echo '<div class="cw_quantity_select" style="' . $defaults['style'] . '"><select name="' . esc_attr( $defaults['input_name'] ) . '" title="' . _x( 'Qty', 'Product Description', 'woocommerce' ) . '" class="cw_qty">' . $options . '</select></div>';
    }