Cart State and Notices
This family renders global cart feedback: item count and cart notices. Both can be used outside a cart page.
When To Use This Family
Use CartCount and CartNotices anywhere cart actions need shared feedback: archive headers, product pages, cart pages, mini-carts, and checkout-adjacent layouts.
Quick Start
Shared cart feedback
Store header cart count:
<OmeWooCartCount />
<OmeWooCartNotices />
Components
| Component key | Role |
|---|---|
OmeWooCartCount | Displays the current cart item quantity and state. |
OmeWooCartNotices | Renders Store API and Woo cart notices as safe text. |
CartCount
CartCount subscribes to WooCartStore and displays cartSummary.item_count. It sets:
| State | Meaning |
|---|---|
empty | Cart has no lines. |
has-items | Cart has one or more lines. |
It is useful in product archive headers, single product templates, mini-cart indicators, and cart pages.
CartNotices
CartNotices is a runtime notice region. It renders notices from cart actions:
| Source | Typical action |
|---|---|
add-to-cart | Product add failed. |
quantity | Quantity update failed. |
remove | Remove item failed. |
coupon | Apply or remove coupon failed. |
shipping | Shipping rate selection failed. |
stock or variation | Woo Store API product constraints. |
Messages are normalized and rendered as text, so Woo error content is not injected as HTML.
Props
| Component | Prop | Meaning |
|---|---|---|
| Cart notices | preview.show_in_builder | Shows a sample notice in Etch builder preview. |
| Cart notices | preview.notice_type | Preview notice type: error, success, info, or warning. |
| Cart notices | accessibility.aria_label | Accessible label for the notice region. |
| Cart notices | accessibility.live_region | Live region politeness, defaulting to polite. |
CartCount is mostly display and styling; its runtime content comes from the cart store.