How to add custom plus & minus buttons to quantity input in WooCommerce

How to add custom plus & minus buttons to quantity button in WooCommerce

WooCommerce is a flexible, open-source eCommerce platform in WordPress. which provide the user to buy and sell products online. It is widely used in wordpress for e-commerce sites.

Making a e-commerce site has only one aim is to impress buyers to get more and more orders for products.

We have to look unique and different in the world of competition . To show our site differently from others sites we have to think uniquely and have to modify our site’s design and functionality.

Every theme has its different way of laying out and different features. by default WooCommerce use number buttons to increase and decrease the quantity of a product before adding it to the Cart, or while updating the Cart.

In this post, we will talk about the quantity buttons that we click to increase and decrease the quantity of a product before adding it to the Cart, or while updating the Cart.

By this we can replace the default arrow signs with custom plus and minus button that are clear and effortless. so let’s see how to add plus and minus buttons to the quantity input on the product page and cart page.

Snippet for add plus and minus buttons on product page and cart page

/*============================================
=== Show plus minus buttons
============================================*/
add_action( 'woocommerce_after_quantity_input_field', 'custom_quantity_plus' );
function custom_quantity_plus() 
{
    echo '<button type="button" class="plus" >+</button>';
}
 
add_action( 'woocommerce_before_quantity_input_field', 'custom_quantity_minus' );
function custom_quantity_minus() 
{
    echo '<button type="button" class="minus" >-</button>';
}
/*============================================
=== Trigger update quantity script
============================================*/
add_action( 'wp_footer', 'add_cart_quantity_plus_minus_btns' );
function add_cart_quantity_plus_minus_btns() 
{
    if ( ! is_product() && ! is_cart() ) return;
 
    wc_enqueue_js("
        $(document).on( 'click', 'button.plus, button.minus', function() 
        {
            var qty = $( 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 ( $( 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();
                }
            }
        });
    " );
}