WooCommerce Cart page needs to update live without the Update Cart button

Question

The WooCommerce shop that I am working on needs to have its Cart page update after the quantity is changed. Also, it can't have an Update Cart button as the one present by default. Any ideas on how do it, possibly with AJAX or any other clues?

Any help would be fantastic! Currently our page's cart is similar to http://www.shoopclothing.com and it should be like http://www.shoescribe.com/ for example.

What I've tried so far:

• tried searching for the Update cart method itself but unable to find what exactly was changing the Cart subtotals.

• also tried using AJAX to print out the page again without reloading it. That just reloaded the full page but the quantity was still the same

This is the script we've tried:

 $(".product-order").on("click", "span.add", function () {
        var form = $(this).closest('form').serialize();
        $.ajax({
          type: "POST",
          url: "update_cart url",
          data: form
        }).done(function( msg ) {
            console.log(msg);
            alert("Data Saved: " + msg);
        });
  });

Answer 1

Hey if it's not too late, here is a quick solution that will update your cart without the user having to click the "Update Cart" button. It's not AJAX but it's a simple way to get it done.

Basically, if the user changes the quantity of any item, the cart will update once the user has exited the product-quantity td. It uses the .trigger() jQuery event handler to submit the form automatically.

Just use this jQuery code:

jQuery(document).ready(function() {
    var itemQtyInitial;

    jQuery('.woocommerce table.cart tr.cart_item .product-quantity').hover(function() {
        itemQtyInitial = jQuery('.qty', this).val();
    }, function() {
        var itemQtyExit = jQuery('.qty', this).val();

        if(itemQtyInitial != itemQtyExit) {
            jQuery(".button[name='update_cart']").trigger("click");
        }
    });

});

Then you can hide the "Update Cart" button with this CSS:

.woocommerce table.cart td.actions input[name="update_cart"] {
    display: none;
}

That should work!

Answer 2

Thanks to Niko. I made little change to his code snippet. It now should works well even with ajax of woocommerce. And the cart will be updated automatically after user click "+" or "-".

$('body').on('click','table.cart .quantity',function(){
    var itemQtyInitial;

    jQuery('.woocommerce table.cart tr.cart_item .product-quantity').hover(function() {
        itemQtyInitial = jQuery('.qty', this).val();
        console.log("inital",itemQtyInitial);
    }, function() {
        var itemQtyExit = jQuery('.qty', this).val();
        console.log("change",itemQtyExit);
        if(itemQtyInitial != itemQtyExit) {
            jQuery(".button[name='update_cart']").trigger("click");
        }
    });
});

Answer 3

您的问题是您发送SERIALIZED数据以更新购物车功能，因此它无法识别发布数据，因此您必须将所有输入字段都放入jquery发布中