WooCommerce Promotional Visuals Free vs Pro: What’s Included at Each Tier

When Smart Cycle Discounts 2.1.2 shipped, it retired the old badge designer and replaced it with a new system called Promotional Visuals. The idea is straightforward: instead of a badge being a plugin-wide setting, each visual is a standalone design you build in a live designer and attach to individual campaigns. When the campaign is active, the storefront renders the visual wherever that campaign applies.

Six visual types exist in total. Three are available in the free version — image badges, summary badges, and BOGO panels. Three require Pro — tier panels, bundle panels, and the threshold bar. The split follows the same logic as the plugin’s discount-type split: the free types serve the discount mechanics available in free (percentage, fixed, BOGO); the Pro types serve the mechanics that require Pro (tiered quantity, bundle deals, spend threshold).

Everything below is verified against the current plugin code — specifically class-visual-types-registry.php (the single source of truth for the six types and their Pro feature gates) and class-wc-display-integration.php (the hooks that put each type on the storefront). Version: Smart Cycle Discounts 2.1.2.

What Promotional Visuals Are and How They Differ From the Old Badge Designer

Promotional Visuals in Smart Cycle Discounts is the system for attaching custom storefront sale graphics to individual campaigns. You build each visual in a live designer with a template gallery, brand color bindings, and real-time preview, then assign it to a campaign. When that campaign is active, its assigned visuals appear on the storefront wherever the campaign applies.

The previous badge designer (shipped in earlier versions) was retired in 2.1.2. All storefront sale graphics now go through the Visuals system. The main differences:

• Per-campaign, not per-store. The old designer applied a single badge style store-wide. The new system lets each campaign carry its own visual — so your Black Friday campaign can have a different badge style than your standard weekend sale.
• Reusable library. Each visual lives in a Visuals Library. You can create a design once and assign it to multiple campaigns, or duplicate it and make tweaks for a specific campaign.
• Multiple surface types. The old designer only handled product-image badges. The new system includes badges, savings rows in cart totals, and offer-explanation panels — three fundamentally different kinds of storefront communication, each with its own templates.
• No manual CSS required. Colors, typography, spacing, and shape are all controlled through the designer’s inspector. The plugin emits the styles inline; no custom CSS is needed for most configurations.

This post is also a natural companion to the full Smart Cycle Discounts free vs Pro breakdown, which covers every other feature area (discount types, scheduling, analytics, Cycle AI, etc.) but was written before Promotional Visuals shipped. The two posts together give you the complete picture.

How Visuals Render on the Storefront

Promotional Visuals in Smart Cycle Discounts render through WooCommerce’s existing hook system — action hooks and filter hooks — not through a separate frontend JavaScript layer. There is no extra script that re-queries your product data client-side. This matters for page speed and for compatibility: visuals render on the server along with everything else on the page.

Concretely: image badges hook into woocommerce_before_shop_loop_item_title (shop pages) and woocommerce_single_product_image_thumbnail_html (product pages). Summary badges and offer panels hook into the cart and checkout totals area. The threshold bar hooks into woocommerce_before_cart_totals and woocommerce_review_order_before_submit.

One thing visuals do not do: they do not make your products appear in WooCommerce’s native “On Sale” product filter or the wc_get_product_ids_on_sale() function. Smart Cycle Discounts applies discounts at render time through WooCommerce’s price filters, not by writing to the stored _sale_price database field. The storefront strikethrough pricing and “Sale!” flash badge render correctly — WooCommerce derives is_on_sale() from the filtered price at display time — but sale filter widgets that read stored sale data will not pick up SCD-discounted products. The dedicated post on the On Sale filter limitation explains the architecture behind this in full.

What “Discount-Type-Aware Picker” Means

When you assign a visual to a campaign in the wizard’s Promotional Visuals step, the picker shows you only the visual types that are compatible with that campaign’s discount type. This is what “discount-type-aware picker” refers to.

The logic is practical: a tier panel is only meaningful if the campaign runs a tiered quantity discount. There is no point showing it as an option for a percentage-off campaign. Similarly, a BOGO panel only makes sense for a BOGO or Buy X Get Y campaign. The threshold bar only applies to spend threshold campaigns.

