Add Plus and Minus Buttons to WooCommerce Quantity

Want to improve user experience in your WooCommerce store? You can add plus (+) and minus (-) buttons to the quantity input using WordPress hooks and a small JavaScript snippet. Here’s how:

1. Edit the functions.php file of your active theme.
2. Add the following PHP code:

// Add plus/minus buttons to WooCommerce quantity field
function add_custom_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', 'add_custom_quantity_buttons', 10);

// Load custom JavaScript
function load_quantity_button_script() {
    wp_enqueue_script('quantity-buttons-js', get_stylesheet_directory_uri() . '/js/custom-scripts.js', array('jquery'), '1.0', true);
}
add_action('wp_enqueue_scripts', 'load_quantity_button_script');

3. Create a js folder in your theme if not present. Inside it, create a custom-scripts.js file.
4. Paste this JavaScript code:

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

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

        $qty.trigger('change');
    });
});

Once implemented, your WooCommerce product pages will show easy-to-use plus and minus quantity controls. Adjust the paths and styles as needed for your theme.