Woocommerce Empty Cart Conditions

[bobbybosler]

Hello there,

I’m working on my cart page using a layout and I’m almost done, but I’m having an issue with cart conditions. The way I’m doing my cart is by creating two full-width columns in my row, one to be displayed when the cart has items in and another when the cart is empty (so I can display a custom message about the empty cart). Here is my setup:

1. Column 1: Cart has items in it (contains normal “Cart” element)
Condition: Number type {{dc:woocommerce:cart_items_raw}} > 0

2. Column 2: Cart is empty (contains custom icon, message, button)
Condition: Number type {{dc:woocommerce:cart_items_raw}} == 0

So, for the most part, the setup works great…until you empty the cart from the cart page. The page is emptied via an AJAX fragment, Column 1 disappears, but Column 2 does not appear. If I refresh the page, Columns 2 appears, but that’s not good UX. I really want it to show after I remove the last item from the cart.

So, I suppose there could be two possible solutions.

1. Somehow get the conditional in Column 2 to read the new cart count (ideal)
2. Get the cart to refresh the page when the last item is removed.

Any advice? I’m honestly not sure if there’s a bug with the conditional or whether the AJAX fragments are messing with it or a combination of both!

[bobbybosler]

I did find this in my research, which is supposed to refresh the page whenever I remove an item from the cart. However, the code doesn’t work.

jQuery( document.body ).on( 'remove_from_cart', function(){
  // Check for empty class
  window.location.reload(); 
});

[tristup]

Hi @bobbybosler,

To reload the page after deleting or adding a new item into the cart, you need to trap the updated_cart_totals event instead of the remove_from_cart event. I would suggest you replace your code with the following JavaScript code and check once again.

jQuery( document.body ).on( 'updated_cart_totals', function()
{
    window.location.reload(); 
} );

This updated_cart_totals event will fire while you click into the delete button or undo button after deleting the cart item.

Please remember that the above code will work if copied as it is and don’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks

[bobbybosler]

Hey @tristup,

Thanks for the starting point! I ended up doing something even better, which is somewhat unique to my setup, but the core thing I figured out was how to look up all of the Woocommerce JS events! It turns out that there is a specific function that happens when the cart empties that I can use to trigger my own JS actions.

jQuery( document.body ).on( 'wc_cart_emptied', function()
{
   // Your code here.
} );

I was able to get it to remove a class that my site inserts when the cart has something in it with jQuery("body").removeClass("has_items"); and then I was able to use a series of CSS code to add or remove sections accordingly based on the body class. Long story short, I got it to do what I want it to do!

[tristup]

Hi @bobbybosler,

Glad that you are able to find the solution, and getting what you are expecting.

Thanks