WooCommerce Plus/Minus button in cart shows intermittently

Question

After following the steps here to get AJAX add to cart working for variable products I'm running into an issue where immediately after I (successfully) add an item to the cart, and the cart is refreshed dynamically, the quantity +/- buttons do not show (not hidden, but are not rendered). The quantity value shows, but not the buttons that normally sit beside it.

The odd thing is if I refresh the page (at which point the page is loaded normally - not via get_refreshed_fragments - the buttons re-appear. Any ideas on what could lead to this behavior?

Solution

Thanks to @dingo_d's contribution it was pretty easy to figure it out. I didn't know WC removed the quantity buttons, which naturally pointed to the theme - in this case Avada - which plugged a code block at the bottom of main.js to re-add the buttons. The block only ran on load, no re-load with AJAX, a la no quantity buttons after cart refresh.

I just broke it out into a separate function and called it manually after the fragments are refreshed.

Answer 1

I don't know if you use a custom template files (you have woocommerce folder inside the theme), or just plain woocommerce + hook for appearance, but the new woocommerce (from ver 2.3 iirc) removed the +/- buttons on single item products.

I pulled a bit of jquery code from the old templates that renders the old buttons, and use it on my themes:

// 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");
    });
});

This will add a +/- buttons on the side of the quantity.

Now, if your theme has template files inside that have those buttons hardcoded, then you need to see their class and try to find the code that's governing them.

Hope this helps.

Answer 2

To Resolve above issue you just have to add ajaxComplete function to your themes functions.php

    var cartUpdateStart=false;

    jQuery( document ).ajaxComplete(function() {

        if(cartUpdateStart){

            addPlusMinusIcons();

            cartUpdateStart=false;

        }

    });

Add below script to your child themes script.js

var aObj;

function addPlusMinusIcons(){

console.log('executing');

aObj(".woocommerce-ordering").on("change", "select.orderby", function() {

    aObj(this).closest("form").submit()

}), aObj("div.quantity:not(.buttons_added), td.quantity:not(.buttons_added)").addClass("buttons_added").append('<span class="minus"><i class="fa fa-minus" aria-hidden="true"></i></span>').prepend('<span class="plus"><i class="fa fa-plus" aria-hidden="true"></i></span>'), aObj("input.qty:not(.product-quantity input.qty)").each(function() {

    var b = parseFloat(aObj(this).attr("min"));

    b && b > 0 && parseFloat(aObj(this).val()) < b && aObj(this).val(b)

}), aObj(document).on("click", ".plus, .minus", function() {  
    var b = aObj(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), aObj(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")

})
}

jQuery(function(a) {
   aObj=a;
   addPlusMinusIcons();
});