WooCommerce: Add Plus & Minus Buttons to Product Quantity Field

WooCommerce Add Plus & Minus Buttons to Product Quantity Field - Featured Image
WooCommerce Add Plus & Minus Buttons to Product Quantity Field

Problem #1: Quantity arrows but no plus / minus buttons

WooCommerce Add Plus & Minus Buttons to Product Quantity Field 01

Display Plus & Minus Quantity Buttons on WooCommerce Single Product Page and Cart Page

Add the following PHP snippet to WordPress using Code Snippets plugin (and choose the “Only run on site front-end” option):

/**
 * @snippet       Plus Minus Quantity Buttons @ WooCommerce Product Page & Cart
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 5
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */
// Source: https://www.businessbloomer.com/woocommerce-add-plus-minus-buttons-to-add-to-cart-quantity-input/
  
// -------------
// 1. Show plus minus buttons
  
add_action( 'woocommerce_after_quantity_input_field', 'bbloomer_display_quantity_plus' );
  
function bbloomer_display_quantity_plus() {
   echo '<button type="button" class="plus">+</button>';
}
  
add_action( 'woocommerce_before_quantity_input_field', 'bbloomer_display_quantity_minus' );
  
function bbloomer_display_quantity_minus() {
   echo '<button type="button" class="minus">-</button>';
}
  
// -------------
// 2. Trigger update quantity script
  
add_action( 'wp_footer', 'bbloomer_add_cart_quantity_plus_minus' );
  
function bbloomer_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();
            }
         }
 
      });
        
   " );
}

Source: WooCommerce: Add to Cart Quantity Plus & Minus Buttons

Problem #2: Plus / minus buttons but arrows remain

WooCommerce Add Plus & Minus Buttons to Product Quantity Field 02

Even though the plus & minus buttons are now on either side of the quantity field, the original arrows (also called spinners) are still being displayed. These original arrows/spinners are actually being displayed by the browser, not by the WordPress theme. It’s the <input type="number"> HTML that defines a field for entering a number.

<input type="number" id="quantity" name="quantity" min="1" max="5">

It’s the type="number" attribute of the input HTML that needs to be targeted and hidden with CSS.

Hide Product Quantity Arrows/Spinners on WooCommerce Single Product Page with CSS

To hide the arrows/spinners, add the following CSS snippet to WordPress using Code Snippets plugin (and choose the “Only run on site front-end” option):

add_action( 'wp_head', function () { ?>
<style type="text/css">
	
/* Source: https://www.w3schools.com/howto/howto_css_hide_arrow_number.asp */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
</style>
<?php } );

Source: How to hide arrows/spinners from input number

Final layout with plus / minus buttons and no quantity arrows. Yay!

WooCommerce Add Plus & Minus Buttons to Product Quantity Field 03

Similar Posts

4 Comments

    1. Hi Lukas, I only figured out how to hide the arrow buttons (also called spinners), so I never needed to style them. No clue how to style them.

Leave a Reply

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