Chat with us, powered by LiveChat

This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

Change the Default Display Quantity Select Box in WooCommerce

May 23, 2017

3 Min Read
Reading Time: 3 minutes

There is a default quantity input box in the product pages of your WooCommerce store. 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 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 default range input option.If you need help with the code or would like to suggest improvements, do leave a comment below.

Share your opinion in the comment section. COMMENT NOW

Share This Article

Your WooCommerce Store Needs A Reliable Host

With no compromise on Performance, Security & Support.

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 owais.alam@cloudways.com

Get Our Newsletter
Be the first to get the latest updates and tutorials.

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!