You Are Here
PHPStackoverflow

A Complete Guide on WooCommerce Add to Cart Plus & Minus Buttons

PHP, Woocommerce, Wordpress

WooCommerce Add to Cart Plus & Minus Buttons provides ease when adding or deleting the products from the cart. Adding the snippet for this task is easy! In this tutorial, we will show you a snippet that you can copy to add ‘+’ or ‘-’ buttons. These buttons will represent the quantity on WooCommerce product pages. 

Further, this snippet also has a jQuery script. It helps you in detecting whether the + or – buttons are getting clicked or not. You can just copy & paste below code & enable the functionality. One thing to note that you might require an additional CSS. The reason being your theme can give a ‘float’ to the quantity while HTML buttons take inline-block. 

Image indicating WooCommerce Add to Cart Plus & Minus Buttons

PHP Snippet: Showcase ‘+’ or ‘-’ quantity buttons on WooCommerce Product Page

// 1. Show Buttons
add_action( 'woocommerce_before_add_to_cart_quantity', 'phpsof_display_quantity_plus' );
  
function phpsof_display_quantity_plus() {
   echo '<button type="button" class="plus" >+</button>';
}
  
add_action( 'woocommerce_after_add_to_cart_quantity', 'phpsof_display_quantity_minus' );
function phpsof_display_quantity_minus() {
   echo '<button type="button" class="minus" >-</button>';
}
 
// Note: to place minus @ left and plus @ right replace above add_actions with:
// add_action( 'woocommerce_before_add_to_cart_quantity', 'phpsof_display_quantity_minus' );
// add_action( 'woocommerce_after_add_to_cart_quantity', 'phpsof_display_quantity_plus' );
  
// -------------
// 2. Trigger jQuery script
  
add_action( 'wp_footer', 'phpsof_add_cart_quantity_plus_minus' );
  
function phpsof_add_cart_quantity_plus_minus() {
   // Only run this on the single product page
   if ( ! is_product() ) return;
   ?>
      <script type="text/javascript">
           
      jQuery(document).ready(function($){   
           
         $('form.cart').on( 'click', 'button.plus, button.minus', function() {
  
            // Get current quantity values
            var qty = $( this ).closest( 'form.cart' ).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' ));
  
            // Change the value if plus or minus
            if ( $( this ).is( '.plus' ) ) {
               if ( max && ( max <= val ) ) {
                  qty.val( max );
               } else {
                  qty.val( val + step );
               }
            } else {
               if ( min && ( min >= val ) ) {
                  qty.val( min );
               } else if ( val > 1 ) {
                  qty.val( val - step );
               }
            }
              
         });
           
      });
           
      </script>
   <?php
}

CSS Snippet: Modify the quantity to keep the ‘+’ or ‘-’ buttons on either side of it

As said above, a theme can apply ‘float’ to the quantity. The result of which your plus and minus buttons can appear on the same side. In other words, these buttons will not appear on the left or right side. 

You can use the below-mentioned CSS to remove this error.

.single-product div.product form.cart .quantity {
float: none;
margin: 0;
display: inline-block;
}

Where to add the Snippet?

You can place the snippet in either of two ways. In the first way, you can put it at the bottom of your child theme functions.php file (delete “?>” if you have any). Secondly, CSS can go in your child theme style.css file. This is how you can enable WooCommerce Add to Cart Plus & Minus Buttons. In the end, it will improve the overall user experience on your website. 

Also Read, WooCommerce How to Remove Product from Cart Programmatically

A Guide to Create WooCommerce Custom Login and Registration Pages

Related Posts