How To Add Plus & Minus Buttons In WooCommerce To Cart or Product Archive

In this tutorial, we are going to show you a very simple way to show a + and a - (plus & minus) on each side of the quantity number input on the WooCommerce single product page. We will also show you how you can apply this to the product archive page as well.

For this, we use jQuery as we need to detect whether the plus or minus are clicked so that we can update the quantity input value. jQuery code can be daunting for some, but the beauty of this is that it’s a simple copy and paste tutorial.

Do note, you may require some additional CSS to what we have provided to match the theme of your website. We’ve added some CSS to this tutorial to get you going. What you will end up with is something like this:

Here is the snippet to add plus and minus buttons in WooCommerce

You can simply copy and paste the below code to your functions.php file:


/**
 * Plus Minus Quantity Buttons @ WooCommerce Single Product Page
 */
  
// -------------
// 1. Show Buttons
  
add_action( 'woocommerce_before_add_to_cart_quantity', 'silva_display_quantity_plus' );
  
function silva_display_quantity_plus() {
   echo '<button type="button" class="plus" >+</button>';
}
  
add_action( 'woocommerce_after_add_to_cart_quantity', 'silva_display_quantity_minus' );
  
function silva_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', 'silva_display_quantity_minus' );
// add_action( 'woocommerce_after_add_to_cart_quantity', 'silva_display_quantity_plus' );
  
// -------------
// 2. Trigger jQuery script
  
add_action( 'wp_footer', 'silva_add_cart_quantity_plus_minus' );
  
function silva_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
}

To get this looking like our example, we need to add some CSS code as well. This depends on the theme but to get you started, you can add the following CSS code:


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

How we used this in our example website; Product Archive

We simply added the below code to our functions.php file:


/**
 *	Show Quantity On Products
 */

add_action( 'woocommerce_before_add_to_cart_quantity', 'silva_echo_qty_front_add_cart' );
 
function silva_echo_qty_front_add_cart() {
 echo '<div class="qty-txt">Quantity: </div>'; 
}


/**
 * Plus Minus Quantity Buttons @ WooCommerce Single Product Page
 */
  
// -------------
// 1. Show Buttons
  
add_action( 'woocommerce_before_add_to_cart_quantity', 'silva_display_quantity_plus' );
  
function silva_display_quantity_plus() {
   echo '<button type="button" class="minus" >-</button>';
}
  
add_action( 'woocommerce_after_add_to_cart_quantity', 'silva_display_quantity_minus' );
  
function silva_display_quantity_minus() {
   echo '<button type="button" class="plus" >+</button>';
}
 
// Note: to place minus @ left and plus @ right replace above add_actions with:
// add_action( 'woocommerce_before_add_to_cart_quantity', 'silva_display_quantity_minus' );
// add_action( 'woocommerce_after_add_to_cart_quantity', 'silva_display_quantity_plus' );
  
// -------------
// 2. Trigger jQuery script
  
add_action( 'wp_footer', 'silva_add_cart_quantity_plus_minus' );
  
function silva_add_cart_quantity_plus_minus() {
   ?>
      <script type="text/javascript">
           
      jQuery(document).ready(function($){   
           
         $('.woocommerce-variation-add-to-cart').on( 'click', 'button.plus, button.minus', function() {

            // Get current quantity values
            if ( $( this ).is( '.minus' ) ) {
            	var qty = $(this).next().find('.qty');
        	} else {
        		var qty = $(this).prev().find('.qty');
        	}
            var val   = parseFloat(qty.val());
            console.log(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
}

Conclusion

Simple right? We can now add a plus and minus button for each product on either the archive product page or the single product page. This can be extremely useful for both pages, to be honest. Quite often, a lot of people don't know how to work a number input field, so instead, we can add two simple buttons to increase or decrease the quantity of a product you wish to add to the cart. It's a great simple way to improve the UI/UX to your WooCommerce store, that's for sure!

If you enjoyed this tutorial or if you require any help with the setup, feel free to drop us a comment below and we'll be happy to assist you with this!

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How to Display Related Posts in WordPress

In this tutorial, we are going to show you two ways to display related posts on your WordPress website.

If you know a bit about bounce rate, you are probably already showing related posts on your website. Essentially, the bounce rate is a metric that measures the percentage of people who land on your website and do completely nothing on the page they entered. So they don’t click on a menu item, a ‘read more’ link or any other internal links on the page. This can have an effect on things such as your AdSense earnings. By following this tutorial and adding Related Posts to your WordPress; you are killing three birds with one stone. You are decreasing your bounce rate, increasing your AdSense income, and lastly, you are increasing your page views. As always, we will show you two methods in which you can add related posts to your WordPress website.

How to Display Related Posts in WordPress without a Plugin

As always, we start with our preferred method of adding this without a plugin. In our example, we are going to display two related posts which link to the post. We are adding the featured image, the category, the date, the title and a read more button.

The code can simply be pasted into your single.php file in a position in which you want to display your related posts.


// Related Posts
$tags = wp_get_post_tags($post->ID);
if ($tags) {
	echo '<h3>Related Posts</h3>';
	$first_tag = $tags[0]->term_id;

	$args=array(
		'tag__in' => array($first_tag),
		'post__not_in' => array($post->ID),
		'posts_per_page' => 2, // How many Posts to display
		'caller_get_posts' => 1 // A way to turn sticky posts off in a query.
	);
	$my_query = new WP_Query($args);
	if( $my_query->have_posts() ) {
		while ($my_query->have_posts()) : $my_query->the_post(); ?>										
			<a href="<?php the_permalink(); ?>">
				<?php if(get_the_post_thumbnail_url()) { ?>
    				<img alt="Related - <?php the_title(); ?>" src="<?php echo get_the_post_thumbnail_url(); ?>" />
    			<?php } else { ?>
    				<div class="img-holder"></div>
    			<?php } ?>	
			</a>												
			<?php $category = get_the_category(); ?>
			<p><?php echo $category[0]->cat_name; ?> / <?php echo get_the_date(); ?></p>													
			<a href="<?php the_permalink() ?>" rel="bookmark"><h4><?php the_title(); ?></h4></a>
			<a class="btn" href="<?php the_permalink(); ?>">Read More</a>
	<?php
	endwhile;
	}
wp_reset_query();
}

How to Display Related Posts in WordPress with a Plugin

A plugin can be used instead to do a similar thing. We used Yet Another Related Posts Plugin (YARPP) which gives a list of posts or pages related to the current blog post.

The key features of this plugin are:

  • You can use thumbnail or list view for your related content.
  • It will display related posts, pages, and custom post types.
  • It has a templating system which gives you advanced control of how your results are displayed.
  • It has an advanced and versatile algorithm. This is a fully customisable algorithm which considers post titles, content, tags, categories, and custom taxonomies. A very great feature to ensure your posts are accurately related to the post.
  • It includes an option to display related posts in RSS feeds with custom display options.
  • It includes REST API support which enables you to embed related posts in your web or JavaScript-driven app!
  • It includes shortcode support. So you can simply add the [yarpp] shortcode to place related posts anywhere you like.
  • It supports HTTPS and WordPress Multisite
  • And it's a plugin that is maintained with regular updates

Sounds good right? Download YARPP.

Conclusion

We now know of two methods on how we can add Related Posts to our WordPress website. We also now know the importance of how this can improve our bounce rate. So, which method did you prefer? Let us know in the comments below!

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share