Add quantity buttons to WooCommerce

woocommerce-quantity-buttons.php

<?php

/**
 * Quantity buttons
 */
add_action( 'woocommerce_after_quantity_input_field', 'arendelle_quantity_plus_sign' ); 
function arendelle_quantity_plus_sign() {
	echo '<span class="quantity__button quantity__plus"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg></span>';
}
 
add_action( 'woocommerce_before_quantity_input_field', 'arendelle_quantity_minus_sign' );
function arendelle_quantity_minus_sign() {
	echo '<span class="quantity__button quantity__minus"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-minus"><line x1="5" y1="12" x2="19" y2="12"></line></svg></span>';
}

add_action( 'wp_footer', 'arendelle_quantity_plus_minus' ); 
function arendelle_quantity_plus_minus() {

   ?>
		<script type="text/javascript">
						
			jQuery(document).ready(function($) {   
					
				var forms = jQuery('.woocommerce-cart-form, form.cart');
						forms.find('.quantity.hidden').prev( '.quantity__button' ).hide();
						forms.find('.quantity.hidden').next( '.quantity__button' ).hide();

				$(document).on( 'click', 'form.cart .quantity__button, .woocommerce-cart-form .quantity__button', function() {

					var $this = $(this);					

					// Get current quantity values
					var qty = $this.closest( '.quantity' ).find( '.qty' );
					var val = ( qty.val() == '' ) ? 0 : 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( '.quantity__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();
						}
					}							
				});          
			});
						
		</script>
   <?php
}

Hi.

Thanks for sharing your code, it help-me a lot.

I made a small adjustment, on line 52: else if (val> = 1) { I removed the ** = ** sign so when you click the minus button it doesn't get to "** 0 **"

Could you explain to me what the function of this part of the code below do?

var forms = jQuery('.woocommerce-cart-form, form.cart');
		forms.find('.quantity.hidden').prev( '.quantity__button' ).hide();
		forms.find('.quantity.hidden').next( '.quantity__button' ).hide();

I figured it was to remove the native ^ and v arrows from the fields, and since I disabled this via css and I thought I wouldn't need this snippet and removed it.

In my tests it is normally working.

What exactly does this piece of code do?

Could you explain to me what the function of this part of the code below do?

var forms = jQuery('.woocommerce-cart-form, form.cart');
		forms.find('.quantity.hidden').prev( '.quantity__button' ).hide();
		forms.find('.quantity.hidden').next( '.quantity__button' ).hide();

This code is necessary in case you have a product that sold individually. You can test this option in Product -> Inventory -> Sold individually checkbox. Without this code, the quantity input will not show up and only arrows will display.

Could you explain to me what the function of this part of the code below do?

var forms = jQuery('.woocommerce-cart-form, form.cart');
		forms.find('.quantity.hidden').prev( '.quantity__button' ).hide();
		forms.find('.quantity.hidden').next( '.quantity__button' ).hide();

This code is necessary in case you have a product that sold individually. You can test this option in Product -> Inventory -> Sold individually checkbox. Without this code, the quantity input will not show up and only arrows will display.

Ok, Very Nice.

Thanks for explain.

Have a Grate Week!

Hi again.
On the SLACK forum where I looked for help on the solution you developed, I received some instructions from a user who can guarantee that the code is compatible with more plugins. Here's what she wrote:

*** As someone who fields support tickets from people who use my plugin with custom plus/minus buttons... please be sure to:
01 - link the plus/minus buttons to the closest quantity input (sometimes there's more than 1)
02 - correctly handle an empty input... assume empty = 0
03 - chain a .change() event on the input after you change the value of the input.**

She's even here on GitHub as: https://github.com/helgatheviking
He is a very helpful person!

Hello @DeoThemes

After implementing this solution,
https://docs.woocommerce.com/document/override-loop-template-and-show-quantities-next-to-add-to-cart-buttons/
To show the Quantity fields and your code to show the buttons.

I found that it doesn't work with Ajax.

So I found another one that works. However, it came with a small problem.

I use the ContentViews Plugin to display my products, and the quantity field is not showing up in ContentViews with the new code.

Plugin developers told me that:
Our plugin uses the "add_to_cart" shortcode of WooCommerce to show the "Add to cart" button.

Look to the code:
https://gist.github.com/webaware/6260468

Looking at the code, is it possible to know how to change it so that it is also displayed in the contentviews listing?

Solved,
This plugin show quantity buttons on all places and work with ajax.
https://br.wordpress.org/plugins/quantity-field-on-shop-page-for-woocommerce/

Thanks.