Quantity Input as a Dropdown in WooCommerce: Limiting Quantity to a Custom Maximum

In a recent Business Bloomer Club discussion, a WooCommerce developer encountered a challenge when implementing a quantity dropdown for product selection.

Despite setting a maximum quantity of 20, the dropdown was still allowing up to 9999 units. This scenario highlighted some key considerations when adjusting WooCommerce’s quantity input fields, especially for products with stock management enabled.

The default quantity input field in WooCommerce is typically a text field, but with some custom code, it can be turned into a dropdown to enhance user experience. Here’s a breakdown of how to modify this input field while ensuring it adheres to a maximum limit.

Key Challenge

The developer initially modified the code to limit quantities, but found that when stock management was enabled, the dropdown wasn’t respecting the intended limit. Below is a solution that overrides the maximum quantity when stock management is in effect.

Solution: Custom Quantity Dropdown with Maximum Limit

The following code snippet demonstrates how to achieve this functionality. It checks the product’s stock settings and applies a maximum value of 10 for the dropdown. If stock management is not enabled, it simply defaults to the specified maximum.

Code Example

if ( ! function_exists( 'woocommerce_quantity_input' ) ) {
    function woocommerce_quantity_input( $args = array(), $product = null, $echo = true ) { 
        if ( is_null( $product ) ) {
            $product = $GLOBALS['product'];
        }

        $defaults = array(
            'input_id'     => uniqid( 'quantity_' ),
            'input_name'   => 'quantity',
            'input_value'  => '1',
            'classes'      => apply_filters( 'woocommerce_quantity_input_classes', array( 'qty', 'text' ), $product ),
            'max_value'    => apply_filters( 'woocommerce_quantity_input_max', -1, $product ),
            'min_value'    => apply_filters( 'woocommerce_quantity_input_min', 1, $product ),
            'step'         => apply_filters( 'woocommerce_quantity_input_step', 1, $product ),
        );

        $args = apply_filters( 'woocommerce_quantity_input_args', wp_parse_args( $args, $defaults ), $product );

        // Set max quantity if it exceeds 10 or is undefined
        if ( isset( $args['max_value'] ) && ( $args['max_value'] > 10 || $args['max_value'] == -1 ) ) {
            $args['max_value'] = 10;
        }

        $options = ''; 
        for ( $count = $args['min_value']; $count <= $args['max_value']; $count += $args['step'] ) {
            $selected = ( $count == $args['input_value'] ) ? 'selected' : '';
            $options .= '<option value="' . esc_attr( $count ) . '"' . $selected . '>' . esc_html( $count ) . '</option>';
        }

        $string = '<div class="quantity"><select id="' . esc_attr( $args['input_id'] ) . '" name="' . esc_attr( $args['input_name'] ) . '" class="'. esc_attr( join( ' ', (array) $args['classes'] ) ) . '">' . $options . '</select></div>';

        if ( $echo ) {
            echo $string;
        } else {
            return $string;
        }
    }
}

Explanation

Stock Management: The code checks whether the maximum quantity exceeds 10. If so, it reverts it to 10 for a uniform limit.
Dropdown Options: Generates options dynamically based on the min and max values set.

This approach allows users to select from predefined quantities in a dropdown, with a maximum limit enforced even for products with stock management enabled, enhancing the product page’s usability and consistency.