Styling the progress bar - EcomDrama
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 October 31, 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 discount 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 discount amount in their cart and checkout totals — the discount is applied as a coupon, but shown under this label instead of a coupon code. 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.

Segmented
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.