In practice, the picker surfaces three slots — badge, panel, and bar — and shows tiles only for the types that fit:

• Badge slot — shows image badge (for shop/product pages) and summary badge (for cart/checkout). Available on every campaign regardless of discount type.
• Panel slot — shows the panel type that matches the campaign’s discount type: tier panel for tiered campaigns, BOGO panel for BOGO and Buy X Get Y campaigns, bundle panel for bundle campaigns. For percentage and fixed-amount campaigns, there is no compatible panel type — those discount mechanics do not have offer structure to explain beyond the headline number.
• Bar slot — shows the threshold bar only for spend threshold campaigns. No other discount type activates this slot.

This design prevents mismatched assignments and makes the picker easier to navigate — you only see what applies to the campaign in front of you.

Free: Image Badge

The image badge is a sale graphic overlaid on the product’s image. It is the most immediate visual signal that a product is discounted — visible at a glance on shop pages and product pages before a customer has read any text.

Where it appears: on the product image thumbnail on shop and category pages, and on the main product gallery image on single-product pages.

What it shows: the discount headline. Default text is the discount value (e.g., “20% OFF” or “Save $5.00”), but the text field supports custom copy and dynamic tokens. The {discount_value} token substitutes the campaign’s discount percentage or amount at render time. {savings_amount} substitutes the absolute currency saving on the specific product.

Templates (shapes): the designer ships four template recipes — Badge (rounded, configurable corner radius), Ribbon (notched flag-tail cutout), Starburst (spiky seal shape), and Circle stamp. All four are structural variants of the same image badge type. Any template’s colors, font size, and font weight are editable in the inspector after picking the recipe.

Storefront rendering: the badge HTML is output inside the image wrapper via the woocommerce_before_shop_loop_item_title action (shop loop) and the woocommerce_single_product_image_thumbnail_html filter (product gallery). No frontend JavaScript is required.

Tier: free.

Free: Summary Badge

The summary badge is a savings summary that appears in the cart totals and checkout review. Where the image badge is about catching attention on the browse pages, the summary badge is about confirming the saving at the moment the customer is committing to buy.

Where it appears: in the cart totals block (above the order total) and in the checkout review order section (above the submit button). This covers both the standard WooCommerce cart and checkout templates and the WooCommerce block cart and checkout.

What it shows: a summary of the discount applied to the order. The specific copy and format depend on the template chosen. Supports {discount_value} and {savings_amount} tokens.

Templates: four layouts — Highlighted row (a full-width totals row with a tinted background, visually matching the WooCommerce totals table structure), Inline pill (a compact accent chip inline with the totals label), Side note (italic marginal text), and Strikethrough (crossed-out amount alongside the discounted figure). The highlighted row is usually the most natural fit in a standard WooCommerce totals layout because it occupies the same visual space as the built-in subtotal and tax rows.

Storefront rendering: hooks into woocommerce_cart_totals_before_order_total and woocommerce_review_order_before_order_total.

Tier: free.

Free: BOGO Panel

The BOGO panel is an offer-explanation panel that communicates how a Buy One Get One or Buy X Get Y promotion works. Where an image badge can only show a headline, the panel can show the mechanics: buy two, get one; buy three, get one at 50% off; and so on.

Where it appears: on the product page above the Add to Cart button, and in the cart and checkout offer panels above the totals. This means the explanation follows the customer through the purchase journey — they see it when evaluating the product and again when reviewing their cart.

What it shows: the buy quantity, get quantity, and get-discount percentage for the campaign’s BOGO configuration. The panel renders these values dynamically from the campaign’s settings — you do not type them manually into the visual’s text fields. The three template layouts (Pill group, Featured, Card stack) present the same information in different visual structures.

Discount type compatibility: the BOGO panel is compatible with both the bogo discount type (same-product pool BOGO, available free) and the buy_x_get_y discount type (cross-product BOGO, Pro-only). The visual itself is free — the Pro-only distinction is whether the underlying discount type is available, not whether you can design the panel.

