WooCommerce Promotional Visuals: When a Sale Badge Isn’t Enough and What to Put There Instead

Run a 20% off sale and the WooCommerce “Sale!” badge appears automatically. Crossed-out pricing, the red sticker on the product image — your theme handles all of it. The visual effort is zero, and the communication is fine: the customer sees a lower price and understands they’re getting a discount.

Now run a tiered deal where 3 units cost 10% less, 5 units cost 18% less, and 10 units cost 25% less. The same “Sale!” badge appears. It’s accurate — the product is on sale — but it tells the customer nothing about the structure they need to act on. The whole behavioural mechanism is hidden. The promotion exists; the shopper just can’t see it.

This gap — between a promotion being technically active and a shopper actually understanding it — is what promotional visuals are designed to close. Not every campaign needs a custom visual. But every campaign has a story worth telling, and a generic badge can only tell one version of it.

Why a sale badge undersells most discount campaigns

WooCommerce’s native “Sale!” badge is a binary signal. It says: this product costs less than normal. That’s the right message for a straight percentage or fixed-amount discount where the only variable is the price. The customer sees the crossed-out original price and the new price, they understand the deal, and they can make a decision.

Most meaningful promotions are not that simple. A BOGO deal requires the customer to know they need to add two items. A tiered deal needs them to understand that adding three more units unlocks a better price. A spend-threshold deal is literally a challenge — reach $75 in your cart and get 15% off — and without knowing the target, there’s nothing to reach for.

When the visual doesn’t match the mechanic, a few things happen:

• Customers don’t take the behavioural step the promotion requires (adding more units, completing the BOGO pair, pushing toward the threshold)
• Your discount fires for customers who would have bought that way anyway, without changing a single decision
• You’re subsidising purchases rather than influencing them

The promotion cost is real. The revenue lift isn’t. The mismatch between visual and mechanic is often where that gap lives.

The six visual types and what each one communicates

Smart Cycle Discounts includes six distinct promotional visual types, each designed to match a specific campaign structure. Three are included in the free version — image badge, summary badge, and BOGO panel. Three require a Pro licence — tier panel, bundle panel, and spend-threshold progress bar.

The dividing line isn’t arbitrary. The three Pro visuals correspond exactly to the three Pro discount types (tiered, bundle, spend-threshold). If you’re running a free campaign type, you have a free visual that matches it. If you’ve upgraded to run a tiered or spend-threshold campaign, the visual that explains that campaign is also available to you.

Each visual is designed and built separately from SCD’s discount engine — it’s a display layer you attach to a campaign, not something that fires automatically. That design gives you control: you can run a campaign without a custom visual (the theme’s native “Sale!” badge will still appear), or you can build a precisely styled panel in the visual designer and assign it to a campaign in the wizard.

Image badge: the right tool for simple percentage deals

The image badge is the visual equivalent of your theme’s native “Sale!” sticker — but fully customisable. It renders as an overlay on the product image in the shop grid and on the product page, and it accepts a custom label, custom colours, and a choice of templates: a sticker, pill, ribbon, corner cut, banner, ring, or price-tag shape.

What it communicates: that this product is discounted, and optionally by how much. The label accepts tokens like {discount_value}, so you can render “Save 20% OFF” directly on the badge rather than a generic “Sale!” string.

What it doesn’t communicate: any conditional structure. The image badge says “this product is cheaper.” It doesn’t say “if you buy three, you save more.” It doesn’t say “this is part of a bundle.” For straight percentage-off or fixed-amount campaigns, that’s exactly the right message. For any campaign that requires a behavioural step — adding more units, completing a set, hitting a spend target — it’s the wrong visual for the job.

Summary badge: confirming savings at checkout

The summary badge renders in the cart totals area and the checkout order review. It’s not a product-level callout — it’s a cart-level confirmation. Four layout variants are available: highlighted row (a full-width totals row in your brand colour), inline pill (a small accent chip), side note (italic margin text), and strikethrough (a crossed-out amount).

The job of a summary badge is to make the saving visible at the moment of commitment. A customer who has added products and is reviewing their cart already understands they’re getting a discount — the summary badge quantifies it. “You’re saving $14.40 today.” That reinforcement matters: it’s the reassurance that converts a cart review into a completed purchase.

Like the image badge, the summary badge is universal — it attaches to any campaign type, not just specific discount structures. That makes it a useful complement to every other visual. Run a BOGO panel on the product page to explain the deal, and a summary badge in the cart to confirm the saving. Run a tier panel to show the price ladder, and a summary badge to confirm which tier fired.

For more on what happens between a customer landing on a product page and completing a purchase, see the discussion in WooCommerce tiered pricing for different quantities, which covers how price information at the product-page level connects to what the customer sees at checkout.

BOGO panel: making the mechanic legible

A BOGO deal requires a specific customer action: add the qualifying quantity, and something else becomes free or discounted. If the customer doesn’t know the structure, the deal doesn’t influence their behaviour — they add one unit, check out, and your promotion either fires (and costs you margin without changing a decision) or doesn’t (and the campaign achieves nothing).

The BOGO panel communicates the mechanic directly on the product page. Three layout variants are available — pill group (compact inline pills), math (a centred, equation-style layout where the buy and get quantities sit either side of a separator icon), and card stack (side-by-side bordered cards). All show the buy quantity, the get quantity, and the discount, in plain visual terms.

The panel also renders at cart and checkout, which handles the follow-through: a customer who saw “Buy 2 get 1 free” on the product page gets confirmation in the cart that the deal applied, and can see whether they need to add another unit to trigger it.

