How to Change the WooCommerce Default Quantity Select Box

There is a WooCommerce default quantity input box in the product pages. However, there is not much you could do with this box.

A common use case is “idiot proofing” this box to make sure that the users could not enter their own values in the box. Instead, they could only select from the presented options. Note that this box is a text field.

This is how the default WooCommerce product page quantity box looks like:

By default,  WooCommerce cart page shows the quantity box as a range:

I will now demonstrate how to replace quantity text fields with a dropdown box. This will be done through the following code (located in functions.php of the theme folder):

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>';



}

Once the code has been added, the WooCommerce default quantity box will change to the dropbox:

The cart page will look like:

Final Thoughts

In this tutorial, I discussed how to display quantity select box as a dropdown, instead of the WooCommerce default quantity input option. If you need help with the code or would like to suggest improvements, do leave a comment below.

Owais Alam

is the WordPress Community Manager at Cloudways - A Managed WooCommerce Hosting Platform and a seasoned PHP developer. He loves to develop all sorts of websites on WordPress and is in love with WooCommerce in particular. You can email him at [email protected]

Get Connected on: Twitter Community Forum