New Side Cart now integrates with Progressive Discount — rewards visible inside the cart. See how
Get started
Documentation / Progressive Discount

Styling the progress bar

Updated September 5, 2026 · 1 min read

The Settings screen is separate from the Campaigns wizard — it controls how the progress bar looks and is shared by every campaign, current and future, rather than being set per campaign.

Colours

Accent Color is what a shopper sees for most of their shopping session, so it’s worth matching to your theme’s existing primary button colour. Completion Color only appears once the final message from the previous article is showing — giving the shopper a distinct visual cue, separate from the accent colour, that they’ve reached the top of the ladder.

Label and layout

Discount Label
The text shown on the fee line in the cart and checkout totals when a discount is active.

Progressive Discount

Progress bar layout
Classic or Segmented.
Classic
Segmented

Discount Label is the text a shopper sees next to the fee amount in their order totals, since the discount is applied as a fee line rather than a coupon — renaming it to something like “VIP reward” can make the line read more like a benefit than a generic system label.

Progress bar layout switches between a single continuous bar that fills as the cart total grows (Classic) and a bar broken into one segment per step (Segmented), which makes each individual threshold visible as its own section rather than one smooth gradient toward the top.

Side Cart · Free licence

Get Side Cart free, straight to your inbox.

Join the EcomDrama newsletter and we will send you the plugin, your licence key and practical WooCommerce growth tips.