How can I clear all items in the shopping cart on my Webflow site? Is there a way to clear the user's cache or use a button that reloads the page and empties the shopping cart?
- Add a custom button with a unique ID and use a JavaScript embed calling Webflow’s commerce.cart.clear() to empty the cart and reload the page.
- Webflow does not natively support cart resets; standard reloads or cache clearing won't remove cart items.
To clear all items in the shopping cart on your Webflow site, there is no built-in “Reset Cart” feature, but there are a few workarounds using Webflow’s features and minimal custom code. Deleting the browser cache will not clear the cart, as Webflow eCommerce uses JavaScript and local/session storage to manage cart data.
1. Use JavaScript to Manually Empty the Cart
Webflow does not provide a native cart reset button. However, you can simulate clearing the cart with custom JavaScript:
- Add a custom embed code inside a button using a Webflow Embed component or in the Footer Code section of your Page Settings.
- This script removes all cart items stored in
localStorage/sessionStorage, which Webflow uses for cart data.
Example:
- Create a button with a unique ID, like
id="clear-cart-btn". - Then add this code in your Footer Code section or inside a Page Embed:
Do not include this in raw <script> tags when pasting into Webflow embed blocks. Only the JavaScript body.
```javascript
<script>
document.getElementById('clear-cart-btn').addEventListener('click', function() {
window.Webflow.require('commerce').cart.clear().then(() => {
location.reload();
});
});
</script>
```
- This script uses Webflow’s internal
commerce.cart.clear()method to clear all items, then reloads the page.
2. Fake “Cart Reset” by Redirecting After Purchase or Timeout
You can also simulate clearing the cart by:
- Redirecting users to a new page after completing checkout (set in Checkout Settings).
- Setting a timeout or prompt to go back to the homepage, giving the impression of a cleared cart since it resets post-checkout anyway.
However, this only works after a purchase and not on active carts during browsing.
3. Refresh Button Without Clearing Cart (Not a Solution)
- Using a normal page reload (via a button with
window.location.reload()or Webflow Page Link) will not clear the cart because cart data is persistent across sessions unless manually reset.
Summary
To fully clear a Webflow Shopping Cart, use a custom script calling commerce.cart.clear() tied to a custom button. Standard page reloads or cache clearing won’t empty the cart, and Webflow does not offer native cart-reset functionality.
