Skip to main content
Cart Total preview A real-time cart total component for Framer that calculates and displays the combined price of all items in the cart, with optional currency symbol and code.

​
What It Does

The Cart Total Price renders a single line of text showing the total cost of all items currently in the cart. It multiplies each item’s price by its quantity, sums them up, and updates automatically whenever the cart changes. Key behaviors at a glance:
  • Calculates total — sums price.amount × quantity across all cart items and displays the result.
  • Updates in real time — listens for the cartUpdated event on window and recalculates the total instantly whenever the cart is modified by any other component.
  • Currency symbol and code — optionally displays the currency symbol (e.g. ₹) before the total and/or the currency code (e.g. INR) after it. Both are derived from the first item’s currencyCode field in the cart.
  • Defaults to zero — displays 0 when the cart is empty.

​
Property Controls

All controls are accessible in Framer’s right panel when the component is selected. They are grouped into two sections: Styles and Format.

​
Styles

PropertyTypeDefaultDescription
FontFont16pxTypography for the total price text.
ColorColor—Text color of the total price.

​
Format

PropertyTypeDefaultDescription
Show SymbolBooleanfalseWhen enabled, displays the currency symbol before the total (e.g. ₹, $). Derived from the currencyCode of the first item in the cart.
Show CodeBooleanfalseWhen enabled, displays the currency code after the total (e.g. INR, USD). Derived from the currencyCode of the first item in the cart.

​
Notes

  • The currency symbol and code are both read from the first item in the cart. If your cart contains items with mixed currencies, only the first item’s currency will be shown.
  • The total does not apply any decimal formatting — it displays the raw calculated number. Use the Dynamic Product Price component if you need decimal control per variant.
  • Any component that modifies the cart must dispatch a cartUpdated event on window after writing to localStorage for the total to update.
  • The supported currencies and their symbols are: USD $, EUR €, GBP £, INR ₹, JPY ¥, CNY ¥, AUD A$, CAD C$, CHF CHF, SEK kr, NZD NZ$, SGD S$, HKD HK$, KRW ₩, ZAR R, RUB ₽, BRL R$, MXN MX$, AED د.إ, SAR ﷼.