How to Add Quantity Plus and Minus Buttons in WooCommerce?

In this blog, we will see how we can display custom minus and plus quantity buttons on a WooCommerce product page and cart page.

Step 1: Create a Custom Plugin

First of all, create a directory for your new plugin in the plugins directory path i.e. ‘/wp-content/plugins/’. In my case, the directory name is ‘wc-add-to-cart-plus-minus-button’ you can change your directory name as you want.

Next, Open this folder in your preferred text editor and create a php file like ‘demo.php’.

Put the following header comments in the PHP file to make this a plugin file.

/**
 * Plugin Name: WooCommerce Custom Add To Cart Plus & Minus Button
 * Description: To add custom plus and minus button for add to cart items.
 * Version: 1.0.0
 * Author: Webkul
 *
 * @package WooCommerce Custom Add To Cart Plus & Minus Button
 */

You can change the above information to match your details.

Step 2: Add the Code for the Add to Cart Quantity Plus & Minus Buttons

Now, add the below code to this file for displaying the custom minus and plus quantity buttons on a WooCommerce single product page and cart page.

defined( 'ABSPATH' ) || exit(); // Exit if accessed directly.

if ( ! class_exists( 'Rk_Plus_Minus' ) ) {

	/**
	 * Main Class.
	 */
	class Rk_Plus_Minus {

		/**
		 * The instance variable of the class.
		 *
		 * @var $instance.
		 */
		protected static $instance = null;

		/**
		 * Constructor of this class.
		 */
		public function __construct() {
			add_action( 'woocommerce_after_quantity_input_field', array( $this, 'rk_display_quantity_plus' ) );
			add_action( 'woocommerce_before_quantity_input_field', array( $this, 'rk_display_quantity_minus' ) );
			add_action( 'wp_footer', array( $this, 'rk_add_cart_quantity_plus_minus' ) );
		}

		/**
		 * Display plus button after Add to Cart button.
		 */
		public function rk_display_quantity_plus() {
			echo '<button type="button" class="plus">+</button>';
		}

		/**
		 * Display minus button before Add to Cart button.
		 */
		public function rk_display_quantity_minus() {
			echo '<button type="button" class="minus">-</button>';
		}

		/**
		 * Enqueue script.
		 */
		public function rk_add_cart_quantity_plus_minus() {

			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();
						}
					}

				});"
			);
		}

		/**
		 * Instance of this class.
		 *
		 * @return object.
		 */
		public static function get_instance() {
			if ( is_null( self::$instance ) ) {
				self::$instance = new self();
			}

			return self::$instance;
		}
	}
}

Rk_Plus_Minus::get_instance();

Step 3: Save and Activate the Plugin

Once you have added the code to the main plugin file, save the file and activate the plugin in the WordPress admin panel. To activate the plugin, go to the “Plugins” menu and find the plugin you just created. Click “Activate” to activate the plugin.

Step 4: Test the Custom Quantity Buttons

After activating the plugin, go to the shop page and click on any product. Now you can see the plus and minus quantity buttons around Add to Cart button on the WooCommerce Single Product Page as shown in the below image.

On the Cart Page, it will look like the following image:

Conclusion

Adding a custom add-to-cart quantity plus and minus buttons to the WooCommerce shop page is a simple and effective way to improve the user experience of your online store.

With the sample code provided above, you can easily create a custom Add to Cart Quantity Plus & Minus buttons on Single Product Page and Cart Page.

That’s all about “How to do Add to Cart Quantity Plus & Minus Buttons in Woocommerce?”.

Support

If you need any technical assistance, please reach us by mail at support@webkul.com. Also, discover various solutions to add more features and enhance your online store by visiting the WooCommerce plugins page. Additionally, if you require expert assistance or want to develop custom unique functionality or want to create a Custom WordPress Theme then Hire WooCommerce Developers for your project.