Storefront rendering: hooks into woocommerce_single_product_summary (product page, priority 25, just above the Add to Cart button area) and woocommerce_before_cart_totals / woocommerce_review_order_before_submit (cart and checkout).

Tier: free.

Pro: Tier Panel

The tier panel is a structured display of a tiered quantity discount’s price ladder. It shows every quantity tier configured in the campaign — minimum quantity, discount percentage or amount, and optionally the per-unit price or total savings at each tier — so customers can see the full volume pricing schedule before they add items to their cart.

Where it appears: on the product page above the Add to Cart button, and in the cart offer panels above the totals. The panel on the product page is particularly important for tiered discounts because customers need to know the tier structure before they decide how many units to buy.

What it shows: each tier row, the discount at that tier, and optionally the per-unit price and total savings columns. The active tier (the one the customer currently qualifies for based on cart quantity) is highlighted. A next-tier nudge is also available — it can show “Add 5 more to save 25%” when the customer is just below the next tier threshold. The tier data comes from the campaign’s configuration dynamically.

Templates: four layouts — Pills (inline horizontal tier chips), Cards (stacked individual cards per tier), Compact table (tight tabular grid), and Rows (vertical list). Each has sensible defaults for density and colors, all adjustable in the inspector.

Why it requires Pro: tiered quantity discounts are a Pro discount type in Smart Cycle Discounts. The tier panel visual gates with the same Pro requirement as the underlying discount type (discount_type_tiered feature gate). For more on how tiered pricing works, the tiered volume pricing documentation covers the tier configuration and checkout behavior.

Tier: Pro (requires tiered quantity discount type, which is also Pro).

Pro: Bundle Panel

The bundle panel displays the products included in a bundle deal campaign. A bundle discount is one where a customer receives a discount for buying a specific set of products together, and the panel’s job is to show which products are in the bundle and what the saving looks like.

Where it appears: on the product page above the Add to Cart button, and in the cart offer panels. On the product page, it makes the most sense on any product that is part of the bundle — seeing the other bundle products listed alongside the discount gives context that a simple badge cannot provide.

What it shows: the products in the bundle (with optional thumbnails), the bundle savings amount, and the overall bundle discount. The product data is drawn from the campaign’s bundle configuration; the panel renders it dynamically.

Templates: three layouts — Strip (a horizontal row of items that wraps on overflow), Carousel preview (horizontally scrollable thumbnails for larger bundles), and Stack (a vertical list with leading thumbnails). The stack layout works well for bundles with three or more products where the horizontal layouts would feel crowded.

Why it requires Pro: bundle deals are a Pro discount type in Smart Cycle Discounts. The bundle panel gates with the same Pro requirement as the underlying discount type (discount_type_bundle feature gate).

Tier: Pro (requires bundle deal discount type, which is also Pro).

Pro: Threshold Bar

The threshold bar is a progress bar that shows how close a customer is to unlocking a spend-threshold discount. Spend threshold campaigns apply a discount when the cart reaches a minimum value — “spend $75 to get 10% off.” The bar turns that abstract condition into a visible progress state: “You’re $19 away from saving 10%.”

Where it appears: above the cart totals section on the cart page, and above the submit button on the checkout page. This placement puts the bar exactly where the customer is most likely to consider adding another item to hit the threshold.

What it shows: the progress toward the threshold goal. Before the goal is reached, it shows the remaining amount needed and displays a configurable pre-goal message — “Spend {remaining} more to save {discount_value}” is the default. After the goal is reached, it switches to a post-goal message — “You’ve unlocked {discount_value} off!” Both message texts are configurable in the inspector. For campaigns with multiple spend tiers, the bar tracks progress toward the next unlocked tier.

Templates: three layout variants — Smooth (a continuous fill bar), Segmented (the fill split into equal blocks), and Stepped (a track with 25%, 50%, 75% tick marks). Track thickness is an independent control (thin, medium, thick) on any layout.

Why it requires Pro: spend threshold discounts are a Pro discount type in Smart Cycle Discounts. The threshold bar gates with the same Pro requirement (discount_type_spend_threshold feature gate).

Tier: Pro (requires spend threshold discount type, which is also Pro).

Full Feature Table

Templates by type

Common Questions Answered Directly