How to Add Plus and Minus Buttons to the WooCommerce Quantity Field (No Plugin, Auto-Updates Cart)

How to Add Plus and Minus Buttons to the WooCommerce Quantity Field (No Plugin, Auto-Updates Cart)

Replace the default WooCommerce quantity arrows with clean SVG plus and minus buttons that automatically update the cart total on click. No plugin needed, no template overrides.

The default WooCommerce quantity field uses a number input with small browser-native arrows. Functionally fine, but visually underwhelming. Plus and minus buttons are cleaner, more touch-friendly, and what most customers expect from a modern store.

Most snippets floating around either rely on outdated WooCommerce code or skip the cart auto-update entirely, meaning customers have to click “Update Cart” manually after changing quantities. After testing several approaches, here is the version that works correctly:

  • Adds SVG plus and minus buttons
  • Hides the default browser arrows
  • Automatically recalculates the cart total on click
  • Requires no quantity-input.php template override

Step 1: Add Plus and Minus Buttons

Add this to your child theme’s functions.php or a custom PHP snippets plugin:


add_action( 'woocommerce_after_quantity_input_field', 'ab_quantity_plus' );

function ab_quantity_plus() {
    echo '<div class="plus">
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M15.5 9.4h-4.9V4.5a.6.6 0 10-1.2 0v4.9H4.5a.6.6 0 000 1.2h4.9v4.9a.6.6 0 001.2 0v-4.9h4.9a.6.6 0 100-1.2z" fill="currentColor"></path>
        </svg>
    </div>';
}

add_action( 'woocommerce_before_quantity_input_field', 'ab_quantity_minus' );

function ab_quantity_minus() {
    echo '<div class="minus">
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M15.5 9.45h-11a.55.55 0 000 1.1h11a.55.55 0 000-1.1z" fill="currentColor"></path>
        </svg>
    </div>';
}

Step 2: Add jQuery for Click Handling and Cart Auto-Update

This script does two things: updates the quantity value when a button is clicked, and immediately triggers the cart recalculation so the order total updates without requiring a manual “Update Cart” click.


function ab_add_quantity_script() {
    if ( ! is_admin() ) { ?>
        <script>
        jQuery(document).ready(function($) {

            $(document).on('click', '.plus', function(e) {
                var $input = $(this).prev('input.qty');
                var val    = parseInt($input.val());
                var step   = $input.attr('step');
                step = 'undefined' !== typeof(step) ? parseInt(step) : 1;
                $input.val(val + step).change();
                $('[name="update_cart"]').trigger('click');
            });

            $(document).on('click', '.minus', function(e) {
                var $input = $(this).next('label').next('input.qty');
                var val    = parseInt($input.val());
                var step   = $input.attr('step');
                step = 'undefined' !== typeof(step) ? parseInt(step) : 1;
                if (val > 0) {
                    $input.val(val - step).change();
                }
                $('[name="update_cart"]').trigger('click');
            });

        });
        </script>
    <?php }
}

add_action( 'wp_footer', 'ab_add_quantity_script' );

Note: the $('[name="update_cart"]').trigger('click') line targets the Update Cart button on the cart page. On single product pages that button doesn’t exist, so the trigger fires silently without causing any errors.

Step 3: Remove the Default Browser Arrows

Add to your child theme’s style.css or via Appearance > Customize > Additional CSS. If you use Elementor Pro, you can also add this under Elementor > Custom Code in the </body> section:


.quantity input::-webkit-outer-spin-button,
.quantity input::-webkit-inner-spin-button {
    display: none;
    margin: 0;
}

.quantity input.qty {
    appearance: textfield;
    -webkit-appearance: none;
    -moz-appearance: textfield;
}

Step 4: Style the Buttons and Input Field

This CSS is based on the Elementor Hello theme. Adjust values to match your own theme’s spacing and colors:


/* Input field */
.woocommerce .input-text.qty {
    padding: 0 !important;
    text-align: center !important;
    min-height: 18px;
    max-height: 18px;
    width: 2em;
    border: none;
    background: transparent;
}

.product-quantity .quantity,
.product .quantity {
    display: flex;
    align-items: center;
    justify-content: center;
}

th.product-quantity {
    text-align: center;
}

.product .cart {
    display: flex;
    align-items: center;
}

/* Plus and minus buttons */
.minus,
.plus {
    display: flex;
    align-items: center;
    color: #454545;
    padding: 3px;
    height: 26px;
    width: 26px;
    border: 1px solid #454545;
    border-radius: 50px;
}

.minus:hover,
.plus:hover {
    color: #454545;
    cursor: pointer;
}

WooCommerce quantity buttons, plus minus WooCommerce, WooCommerce quantity field, auto update cart WooCommerce, functions.php WooCommerce, jQuery WooCommerce cart, WordPress ecommerce customization,

Related Posts