How to add plus + and minus – buttons to the quantity input in WooCommerce

Add This Code function.php file of your theme

Here’s a quick snippet you can simply copy/paste to show a “+” and a “-” on each side of the quantity number input on the WooCommerce products.

Note: you will probably also require some custom CSS, as your theme might give a “float” display to the quantity buttons (by default HTML buttons take inline-block).

<style>
.quantity {
    float: none;
    margin: 0;
    display: inline-block;
}
</style>

<?php
// 1. Show plus minus buttons
add_action('woocommerce_after_quantity_input_field', 'ewpexpert_display_quantity_plus');
add_action('woocommerce_before_quantity_input_field', 'ewpexpert_display_quantity_minus');

function ewpexpert_display_quantity_plus() {
    echo '<button type="button" class="plus">+</button>';
}
function ewpexpert_display_quantity_minus() {
    echo '<button type="button" class="minus">-</button>';
}

// 2. Trigger update quantity script
add_action('wp_footer', 'ewpexpert_add_cart_quantity_plus_minus');

function ewpexpert_add_cart_quantity_plus_minus() {
    ? >
    <script type = "text/javascript" >
        jQuery(document).ready(function() {
            jQuery(document).on('click', 'button.plus, button.minus', function() {
                var qty = jQuery(this).parent('.quantity').find('.qty');
                var val = parseFloat(qty.val());
                var max = parseFloat(qty.attr('max'));
                var min = parseFloat(qty.attr('min'));
                var step = parseFloat(qty.attr('step'));
                if (jQuery(this).is('.plus')) {
                    if (max && (max <= val)) {
                        qty.val(max).change();
                    } else {
                        qty.val(val + step).change();
                    }
                } else {
                    if (min && (min >= val)) {
                        qty.val(min).change();
                    } else if (val > 1) {
                        qty.val(val - step).change();
                    }
                }

                qty.trigger("click");
            });
        }); <script type = "text/javascript" >
        <
        ? php
}

How to add plus + and minus – buttons to the quantity input in WooCommerce

Add This Code function.php file of your theme

Leave a Reply Cancel reply