0

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!

Community
  • 1
  • 1
Charly
  • 25
  • 1
  • 9

3 Answers3

1

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' );
Rens Tillmann
  • 781
  • 6
  • 17
  • Thanks Rens! I had tried your quantity input and it didn't work cuz I didn't have the jQuery you supplied here. Could you tell me which file I need to add that to, so I can create it in my child theme? – Charly Nov 07 '15 at 14:47
  • But wp has its own: use wp_enqueu_script('jquery'): in function on action wp_enqueu_scripts see updated answer – Rens Tillmann Nov 07 '15 at 16:25
  • Truly appreciate your time! I added the jQuery enqueue script code to my child theme functions, all is good. In my jQuery folder I have multiple files to place the other code in, tho not sure which one to use: jquery.js, jquery.jquery.js, or ? Sorry to be so daft, but haven't done much with js to date – Charly Nov 07 '15 at 16:59
  • Not sure what you mean but you better us the enqueu script function inside functions.php file that will do the trick – Rens Tillmann Nov 07 '15 at 17:01
  • Apologies for not articulating properly. When I add the jQuery button code you provided first, after I added the enqueue jquery, to the function.php it broke the site. So I'm trying to figure out where you're putting the jQuery code to make the buttons work. Thanks again! – Charly Nov 07 '15 at 17:17
1

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);
Ryszard Jędraszyk
  • 2,296
  • 4
  • 23
  • 52
0

<?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>
Ibrahim Kholil
  • 1