When you run a WooCommerce discount, the product price changes. What does not change automatically is the story around that price — the badge on the shop image, the savings callout in the cart, the tier table on the product page that explains why buying five costs less than buying one.

WooCommerce’s default theme badge is a plain “Sale!” label. It tells the customer something is cheaper. It does not tell them how much cheaper, which products are part of the offer, or what they need to do to unlock the best deal. For simple percentage discounts that might be fine. For tiered pricing, spend-threshold deals, BOGO campaigns, and bundle offers, it leaves a lot on the table.

Promotional Visuals, introduced in Smart Cycle Discounts 2.1.2, are the layer that fills that gap. They are separate from the discount itself — a design system you build in a live editor, store in a library, and then attach to any campaign. A campaign can run without any visual assigned; the visual just augments the storefront message when one is connected.

What Promotional Visuals are (and why they’re separate from discounts)

A Promotional Visual in Smart Cycle Discounts is a named, reusable storefront element — a sale badge, a cart savings row, a tier table, a BOGO explainer panel, a spend-threshold progress bar. You design it once in the Visuals library, save it, and then assign it to one or more campaigns. The visual and the campaign are independent records: the campaign controls the discount logic, the visual controls what shoppers see.

This separation is deliberate. If you run a Black Friday campaign and a recurring weekend sale, both might use the same badge design. Rather than recreating the badge twice, you design it once and point both campaigns at it. If you ever update the badge — change the color to match a new brand season — the update propagates to every campaign using it.

Visuals render through WooCommerce’s own template hooks (action hooks on the shop loop, single product page, cart totals area, and checkout totals area). There is no extra frontend JavaScript layer for rendering — the plugin outputs HTML directly through those hooks when a campaign with an assigned visual is active for the current product or cart state.

The six visual types: what each one does and where it appears

Smart Cycle Discounts 2.1.2 ships six visual types, organized into three families: badges, panels, and bars. Each type occupies specific storefront slots; assigning one to a campaign enables it on the surfaces that type supports.

Badge family

Badge-family visuals appear on product images and in the cart or checkout totals area. They work with every discount type because the badge message (the text and design) is not mechanically tied to how the discount calculates — you write the headline yourself.

Image badge

The image badge overlays the product image on shop pages, category pages, search results, and the single product page. It replaces the theme’s default “Sale!” sticker with a custom-designed element. Templates include a rounded badge (Badge), a notched ribbon (Ribbon), a spiky seal (Starburst), and a circular stamp (Circle stamp). All four shapes are cosmetically different starting points that you can further customize in the inspector: color, text, icon, corner radius, fill style, animation.

The badge text supports tokens. Writing {discount_value} in the text field renders the actual discount headline (e.g. “20% OFF”) dynamically from the campaign. Writing {savings_amount} renders the concrete savings amount. This means one badge design can serve multiple campaigns with different discount values without manual editing.

Summary badge

The summary badge appears in the cart totals and checkout totals areas. Its job is to make savings visible at the moment customers are deciding whether to complete the purchase. Templates are: Highlighted row (a full-width tinted row), Inline pill (a small accent chip), Side note (italic margin text), and Strikethrough (crossed-out original amount).

Like the image badge, the summary badge supports tokens. The design uses a single color field that drives both the row or pill background and the accent text, so the look stays coherent without requiring you to manage multiple color pickers.

Panel family

Panel-family visuals render the structural detail of a specific discount type on the product page and in the cart or checkout area. Unlike badges, panels are mechanically tied to one discount type — a tier panel only makes sense for tiered campaigns, a BOGO panel only for BOGO/buy-X-get-Y campaigns. The available panel type depends on the discount type you chose in the campaign wizard.

BOGO panel

The BOGO panel communicates the buy-quantity / get-quantity deal in a structured layout. Templates include Pill group (compact inline pills), Featured (centered, equation-style layout for prominent placements), and Card stack (side-by-side bordered cards). This visual type is compatible with both BOGO and buy-X-get-Y campaigns.

Tier panel

The tier panel renders the full tier ladder for tiered campaigns — the table or cards showing what each quantity tier costs, which tier is currently active, and what a customer needs to add to reach the next tier. Templates include Pills (inline tier chips), Cards (stacked tier cards), Compact table (tight tabular grid), and Rows (vertical row list).

Bundle panel

The bundle panel renders the list of bundle products with thumbnails and savings for bundle campaigns. Templates include Strip (horizontal row that wraps on overflow), Carousel preview (horizontally scrollable thumbnails), and Stack (vertical list with leading thumbnails).

Bar family

Threshold bar

The threshold bar renders an animated progress bar above the cart and checkout totals showing how close the customer is to hitting the spend-threshold discount. Templates include Smooth (continuous progress fill), Segmented (progress split into equal blocks), and Stepped (track with 25 / 50 / 75% tick marks). Pre-goal and post-goal message text is fully customizable with tokens like {remaining} and {discount_value}.

