CODEWITHSUNDEEP
phpjqueryajaxwordpresswoocommerce
Dave
Dave

Reputation: 1

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

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:

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

Upvotes: 0

Views: 5430

Answers (3)

skanecode
skanecode

Reputation: 63

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

Upvotes: 1

Niko
Niko

Reputation: 11

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!

Upvotes: 1

fiorisubacquei
fiorisubacquei

Reputation: 23

Your problem is that you send SERIALIZED data to update cart function, so it doesn't recognize post data, you have to put in your jquery post all the input fields

Upvotes: 0

Related Questions