Product Price
The product's price, in the shop's currency. Shows the struck-through price when it is on sale.
Props
| Prop | Type | Default | What it does |
|---|---|---|---|
| Price → Size | text | var(--fe-woo-text-2xl, 1.25rem) | |
| Price → Weight | text | 600 | |
| Price → Colour | text | var(--fe-woo-color, #111827) | |
| Previous price → Strike it | on / off | on | Off leaves it unstruck, for a shop that separates the two by colour and size alone. The element stays a |
| Previous price → Size | text | 1em | |
| Previous price → Weight | text | 400 | |
| Previous price → Colour | text | var(--fe-woo-muted, #6b7280) | |
| Sale price → Size | text | var(--fe-woo-price-size, 1.25rem) | |
| Sale price → Weight | text | var(--fe-woo-price-weight, 600) | |
| Sale price → Colour | text | #b91c1c | |
| Price | text | {this.fecommerce.price_formatted} | Comes from the product being shown. Inside a loop it follows each product by itself when the loop’s item is called «this»; with any other name, bind it to that name. |
| Two prices | on / off | {this.fecommerce.has_price_pair} | Whether there are two prices to show. Not the same as being on sale: a variable product with one discounted variation is on sale but has a range, not a pair — bind it to on_sale and its card shows two labels and no figures. |
| Previous price | text | {this.fecommerce.regular_price_formatted} | |
| Sale price | text | {this.fecommerce.sale_price_formatted} | |
| Previous price label | text | {this.fecommerce.regular_price_label} | Heard, never seen: «$20.00 $18.00» read aloud is two figures with no way to tell which one is charged. |
| Sale price label | text | {this.fecommerce.sale_price_label} |
Variables of its own
| Variable | Default | What it controls |
|---|---|---|
--fe-woo-price-size | var(--fe-woo-text-2xl, 1.25rem) | How big the price is. |
--fe-woo-price-weight | 600 | Its weight. |
--fe-woo-price-was-color | var(--fe-woo-muted, #6b7280) | The struck-through price of a sale. |
--fe-woo-price-was-size | 1em | How big the struck-through price is. 1em by default: the same as the price beside it, and it follows if that one changes. |
--fe-woo-price-was-weight | 400 | Its weight — lighter than the price, because it is not the one anybody pays. |
--fe-woo-price-sale-color | #b91c1c | The new one. Red on its own account — it is a convention, not a state, so tying it to the danger token would repaint your sale prices every time you changed «Error». |
--fe-woo-price-now-size | var(--fe-woo-price-size, 1.25rem) | How big the sale price is. It follows the price above unless you say otherwise — it is what gets charged, so it has to look like a price. |
--fe-woo-price-now-weight | var(--fe-woo-price-weight, 600) | And its weight, which follows the same one. |