Free vs. Pro: the exact split

The free/Pro split in Promotional Visuals mirrors the discount-type split in Smart Cycle Discounts. Each panel or bar visual exists to communicate one specific discount mechanic — and that mechanic’s availability determines whether the visual is free or Pro.

Badges are universal — they work with any campaign regardless of discount type and are available on the free plan. Panels and bars are discount-specific, and because the discount types they communicate (tiered, bundle, spend threshold) are themselves Pro features, their visuals are Pro too.

If you are on the free plan and running a BOGO campaign, you can design both an image badge and a BOGO panel for it. If you are on the free plan and running a simple percentage campaign, you can design both badge types. The designer shows Pro-only types in the library with an upgrade prompt so you can preview the concept before deciding. For a more detailed breakdown of each visual type — what it renders, which storefront hooks it uses, and exactly which templates each type ships — see the Promotional Visuals free vs Pro comparison.

The Visuals library: your design inventory

The Visuals library is the central home for all your promotional visuals. You reach it through the Smart Cycle Discounts admin menu. It organizes visuals by type on horizontal shelves — image badges on one shelf, summary badges on the next, panels and bars below. Each shelf shows your existing visuals for that type as thumbnail cards, plus an “Add new” tile at the end.

The library also shows a storefront-coverage header: how many visuals are currently live (assigned to active campaigns and rendering on applicable storefront surfaces) versus how many are classic-cart-only (rendering only when the store uses WooCommerce’s classic cart and checkout templates). This is useful context if you are migrating to block-based cart and checkout — see the block cart note below.

Above the shelves is the brand color bar. Five color slots — Primary, Secondary, Accent, Neutral, Surface — let you set your store’s palette once. Any visual field that references brand:primary (the default for most templates) will automatically inherit the right color and update instantly when you change the slot. You can override brand colors per-visual in the inspector, but the brand palette gives every new visual a sensible starting point without manual color picking.

Seeded starter visuals

On a fresh install, Smart Cycle Discounts seeds one starter visual per type. These are fully editable and deletable — they exist to give you a concrete starting point and a preview of what each type looks like rather than presenting an empty library. The seeder respects your brand palette: it seeds using your current brand colors so the starters feel like your store on first paint.

The seeder only runs once per type. If you delete a seeded visual, it will not reappear.

Inside the designer: templates, inspector, live preview

Clicking “Add new” from the library — or clicking an existing visual to edit it — opens the designer. The designer is a three-column workspace: a template gallery on the left, a live preview canvas in the center, and an inspector panel on the right.

Template gallery

The template gallery shows the available templates (recipes) for the selected visual type. Clicking a template applies its structural config bundle to the visual in a single action: corner style, fill mode, layout structure, and typography weight. The key thing to know is that templates are starting points, not locked configurations. Every field stays editable in the inspector after you pick a template.

Two templates can look similar initially but diverge significantly once you adjust colors and sizing. Ribbon and Badge, for example, both produce a badge with the same fill and font settings by default, but Ribbon adds the notched tail shape that makes it read as a ribbon rather than a sticker. Switching templates mid-design is safe — it reapplies the structural bundle but leaves your color and typography choices in place for fields the template does not own.

Inspector panel

The inspector panel is where you customize a visual beyond its starting-point template. Controls vary by visual type but typically include:

• Text content and tokens — the badge headline, savings copy, or message text. Write {discount_value}, {savings_amount}, or other supported tokens to pull in dynamic values from the campaign at render time.
• Colors — background, text, accent. Color fields accept hex values or brand: token references. The inspector surfaces a WCAG contrast warning when your color combination does not meet the accessibility threshold for that visual type (3:1 for large badge text, 4.5:1 for body-size panel text).
• Typography — font weight, font size, padding density. Controls are segmented options and sliders rather than raw CSS values, keeping them accessible to non-technical users.
• Icon — an optional icon from the built-in icon library placed before or after the badge text, or used alone. The icon picker shows a searchable catalog of icons categorized by concept (discounts, sale, gifts, trending, and more).
• Position — for image badges, a position grid lets you choose where the badge anchors on the product image (top-left, top-right, bottom-left, bottom-right).
• Animation — a subtle entry animation (none, bounce, pulse, shake) for image badges, if you want the badge to draw attention on page load.

Live preview canvas

The center canvas updates on every keystroke and picker selection — no save-then-refresh cycle. It renders your visual against a sample storefront mockup appropriate for the type: a product card with image for image badges, a cart totals block for summary badges, a product page layout for panels, a cart sidebar for the threshold bar.

For panels and bars, the preview canvas uses real-looking sample data (sample tier rows, buy/get quantities, bundle product names) so you can see the visual as it would actually appear with a populated campaign, not empty placeholders.

The preview also includes a “Before goal / At goal” toggle for the threshold bar, so you can see both the progress state (customer has not hit the threshold yet) and the success state (threshold reached, discount unlocked) without needing to fake a cart total.

