Breadcrumb
Where this page sits, as an ordered list inside a named landmark, with the current step marked as such. The trail is WooCommerce's: products, categories, attributes, searches, tags — even the 404.
It renders nothing outside WooCommerce's own pages, where a one-step trail would say nothing.
The shop step. WooCommerce only puts the shop page between «Home» and a
category or product when product links start with the shop's address
(/shop/clothing/hoodie/), and its default links don't — so a category reads
«Home / Clothing / Hoodies», as if it hung from the home page. The component
adds it on every product, category, tag and attribute page, and never doubles
it where WooCommerce already did. Shop step puts it back the way
WooCommerce had it, or takes it out. The cart, checkout and account don't get
it: they don't sit inside the shop.
Props
| Prop | Type | Default | What it does |
|---|---|---|---|
| First step | text | — | What the first step says. Leave it empty for WooCommerce’s own («Home», translated), or write «none» to drop it — which is what a shop whose logo already goes home wants. |
| First step as an icon | on / off | off | A house instead of the word. The word stays in the link for screen readers, so it still has a name. |
| Shop step | choice: always, woocommerce, never | always | The shop page between the first step and a product, category, tag or attribute. WooCommerce only adds it when product links start with the shop’s address, and its default links do not. |
| This page | on / off | on | The last step, the page itself. Turn it off when the title right below already says it: the step above stays a link. |
| On small screens | choice: wrap, back | wrap | Below 768 px wide, «Only the way back» shows just the step above, with an arrow. A long trail otherwise takes two or three lines on a phone. |
| Separator | text | '/' | The character between steps, in quotes: «›», «—», «·». It is decoration, so it is never read aloud. |
| Colors → Steps behind | text | var(--fe-woo-muted, #6b7280) | |
| Colors → This page | text | var(--fe-woo-color, #111827) | |
| Colors → Separator | text | var(--fe-woo-border, #d1d5db) |
Variables of its own
| Variable | Default | What it controls |
|---|---|---|
--fe-woo-crumb-border-color | var(--fe-woo-border, #d1d5db) | The separator's colour, when you draw one. |
--fe-woo-crumb-size | var(--fe-woo-text-s, 0.81rem) | The size of the trail. |
--fe-woo-crumb-glyph | '/' | The character between steps, in quotes. Decoration — never read aloud. |
--fe-woo-crumb-icon-size | 1.15em | The house of the first step, when it is drawn. Its target stays 24 px whatever the size. |
--fe-woo-crumb-back-glyph | '←' | The arrow before the way back, on small screens, in quotes. Decoration — never read aloud. |