The BOGO panel is free, which makes sense: BOGO is a free discount type in Smart Cycle Discounts. If you’re running a Buy One Get One or Buy X Get Y campaign, you have a matching visual available without upgrading.

For a full walkthrough of BOGO mechanics, margin math, and the same-product vs. cross-product distinction, see the complete WooCommerce BOGO setup guide.

Tier panel: showing the full price ladder (Pro)

Tiered pricing is one of the most effective tools for increasing average order quantity — and one of the most consistently undersold. A generic “Sale!” badge on a product with tiered pricing tells the customer nothing. The mechanic is invisible. They buy what they planned to buy, the tier might fire, and the opportunity to nudge them up a bracket is lost entirely.

The tier panel puts the full price ladder in front of the customer while they’re still making their quantity decision. Four layout variants: pills (inline tier chips showing each break), cards (stacked tier cards with active-tier highlighting), compact table (a tight tabular grid), and rows (a vertical list). The active tier highlights automatically based on the quantity in the customer’s cart.

That last detail matters. A tier panel isn’t just a static price table — it’s responsive to what the customer has already done. If they have four units in their cart and the next tier unlocks at five, the panel can show them exactly how close they are. That proximity signal is what produces the “add one more” decision. Without the panel, the customer has no idea the next tier exists.

The tier panel requires a Pro licence because tiered pricing itself is a Pro discount type. If you’re running tiered volume pricing, the tier panel is the natural complement and it’s available to you.

Bundle panel: surfacing the bundle contents (Pro)

Bundle promotions are among the harder deals to communicate because the offer involves multiple products. Unlike a percentage off one item, a bundle deal requires the customer to understand what the set is, what’s included, and what the combined saving is.

The bundle panel renders the bundle contents as a visual group alongside the pricing information. Three layout variants: strip (a horizontal items row that wraps on overflow), carousel preview (horizontally scrollable thumbnails), and stack (a vertical item list with leading thumbnails). Product images are included, which is the key difference from a text-only description — showing the items rather than just naming them.

Where this matters most is on the product pages of bundle components. A customer browsing a coffee grinder doesn’t know it’s part of a bundle deal unless something tells them. The bundle panel, placed on that product page, reveals the deal and gives them a reason to look at the other components in the set.

Like the tier panel, the bundle panel is Pro — corresponding to the Pro bundle discount type.

Threshold bar: turning spend goals into progress (Pro)

A spend-threshold campaign is fundamentally different from every other discount type because the qualifying condition is dynamic. It’s not based on which product the customer is looking at, or how many units they’ve added — it’s based on their total cart value, which changes with every addition and removal. The visual for a spend-threshold campaign needs to reflect that dynamic state.

The threshold bar is a progress indicator that shows how close the customer is to unlocking the discount. It renders in the cart totals area and at checkout, and it updates as the cart changes. Three template styles are available: slim (a clean, narrow fill bar), pill bar (a rounded pill-shaped track), and stepped (a bar with tick marks at regular intervals along the track).

The bar carries two message fields: a pre-goal message (“Spend {remaining} more for {reward}”) and a post-goal message (“{reward} unlocked!”). Both accept dynamic tokens so the message stays accurate as the cart value changes — the pre-goal message updates in real time as the customer adds items.

This is where the mismatch between visual and mechanic is most costly. A spend-threshold campaign without a progress bar is a deal most customers will never take the behavioural step to reach, because they have no idea the target exists or how far away they are. The bar is not decorative — it’s the mechanism by which the promotion actually influences spending.

Choosing the right visual for your campaign

The decision tree is simpler than it looks. Start with the discount type you’re running, and the right visual family follows from there.

For percentage-off and fixed-amount campaigns: the image badge handles product-page communication, and the summary badge handles cart confirmation. Neither is essential — your theme’s native badge will still appear — but both give you control over the visual language and let you replace the generic “Sale!” sticker with something more specific to your campaign.

For BOGO and Buy X Get Y campaigns: the BOGO panel is the right primary visual. The mechanic requires the customer to understand the deal structure before they make a quantity decision. Add a summary badge in the cart to confirm the saving once the condition fires.

For tiered pricing campaigns: the tier panel is the right primary visual. The goal is to make the price ladder visible while the customer is still deciding how many units to add. The compact table layout works for scannable multi-tier structures; the pills layout works for simpler two-tier breaks. See the tiered pricing setup guide for how to configure tiers that pair well with this visual.

For bundle campaigns: the bundle panel is the right primary visual. Focus on layouts that show product images (strip or carousel) when you want the contents of the bundle to do the selling.

For spend-threshold campaigns: the threshold bar is not optional in any meaningful sense. A spend-threshold promotion without a progress indicator is a promotion most customers will never engage with. Set the pre-goal and post-goal messages to make the target concrete (“Spend $19 more to save $11.25” is more persuasive than “almost there!”). For more on spend-threshold mechanics and how to set the right target, see the threshold targeting guide.

Can you attach multiple visuals to one campaign?

Yes. Each visual occupies a distinct surface slot: the image badge goes on product images, the summary badge goes in cart totals, and panels or the bar go in their designated storefront positions. You can attach one of each type to a single campaign without conflicts, which is how you build a complete storefront presence for a promotion — the product page explains the deal (panel), the product image signals it’s on (badge), and the cart confirms the saving (summary badge).

Should you always use a custom visual?

No. For simple percentage-off or fixed-amount campaigns running store-wide, your theme’s native “Sale!” badge may be entirely sufficient. Adding a custom image badge on top of the native one risks visual clutter, especially if multiple campaigns are active. The question is whether the deal structure requires customer explanation. If it does, build the visual. If a lower price is the whole message, the theme badge may be enough.

Frequently asked questions