Add plus and minus buttons to WooCommerce

Question

WooCommerce decided to remove the + and - buttons from the product and cart pages to increase or decrease quantity. They say it was redundant to have and if anyone wants them back just install another plugin from them.

I, like others, don't wish to install a plugin when using code is the wiser option. Better yet, we should've been given the choice to keep them or not. I digress...

I've scoured the net for a solution, tried a couple, but no joy. Would really appreciate assistance with code needed to bring them back and where that code should be placed.

Found an answer on another thread here, though not sure exactly where it goes or if this is what I need to bring the buttons back

// Input +- tweak

$(function(a) {
    a(".woocommerce-ordering").on("change", "select.orderby", function() {
         a(this).closest("form").submit();
     }),
     a("div.quantity:not(.buttons_added), td.quantity:not(.buttons_added)").addClass("buttons_added").append('<input type="button" value="+" class="plus" />').prepend('<input type="button" value="-" class="minus" />'), a("input.qty:not(.product-quantity input.qty)").each(function() {
         var b = parseFloat(a(this).attr("min"));
         b && b > 0 && parseFloat(a(this).val()) < b && a(this).val(b);
     }),
     a(document).on("click", ".plus, .minus", function() {
         var b = a(this).closest(".quantity").find(".qty"),
             c = parseFloat(b.val()),
             d = parseFloat(b.attr("max")),
             e = parseFloat(b.attr("min")),
             f = b.attr("step");
         c && "" !== c && "NaN" !== c || (c = 0),
             ("" === d || "NaN" === d) && (d = ""),
             ("" === e || "NaN" === e) && (e = 0),
             ("any" === f || "" === f || void 0 === f || "NaN" === parseFloat(f)) && (f = 1),
             a(this).is(".plus") ? b.val(d && (d == c || c > d) ? d : c + parseFloat(f)) : e && (e == c || e > c) ? b.val(e) : c > 0 && b.val(c - parseFloat(f)),
             b.trigger("change");
     });
});

Thanks in advance!

Answer 1

<?php
/**
 * Product quantity inputs
 *
 * @author      WooThemes
 * @package     WooCommerce/Templates
 * @version     2.1.0
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly
}

?>
<div class="quantity">
    <input type="text" pattern="[0-9]*" step="<?php echo esc_attr( $step ); ?>" <?php if ( is_numeric( $min_value ) ) : ?>min="<?php echo esc_attr( $min_value ); ?>"<?php endif; ?> <?php if ( is_numeric( $max_value ) ) : ?>max="<?php echo esc_attr( $max_value ); ?>"<?php endif; ?> name="<?php echo esc_attr( $input_name ); ?>" value="<?php echo esc_attr( $input_value ); ?>" title="<?php _ex( 'Qty', 'Product quantity input tooltip', 'moto' ) ?>" class="input-text qty text" size="4" />
    <span class="td-quantity-button plus">+</span>
    <span class="td-quantity-button min">-</span>
</div>

Answer 2

If you want a clean solution to add "-" and "+" increment buttons to WooCommerce product and cart page, with easy customization options, I created a plugin which does it without overriding templates, through hooks only:

Qty Increment Buttons for WooCommerce

PHP and jQuery code is only part of solution, because multiple CSS manipulations are required to make these inserted buttons presentable. WooCommerce 3.0 comes with additional hooks for product page, so implementation is even easier, but they are not a must and I got it to work for older versions as well.

Here is my jQuery code:

// Make code work on page load (this js file is executed only on product and cart page).
$(document).ready(function(){
    QtyChng();
});

// Make code work after executing AJAX on cart page. Support for default WooCommerce and plugins using AJAX on cart page.
$( document.body ).on( 'updated_cart_totals', function(){
    QtyChng();
});

function QtyChng() {    
    $('.woocommerce form.cart, .woocommerce td.product-quantity').on( 'click', '.qib-button', function() {

        // Find quantity input field corresponding to increment button clicked. 
        var qty = $( this ).siblings( '.quantity' ).find( '.qty' );
        // Read value and attributes 'min', 'max', 'step'.
        var val = parseFloat(qty.val());
        var max = parseFloat(qty.attr( 'max' ));
        var min = parseFloat(qty.attr( 'min' ));        
        var step = parseFloat(qty.attr( 'step' ));  

        // Change input field value if result is in min and max range.
        if ( $( this ).is( '.plus' ) ) {            
            if ( val === max ) return false;            
            if ( val + step > max ) {
              qty.val( max );
            } else {
              qty.val( val + step );
            }           
        } else {            
            if ( val === min ) return false;            
            if ( val - step < min ) {
              qty.val( min );
            } else {
              qty.val( val - step );
            }           
        }

        $( this ).siblings( '.quantity' ).find( '.qty' ).trigger("change");

    });
}

})(jQuery);

Answer 3

Yes, I know the issue, really anoying, every theme that I create I need to fix this... Here is how I did it:

Create a folder in your theme folder: /woocommerce/global/

Create a file: quantity-input.php

Put the following content inside this file:

<?php
/**
 * Product quantity inputs
 *
 * @author 		WooThemes
 * @package 	WooCommerce/Templates
 * @version     2.1.0
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly
}

?>
<div class="quantity">
    <input type="text" pattern="[0-9]*" step="<?php echo esc_attr( $step ); ?>" <?php if ( is_numeric( $min_value ) ) : ?>min="<?php echo esc_attr( $min_value ); ?>"<?php endif; ?> <?php if ( is_numeric( $max_value ) ) : ?>max="<?php echo esc_attr( $max_value ); ?>"<?php endif; ?> name="<?php echo esc_attr( $input_name ); ?>" value="<?php echo esc_attr( $input_value ); ?>" title="<?php _ex( 'Qty', 'Product quantity input tooltip', 'moto' ) ?>" class="input-text qty text" size="4" />
    <span class="td-quantity-button plus">+</span>
    <span class="td-quantity-button min">-</span>
</div>

And of course you would need some jQuery to make the buttons work:

    $('.td-quantity-button').on('click', function () {
        var $this = $(this);
        var $input = $this.parent().find('input');
        var $quantity = $input.val();
        var $new_quantity = 0;
        if ($this.hasClass('plus')) {
            var $new_quantity = parseFloat($quantity) + 1;
        } else {
            if ($quantity > 0) {
                var $new_quantity = parseFloat($quantity) - 1;
            }
        }
        $input.val($new_quantity);
    });

Please note that you will have to style these buttons and input field yourself.

Please also note you need jquery enqueud in your theme or plugin:

function theme_name_scripts() {
    wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );