How to Add Plus and Minus Buttons for Product Quantity in WooCommerce

WooCommerce is a popular platform for online stores, but sometimes its default features may not meet all of your specific needs. One such example is the quantity input field on product pages, which only allows users to manually type in a number. This is where Plus and Minus buttons can offer a more user-friendly experience, allowing customers to easily adjust the product quantity.

In this article, we’ll walk you through the steps of adding these Plus and Minus buttons to the quantity input field in WooCommerce, using custom code. By the end of this guide, you’ll have implemented a simple, effective enhancement for your online store.

Adding WooCommerce Plus and Minus Buttons (Step-by-Step Guide)

Here’s a straightforward solution to add Plus and Minus buttons to the quantity input field on WooCommerce product pages using custom code.

1. Adding the Custom PHP Code

To start, you’ll need to open your WordPress theme’s functions.php file. This file allows you to customize the functionality of your theme. Be careful while editing this file, as incorrect code could lead to errors on your site.

<?php 
/*************** Add Minus(-) button **************/ 
add_action( 'woocommerce_before_quantity_input_field', 'wplt_quantity_minus_sign' ); 
function wplt_quantity_minus_sign() { ?> 
    <input type="button" value="-" class="qty_button minus" /> 
<?php } 

/*************** Add Plus(+) button **************/ 
add_action( 'woocommerce_after_quantity_input_field', 'wplt_quantity_plus_sign' ); 
function wplt_quantity_plus_sign() { ?> 
    <input type="button" value="+" class="qty_button plus" /> 
<?php } 
function wplt_quantity_plus_minus() { 

   // To run this on the single product page 

   if ( ! is_product() ) return; 
   ?> 
    <script type="text/javascript"> 
        // (function ($) { 
            jQuery(document).ready(function($){ 
                if ( ! String.prototype.getDecimals ) { 
                    String.prototype.getDecimals = function() { 
                        var number = this, 
                        match = ('' + number).match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/); 
                        if ( ! match ) { 
                        return 0; 
                        } 
                        return Math.max( 0, ( match[1] ? match[1].length : 0 ) - ( match[2] ? +match[2] : 0 ) );
                    }
                }

                // Quantity "plus" and "minus" buttons. 

                $( document.body ).on( 'click', '.plus, .minus', function() { 

                    var qty = $( this ).closest( '.quantity' ).find( '.qty'), 

                    currentValue = parseFloat( qty.val() ), 

                    max = parseFloat( qty.attr( 'max' ) ), 

                    min = parseFloat( qty.attr( 'min' ) ), 

                    step = qty.attr( 'step' );

                    // Format values. 

                    if ( ! currentValue || currentValue === '' || currentValue === 'NaN' ) currentValue = 0; 
                    if ( max === '' || max === 'NaN' ) max = ''; 

                    if ( min === '' || min === 'NaN' ) min = 0; 

                    if ( step === 'any' || step === '' || step === undefined || parseFloat( step ) === 'NaN' ) step = 1;
                    // Change the value. 
                    if ( $( this ).is( '.plus' ) ) { 
                        if ( max && ( currentValue >= max ) ) { 
                            qty.val( max ); 
                        } else { 
                            qty.val( ( currentValue + parseFloat( step )).toFixed( step.getDecimals() ) );
                        } 
                    } else { 
                        if ( min && ( currentValue <= min ) ) { 
                            qty.val( min ); 
                        } else if ( currentValue > 0 ) {
                            qty.val( ( currentValue - parseFloat( step )).toFixed( step.getDecimals() ) );
                        }
                    }
                    // Trigger change event.
                    qty.trigger( 'change' );
                });
            });
        // })(jQuery);
    </script>
   <?php
}
?> 

This code creates the Plus and Minus buttons and attaches them to the quantity input field. The buttons are powered by jQuery, which listens for clicks on the Plus or Minus buttons and adjusts the quantity accordingly. This code ensures that the quantity cannot go below 1.

2. Styling the Buttons with CSS

Next, we’ll style the buttons to make them visually appealing and aligned with your WooCommerce theme. For this, you’ll need to open your style.css file, where you can add the following CSS:

.quantity input::-webkit-outer-spin-button, 
.quantity input::-webkit-inner-spin-button { 
    display: none; 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none; 
    margin: 0; 
} 
.quantity input.qty[type=number] { 
    appearance: textfield; 
    -webkit-appearance: none; 
    -moz-appearance: textfield; 

} 
.woocommerce .quantity .qty { 
    background: none; 
    margin-right: 0; 
} 

input.qty_button { 
    height: 100%;
    padding: 8px 9px;
    min-width: 56px;
    width: 3.631em;
    font-size: 14px;
    border: 1px solid #d3ced2;
    outline: none;
    font-family: inherit;
    resize: none;
    border-radius: 4px;
    text-shadow: 1px 1px 1px #fff;
    cursor: pointer;
} 
.woocommerce div.product form.cart div.quantity {
    margin-right: 20px;
} 

This CSS adds basic styling to your Plus and Minus buttons, ensuring they are easy to see and click. You can modify the styles to match the design of your WooCommerce store.

3. Testing Your Changes

After adding the code to your functions.php and style.css files, visit a product page to see the Plus and Minus buttons in action. Ensure that the buttons function as expected, increasing and decreasing the product quantity with each click.

Conclusion

By following these steps, you have successfully added Plus and Minus buttons for quantity selection in WooCommerce. This small enhancement can significantly improve the shopping experience on your site, making it easier for customers to adjust their desired quantities.

If you’re looking for more advanced functionality or customizations, our expert WordPress developers are here to help you turn your ideas into reality. Let’s work together to create a better, more user-friendly online store. Reach out today and start making your site work for you.