WooCommerce 2.6 will include a new feature for the Shopping Cart: AJAX calls. This includes functionality for:
- Updating cart quantities
- Applying and removing coupons
- Updating shipping options
Check out this video to see 2.5 and 2.6 side-by-side:
What does this mean for users?
The page looks exactly the same as before, so users familiar with the cart will be just fine. The main difference is in performance and no more page reloads for updates. Now, when you do any of the update operations above, instead of reloading the entire page, the cart will first show a spinner over the updating areas, then update within those areas on the page.
What does it mean for developers and designers?
Actually, other than a better user experience, very little. This update was designed with backward compatibility as a primary concern. Existing themes should work just fine still and existing server-side actions/filters as well. In fact, no server code was changed with this update. The JavaScript naturally depends on certain HTML IDs and CSS classes for selectors, so be careful if you start to use those class names elsewhere in your themes.
Where are the technical details?
The vast majority of code for this was updated in the cart.js file. Feel free to take a look there. For the Coupon update code, the API was used, but for the larger updates, the original form submit handling on the server is employed to make sure that the behavior matches the existing cart functionality as much as possible.
Develop with Woo 
25 replies on “Cart AJAX”
It seem a good idea to me, and I particularly appreciate the effort to maintain backward compatibility.
On the same topic, I just filed an issue about a breaking change related to shipping, which was introduced in a recent update to WC 2.6. It should be easy enough to remove it without impacting on the required functionalities.
LikeLike
Nice 🙂
LikeLike
Look forward to this. Nice work.
LikeLiked by 1 person
[…] WooCommerce 2.6 is getting close to beta testing, and it adds some cool new things like a tabbed account area and ajax cart updates. […]
LikeLike
[…] Read more about the AJAX cart here. […]
LikeLike
Hi, it looks nice, but unfinished – there is still a little step to make.
Why do not put AJAX updating Price and Totals when you are changing a quantity?
LikeLiked by 1 person
Hello, the totals should be updating when you update quantities as well as applying and removing coupons. If you feel there’s an issue, you can post here: https://wordpress.org/support/plugin/woocommerce (make sure to read the posts at the top about gathering information)
LikeLiked by 1 person
The Ajax is not working, one website it is working and the other is not.
LikeLike
There’s a known issue with certain themes which add inner HTML to buttons/links on the cart page: https://github.com/woothemes/woocommerce/issues/11118
The fix will go out in the next update shortly!
LikeLike
Hey,
One website uses the new AJAX and the other is not, but both of them with the same theme.
Weird no?
LikeLike
See other comment I left for you.
LikeLike
There was same issue with BXslider’s jQuery library in my case. Every AJAX call went to work fine only after excluding slider’ scripts from executing sequence.
LikeLiked by 1 person
The AJAX is not working for me at the cart, why?
LikeLike
It’s likely a theme issue. There were a couple of potential conflicts fixed for this issue in 2.6.1, which is just released. Otherwise, check your JavaScript console for theme-related errors. If there is one, it will keep further JavaScript from running.
LikeLike
Also problem with Ajax cart, below the error from the console
cart.min.js?ver=2.6.1:1 Uncaught TypeError: a.parseHTML is not a function, not sure if its theme related
LikeLike
Please log this in https://wordpress.org/support/plugin/woocommerce so we can keep it with the other support issues.
LikeLike
The problem was W3-cache , the Minify for JS cause the problem.
LikeLike
Glad you found it. For further support, feel free to post at https://wordpress.org/support/plugin/woocommerce
LikeLike
Ajax cart is not working properly . On console shows –
http://domain.com/wp-admin/admin-ajax.php 500 (Internal Server Error)
but after refresh the page, cart total has been updated with new one that was i tried to cart and showing error.
Note: The issue is comes from only the single product page . On this page i actually customizes the cart mechanism. After click the custom “add to cart” button i just find the product_id, quantity. and after that send a action to my function on functions.php for process the cart.
On this function i use something like this:
WC()->cart->add_to_cart($id, $qty, NULL, NULL, NULL);
LikeLike
Please direct support questions to https://wordpress.org/support/plugin/woocommerce where we will be happy to help.
LikeLike
Just updated to 2.6.1. When I have a full cart and manually empty it on the cart page, the spinner animation shows and then I get a blank cart page. Just the title and wrapper divs. It doesn’t direct me to the cart-empty.php page like it used to. Any insight?
LikeLike
This is likely a theme interaction or JavaScript issue. Check your JavaScript console in your browser for errors and direct any support questions to https://wordpress.org/support/plugin/woocommerce where we will be happy to help. Thanks!
LikeLike
This new functionality breaks the Amazon Payments extension. For example, if someone enters a coupon code, AJAX refreshes the page and the Amazon pay button disappears. If I then do a full refresh, the button reappears. If I dequeue the wc-cart script, adding a coupon refreshes the entire page and everything works as expected.
LikeLike
Thanks for the feedback. Can you create a GitHub issue for this?
LikeLike
Hey, I’m using WooCommerce 2.5.5 and have the exact same problem. As workaround I use the banner instead of the button: Amazon Extension Settings: “Cart login button display”.
Anyways, have you created an issue or have you found a solution yet? Thanks a lot
LikeLike