Skip to main content
Clear Cart Button
A cart-clearing wrapper component for Framer that removes all items from the cart when clicked and notifies all other cart components to update.

​
What It Does

The Clear Cart Button wraps any Framer component and makes it completely empty the cart on click. It has no visual style of its own — the appearance is entirely defined by the component placed inside it. Key behaviors at a glance:
  • Clears the entire cart — removes the cart key from localStorage entirely on click.
  • Notifies other components — dispatches a cartUpdated event on window after clearing, so the Cart Item Counter, Cart State Controller, Cart Product List, and Cart Total Price all update instantly.
  • Accepts any child element — wraps whatever Framer component or design element you place inside it, so the visual design is completely up to you.

​
Property Controls

PropertyTypeDescription
Custom button or element that triggers clear cartComponent InstanceThe Framer component shown as the button. Any click on this element clears the cart.

​
Notes

  • This action is irreversible — there is no confirmation step or undo. The entire cart is deleted immediately on click.
  • After clearing, a cartUpdated event is dispatched on window, keeping all cart components in sync automatically.
  • The wrapper has a minimum size of 20×20px to ensure it remains clickable even if the child component renders at zero size.