Back to Top

How to Add Quantity Plus and Minus Buttons in WooCommerce?

Updated 6 June 2024

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.

Searching for an experienced
Woocommerce Company ?
Find out More

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.

activate_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.

plus_minus_buttons

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

plus_minus_button_cart_page

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 [email protected]. 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.

. . .

Leave a Comment

Your email address will not be published. Required fields are marked*


1 comments

  • Bob
  • Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home