Cart Count
The header button with the number of items. It opens the Mini Cart, and the count never travels in the HTML, so it is safe behind a page cache.
Props
| Prop | Type | Default | What it does |
|---|---|---|---|
| Accessible name | text | Cart | Read by screen readers before the runtime knows the count; once it does, it says "Cart: 3 items" instead. It is here because a button with no name at all until JavaScript arrives is a real barrier, not a cosmetic one. |
| Icon | image | the built-in icon | Any SVG, from the media library or pasted as a data: URI. Its colours are replaced by the icon colour, so it follows the palette. |
| Hide badge when empty | on / off | on | A zero in a header is noise. The count stays in the button's accessible name either way, so nobody loses the information. |
| Badge position | choice: after, before, over | after | On the icon is what a compact header wants: the button ends up as wide as the icon and nothing else. The badge sits on its top corner, outside the cart’s handle so the shape stays recognisable. |
| Colors → Icon | text | currentColor | |
| Colors → Badge background | text | var(--fe-woo-accent, #1f2937) | |
| Colors → Badge text | text | var(--fe-woo-accent-color, #ffffff) | |
| Size → Icon size | text | var(--fe-woo-icon-size, 1.5rem) | |
| Announce cart changes | on / off | off | Off, because everything that changes the cart already says so: the add-to-cart button, the stepper, the mini cart, the checkout summary and, on the cart page, WooCommerce’s own notices. Live regions queue rather than interrupt, so a second one makes a screen reader repeat the same news. Turn it on only if you have switched the others off. |
Variables of its own
| Variable | Default | What it controls |
|---|---|---|
--fe-woo-count-size | var(--fe-woo-icon-size, 1.5rem) | The cart icon. Reads --fe-woo-icon-size, shared with the search and wishlist icons. |
--fe-woo-count-stroke | var(--fe-woo-icon-stroke, 2) | How thick its line is. Reads --fe-woo-icon-stroke, shared with the search and wishlist icons. |
--fe-woo-count-hover | color-mix(in srgb, var(--fe-woo-accent, #111827) 12%, transparent) | The tint behind it under the pointer — the same as the search and wishlist icons. |
--fe-woo-count-badge-bg | var(--fe-woo-accent, #1f2937) | The little circle carrying the number. |
--fe-woo-count-badge-color | var(--fe-woo-accent-color, #ffffff) | The number itself. |
--fe-woo-count-badge-size | 1.25rem | How big that circle is. |