Enable Plus Minus Button for Product Quantity in WooCommerce

Want to simplify product quantity input for your WooCommerce store? Add dynamic “+” and “−” buttons to the quantity selector using action hooks and JavaScript.

Step 1: Update Your Theme’s functions.php File

Navigate to your theme’s functions.php and include the code below:

// Insert plus and minus buttons around quantity input
function woocommerce_quantity_buttons() {
    echo '<div class="quantity-buttons">';
    echo '<span class="minus">-</span>';
    echo '<input type="number" step="1" min="1" max="" name="quantity" value="1" class="input-text qty text" size="4" />';
    echo '<span class="plus">+</span>';
    echo '</div>';
}
add_action('woocommerce_before_add_to_cart_quantity', 'woocommerce_quantity_buttons', 10);

// Load the JS file
function load_quantity_js() {
    wp_enqueue_script('quantity-script', get_stylesheet_directory_uri() . '/js/custom-scripts.js', array('jquery'), '1.0', true);
}
add_action('wp_enqueue_scripts', 'load_quantity_js');

Step 2: JavaScript for Button Functionality

Create a new file at /js/custom-scripts.js inside your theme and paste this:

jQuery(document).ready(function($) {
    $(document).on('click', '.plus, .minus', function() {
        var $input = $(this).siblings('input[type="number"]');
        var current = parseFloat($input.val());
        var min = parseFloat($input.attr('min'));
        var max = parseFloat($input.attr('max'));
        var step = parseFloat($input.attr('step'));

        if ($(this).hasClass('plus')) {
            if (current < max || isNaN(max)) { $input.val(current + step); } } else { if (current > min) {
                $input.val(current - step);
            }
        }

        $input.change();
    });
});

Conclusion:

This tweak enhances your product pages with user-friendly quantity control using “+” and “−” buttons. Adjust paths if needed based on your theme’s folder structure.