Walkthrough: creating a sale badge from scratch

Here is the flow for creating a simple image badge for a percentage-off campaign, from the library to a live storefront.

Attaching a visual to a campaign

Visuals are assigned to campaigns in the Discounts step of the campaign wizard — the same step where you configure the discount type, tiers, or BOGO quantities. Scroll to the “Promotional visuals” section at the bottom of that step to see the slot tiles.

Slot tiles

Each slot tile represents a storefront surface:

• Shop / category image — overlays the product image on shop, category, and search result pages. Compatible with image badges.
• Single product page — overlays the featured image on the single-product page. Compatible with image badges.
• Cart totals — appears in the cart totals area. Compatible with summary badges.
• Checkout totals — appears in the checkout totals area. Compatible with summary badges.
• Discount panel — renders the campaign’s structural detail on the product page and in cart/checkout. Available only when the campaign’s discount type supports a panel (tiered, BOGO, buy-X-get-Y, bundle).
• Threshold progress bar — renders the animated spend-progress bar. Available only for spend-threshold campaigns.

The panel and bar tiles update automatically when you change the discount type in the same wizard step. If you switch from a tiered discount to a BOGO discount, the panel tile switches from showing tier-panel options to BOGO-panel options — no page reload needed.

Picking from the library

Clicking a slot tile opens a modal with your library visuals filtered to that slot’s compatible types. Each visual card shows the type, a live thumbnail preview, and the visual’s name. Select a visual and click “Use this visual” to assign it. The tile updates immediately to show the selected visual’s name and a small preview.

You can also clear an assignment from a tile (to remove the visual from that slot without editing the visual itself) or open the library directly to design a new visual in a separate tab and then return to pick it.

Assignments are per-campaign. The same image badge can be assigned to ten different campaigns, and each campaign can have a different badge if you prefer. The visual itself is not modified when you assign or unassign it from a campaign.

What happens on the storefront

Once a campaign with assigned visuals is active, the plugin renders each visual on its surface during page requests. The image badge appears on product images in the shop loop and on the single product featured image. The summary badge appears in the cart and checkout totals. Panels appear on the product page below the add-to-cart area and in the cart and checkout areas. The threshold bar appears above the totals block in the cart and checkout.

How visuals reach the storefront

Understanding the rendering approach matters if you are troubleshooting or working with a custom theme.

Smart Cycle Discounts hooks into WooCommerce’s standard template action and filter hooks to inject visual HTML at the right moment. Image badges are injected into the shop loop via woocommerce_before_shop_loop_item_title and into single product images via woocommerce_single_product_image_thumbnail_html (and the block product image via render_block filtering). Summary badges appear via cart and checkout totals hooks. Panels are inserted through cart and checkout display hooks. The threshold bar hooks into woocommerce_before_cart_totals and woocommerce_review_order_before_submit.

There is no extra frontend JavaScript layer for rendering. The visual HTML is output server-side directly through those hooks. The result is that visuals appear at the same load time as the rest of the WooCommerce template — no waiting for a script to inject HTML after page load.

Because Smart Cycle Discounts applies its discounts at display time through WooCommerce’s price filters (not by writing a stored sale price to the database), the theme’s own “Sale!” sticker also appears automatically — WooCommerce derives the on-sale state from the filtered price at render time. The image badge you design in Promotional Visuals replaces or supplements that theme sticker depending on your Display Settings. If you want to understand the price-filter approach in more depth, the post on why SCD products don’t appear in WooCommerce’s On Sale filters explains the architecture and its tradeoffs.

A note on block cart and block checkout

WooCommerce’s block-based cart and checkout, introduced as the default in newer Storefront-compatible themes, use a different rendering path than the classic templates. The classic template hooks that summary badges, panels, and the threshold bar rely on do not fire on the block cart and block checkout.

This means: on a store using block cart and block checkout, summary badges, panels, and the threshold bar will not render in those locations. Image badges — which hook into the shop loop and product image filters — are not affected by this and render correctly on all setups.

The Visuals library surfaces this constraint proactively. If you have a fully block-based cart and checkout, the library shows which visual types are affected and marks their shelf tiles accordingly. The constraint also appears in the wizard’s slot tiles: cart and checkout badge tiles are hidden and disabled when those surfaces are block-based, so you cannot create an assignment for a surface where the visual will silently never appear.

If panels and bars are important to your store and you are currently on the block cart, the options are: switch the cart and checkout back to the classic shortcode-based templates, or wait for a future update to the block integration layer.

Frequently asked questions

The full walkthrough for the Promotional Visuals system, including slot reference tables and troubleshooting steps, is in the Smart Cycle Discounts documentation. If you are setting up your first campaign and want to understand the wider picture of what the plugin covers before you start building visuals, the getting-started guide covers the campaign model from the beginning.