Design and placeholders
Shapes, colours, size, position and offset, the {discount}, {saving} and {price} placeholders, and text for screen readers.
Text and placeholders
A label's Text is what shoppers read. Placeholders in curly brackets are filled in for each product:
| Placeholder | Shows | Example |
|---|---|---|
{discount} |
The percentage off the regular price | "25%". A variable product whose variations save different amounts (or only some of them are on sale) shows the most: "up to 30%". |
{saving} |
The amount off | "$10.00", or "up to $15.00" |
{price} |
The price shoppers pay | "$30.00", or "from $20.00" when it varies |
Click a placeholder under the text box to insert it where the cursor is.
- A text that starts with a placeholder gets a capital first letter:
{discount} offshows "Up to 30% off". - A label whose placeholder has nothing to show for a product, such as a
{discount}on a product that isn't on sale, is left off that product rather than shown with a gap. So{discount} offworks as a sale label even without an "On sale" condition (adding one makes your intent clear, and controls WooCommerce's sale badge the same way). - Amounts use your store's currency format and follow its tax display setting.
- With Extendiment's Discountline active, its product discounts count too: see Stockline, Discountline and the sale badge.
Tip
For variable products, {discount} off reads better than −{discount}, which would show "−up to 30%".
Text for screen readers
Optional. When set, screen readers read this instead of the label's text: "25% off the regular price" for a label that shows "−25%", for example. Placeholders work here too. Leave it empty and screen readers read the label's text, which is real text, never only a colour.
Shapes
| Shape | Looks like |
|---|---|
| Rectangle | Square corners |
| Rounded | Slightly rounded corners |
| Pill | Fully rounded ends |
| Circle | A round badge; the text wraps inside it. Keep it to a word or two. |
| Corner ribbon | A band across the image's corner. In the top or bottom centre position, a band across the image. |
| Tag | A label with a point, aimed at the middle of the image |
A corner ribbon takes its corner by itself: other labels in the same position would sit under it, so give them another position. If two ribbons share a position, only the first (by priority) shows.
Colours and size
- Background colour and Text colour: pick from the colour picker or type a hex code.
- Text size in pixels (8–48). The label's padding grows with it, and a circle grows to fit.
Position and offset
Position puts the label in one of six places on the image: the four corners, or the top or bottom centre. Distance from the edge moves it in from the side and from the top or bottom, in pixels.
Several labels in the same position stack: the first by priority sits nearest the corner, the next below it (or above it, at the bottom). The distance of a stack is that of its first label.
In right-to-left languages, left and right swap, so a "top left" label sits where the reading starts.
Labels sit on top of the image and never move anything on the page: the image keeps its size, product titles stay lined up, and clicking a label clicks the image's link as usual.