FrameWoo
Components / Widgets
W
woo-cart-badge

Cart Badge

Show a live badge count for the cart.

Setup steps

  1. Open the FramerWoo plugin and insert Cart Badge.
  2. Place this in a global navigation, utility bar, drawer, or reusable site section.
  3. Configure the component behavior in Framer's property panel.
  4. Style its default, responsive, loading, and empty states on canvas.
Cart Badge displayed in a Framer site header with its cart settings open in the property panel
Insert Cart Badge in a global navigation or header, then connect it to the same shared cart as the cart drawer.

Property panel

Use Framer's controls to connect context and match your visual system.

Context
Controls the WooCommerce or CMS data source used by the component.
Content
Controls visible labels, values, formatting, and empty-state copy.
Style
Controls typography, colors, spacing, alignment, and responsive behavior.
Framer property controls for the Cart Badge component
Cart Badge controls for the WooCommerce store URL, shared cart key, label, and badge styling.
Cart Badge Style controls showing colors, sizing, padding, icon, and count options in Framer
Open Badge Style to configure colors, borders, sizing, padding, icon appearance, and count styles.