Product Reviews
What people said, and the form to say something. It is WooCommerce's own form: the nonce, the moderation and the "verified owner" badge stay theirs.
The whole shop's reviews, on any page
For a testimonials section — the home page, a landing page — the shop's reviews are published as a list for an Etch loop: The shop's reviews, anywhere.
The canvas shows three sample reviews, including an unhappy one — the case a card usually breaks on.
Props
| Prop | Type | Default | What it does |
|---|---|---|---|
| Show the review form | on / off | on | Off leaves only what people have written. The shop's own rule about who may review is always respected: with «only verified owners» on, somebody who has not bought it sees the reason instead of the form. |
| Form behind a button | on / off | off | Half a page of fields is the first thing a shopper scrolls past. Behind a button it opens when somebody wants to write — with the keyboard too, and on a page whose JavaScript never arrived. |
| Heading | choice: auto, split, none | auto | «3 reviews for Hoodie», counted and translated by WooCommerce. Turn it off when the section already has a heading of yours above it. |
| Colours → Card background | text | var(--fe-woo-surface, #ffffff) | |
| Colours → Borders | text | var(--fe-woo-border, #e5e7eb) | |
| Colours → Buttons and badge | text | var(--fe-woo-accent, #111827) | |
| Colours → Button text | text | var(--fe-woo-accent-color, #ffffff) | |
| Colours → Buttons on hover | text | var(--fe-woo-accent-hover, color-mix(in srgb, var(--fe-woo-reviews-accent, #111827) 85%, var(--fe-woo-reviews-accent-color, #ffffff))) | |
| Colours → Button text on hover | text | var(--fe-woo-accent-color-hover, var(--fe-woo-reviews-accent-color, #ffffff)) | |
| Ratings summary | on / off | on | The average, the stars and a bar per rating. Hidden until somebody has rated the product. |
| Review cards → Avatar | choice: initials, photo, none | initials | Initials by default: a Gravatar is a request to a third party carrying a hash of the customer's email, and most customers do not have one. |
| Review cards → Dates | choice: relative, exact | relative | |
| Review cards → Columns | choice: 1, 2, 3, auto | 1 | A column of full-width cards makes a long page out of a shop that gets reviews. Two need 40rem of room and three need 60rem; a phone always shows one. Each review drops under the shortest column, so no card is stretched and no column ends in a hole — that part needs JavaScript, and without it the reviews sit in plain rows. |
| Show more → Reviews before it | text | 0 | How many reviews are out before the rest are clipped behind a fade. 0 shows every one. The ones behind it are drawn, not hidden: their tops show through, which says «there is more» before anybody reads the button. Every review is in the page either way, and where no script arrives they are all out. |
| Show more → Its wording | text | — | Empty is «Show 12 more», translated. Write your own with {count} where the figure goes. |
| Show more → And once open | text | — | Empty is «Show less», translated. |
| Form wording → Line under the heading | text | — | |
| Form wording → Placeholder in the review box | text | — | |
| Product | text | {this.fecommerce.id} | Left alone it follows the product being shown. |
Variables of its own
| Variable | Default | What it controls |
|---|---|---|
--fe-woo-reviews-title-size | 1.5rem | The section's heading. |
--fe-woo-reviews-peek | 7rem | How much of the clipped reviews shows through the fade. |
--fe-woo-reviews-avatar-size | 3rem | The circle with the customer's initials. |
--fe-woo-reviews-track | var(--fe-woo-border, #eef1f4) | The unfilled part of each bar in the summary. |
--fe-woo-reviews-star | #b45309 | A filled star. |
--fe-woo-reviews-star-empty | #d1d5db | The rest of the five. |
--fe-woo-reviews-verified | var(--fe-woo-success, #15803d) | The «verified owner» badge. |
--fe-woo-reviews-verified-bg | var(--fe-woo-success-soft, #dcfce7) | Its background. |
--fe-woo-reviews-average-size | 3rem | The big average at the top. |
--fe-woo-reviews-rate-size | 1.75rem | The stars you click to rate. |