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.

 

25 responses to “Cart AJAX”

  1. 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.

  2. Look forward to this. Nice work.

  3. […] 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. […]

  4. 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?

    1. 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)

  5. Tal Elmishali Avatar
    Tal Elmishali

    The Ajax is not working, one website it is working and the other is not.

    1. 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!

      1. Tal Elmishali Avatar
        Tal Elmishali

        Hey,
        One website uses the new AJAX and the other is not, but both of them with the same theme.
        Weird no?

        1. See other comment I left for you.

    2. 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.

  6. Tal Elmishali Avatar
    Tal Elmishali

    The AJAX is not working for me at the cart, why?

    1. 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.

      1. 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

        1. Please log this in https://wordpress.org/support/plugin/woocommerce so we can keep it with the other support issues.

  7. Tal Elmishali Avatar
    Tal Elmishali

    The problem was W3-cache , the Minify for JS cause the problem.

    1. Glad you found it. For further support, feel free to post at https://wordpress.org/support/plugin/woocommerce

  8. 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);

    1. Please direct support questions to https://wordpress.org/support/plugin/woocommerce where we will be happy to help.

  9. 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?

    1. 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!

  10. 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.

    1. Thanks for the feedback. Can you create a GitHub issue for this?

    2. 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

Leave a Reply

Your email address will not be published. Required fields are marked *