Progress Upsell Bar

Motivational progress bars showing customers how close they are to reaching goals like free shipping, discounts, or free gifts.

What is the Upsell Bar?

The Progress Upsell Bar is an extension module that displays progress bars on the cart or checkout page.

Main features:

Motivates customers to spend more
Shows progress toward reaching goals (free shipping, discounts, gifts)
Supports multiple progress bars with different goals
Each bar can have multiple milestones (e.g., $20 → free shipping, $40 → 10% discount, $80 → free gift)
Real-time AJAX updates on cart changes
Multi-currency support — automatic conversion of target values

Practical Usage Examples

Example 1: Free Shipping

"Add $10 more to get free shipping!"

Example 2: Multiple Milestones

Progress bar with 3 goals:
- $20 → Free shipping
- $40 → 10% discount
- $80 → Free gift

Example 3: Item Count

"Buy 2 more products to get a free gift!"

How to Activate the Module

WooCommerce → Discount Rules → Settings
Find the “Progress Upsell Bar” section
Click “Add Upsell Bar”

Configuring the Progress Bar

1. Basic Settings

Type counting

What: Determines what is counted toward the goal.

Available types:

Cart subtotal in VAT - Cart subtotal with tax (before discounts)
Cart subtotal ex VAT - Cart subtotal without tax (before discounts)
Cart Subtotal after discount in VAT - Subtotal after discounts with tax
Cart Subtotal after discount ex VAT - Subtotal after discounts without tax
Items count - Number of items in the cart (sum of all quantities)
Cart weight - Total cart weight

Tip: The most commonly used is Cart subtotal in VAT for discounts and free shipping.

Display positions

What: Where the progress bar is displayed (multi-select, you can choose multiple positions).

Available positions:

Cart page:

Start of cart page - At the beginning of the cart page
Before cart table - Before the cart table
After cart table - After the cart table
End of cart page - At the end of the cart page

Checkout page:

Start of checkout page - At the beginning of checkout
End of checkout page - At the end of checkout

Tip: We recommend Before cart table for the best visibility.

Confirmation message

What: The message displayed when the customer reaches all goals.

Example:

"Great, you've unlocked all the benefits for your order!"

2. Goal Settings

Each progress bar can have an unlimited number of goals. Goals are displayed as milestones on the progress bar.

Goal label

Short label displayed next to the goal icon.

Examples:

“Free shipping”
“10% discount”
“Free gift”

Note: Required field.

Goal message

Motivational message displayed when the goal is active (not yet reached).

Placeholder usage:

{value} - Remaining value to reach the goal (automatically formatted)

Examples:

"Add {value} more to get free shipping!"
"Buy {value} more to get a free gift!"

Tip: For Type counting = Items count, {value} is displayed as a number (e.g., “3”); for other types, it is displayed as a price (e.g., “$10”).

Goal value

The value the customer must reach.

Examples:

For Cart subtotal: 1000 (= $40)
For Items count: 3 (= 3 items)
For Cart weight: 5 (= 5 kg)

Note: Required field.

Goal icon

Icon displayed next to the goal (in single mode also at the milestone).

Available icons:

Shipping - For free shipping
Gift - For gifts
Discount - For discounts
No money - For cashback/credits
Custom - Custom uploaded image

Custom icon: If you select Custom, a field for uploading a custom image appears (24x24 px recommended).

3. Conditional Display

The progress bar can be shown only when certain conditions are met.

Enable conditional display

Enable/disable conditional display.

When disabled: The progress bar is always shown. When enabled: The progress bar is shown only when conditions are met.

Conditions

Available condition types:

1. Date Time-limited display of the progress bar.

Example:

Type: Date
Operator: >= (from)
Value: 2025-11-24

Result: Progress bar is shown from Nov 24, 2025 (Black Friday)

2. User role Display only for certain user roles.

Example:

Type: User role
Operator: Includes
Roles: VIP, Premium

Result: Progress bar only for VIP and Premium customers

Condition logic:

All conditions must be met (AND logic)

Visual Settings (Global)

Background color

Progress bar background color.

Default: #ffffff (white)

Text color

Message text color.

Tip: Leave empty for the default theme color

Icon color

Icon color for unreached goals.

Default: #000000 (black)

Icon color completed

Icon color for reached goals.

Default: #ffffff (white)

Remaining progressbar color

Background color of the progress bar (inactive portion).

Default: #eeeeee (light gray)

Current progressbar color

Color of the active portion of the progress bar.

Default: #008B8B (teal)

How the Progress Bar Works

Single mode (1 goal)

When the progress bar has only 1 goal, it is displayed as a simple progress bar with an icon and message.

Example:

[Icon] "Add $10 more to get free shipping!"
[████████░░] 75%

Multi mode (multiple goals)

When the progress bar has multiple goals, it is displayed as a progress bar with milestones.

Example:

"Add $10 more to get free shipping!"

[████████░░|░░░░░░░░|░░░░░░░░]
   $20        $40       $80
  Shipping  10% off    Gift

AJAX Updates

The progress bar automatically updates on every cart change:

Adding a product
Removing a product
Changing quantity
Changing shipping
Applying coupons

Animations:

Smooth progress animation
Sequential milestone animations (0.6s delay between goals)
Animation on goal completion

Shortcode

The progress bar can be placed at a custom position using a shortcode.

Basic usage

[wpify_progress_upsell_bar]

Displays all configured progress bars.

Specific bar

[wpify_progress_upsell_bar id="0"]

Displays only the progress bar with index 0 (first bar).

Tip: Indexes start at 0 (first bar = 0, second = 1, etc.).

See Shortcodes for more details.

Multi-currency Support

The progress bar has built-in support for multi-currency plugins.

Automatic conversion:

Target values (Goal value)
Remaining values ({value})
Conditions (cart subtotal, total)

Supported plugins:

WPML Multicurrency
YITH Multicurrency
Aelia Currency Switcher

Example:

Target set in CZK: 1000 CZK
When switched to EUR (rate 1:25): 40 EUR

Message: "Buy for €10 more to get free shipping!" (automatically converted)

Practical Configuration Examples

Example 1: Simple Free Shipping

Configuration:

Type counting: Cart subtotal in VAT
Display positions: Before cart table

Goal 1:
- Label: "Free shipping"
- Message: "Add {value} more to get free shipping!"
- Value: 1000
- Icon: Shipping

Confirmation message: "You've got free shipping!"

Result: A progress bar with one goal showing progress toward $40 for free shipping.

Example 2: Multiple milestones (shipping + discount + gift)

Configuration:

Type counting: Cart subtotal in VAT
Display positions: Before cart table

Goal 1:
- Label: "Free shipping"
- Message: "Add {value} more to get free shipping!"
- Value: 500
- Icon: Shipping

Goal 2:
- Label: "10% discount"
- Message: "Add {value} more to get a 10% discount!"
- Value: 1000
- Icon: Discount

Goal 3:
- Label: "Free gift"
- Message: "Add {value} more to get a free gift!"
- Value: 2000
- Icon: Gift

Confirmation message: "Great, you've unlocked all the benefits!"

Result: A progress bar with 3 milestones motivating higher spending.

Example 3: Item count for a gift

Configuration:

Type counting: Items count
Display positions: Before cart table

Goal 1:
- Label: "Free gift"
- Message: "Buy {value} more to get a free gift!"
- Value: 5
- Icon: Gift

Confirmation message: "You've earned a free gift!"

Result: A progress bar showing how many more items the customer needs to buy.

Example 4: VIP progress bar (registered users only)

Configuration:

Type counting: Cart subtotal in VAT
Display positions: Before cart table

Goal 1:
- Label: "VIP 20% discount"
- Message: "Just {value} more to get a VIP 20% discount!"
- Value: 3000
- Icon: Discount

Conditional display:
Enable conditional display: Yes
Conditions:
  - Type: User role
  - Compare: Includes
  - Roles: VIP, Premium

Result: The progress bar is shown only to VIP and Premium customers.

Example 5: Black Friday time-limited

Configuration:

Type counting: Cart subtotal in VAT
Display positions: Before cart table

Goal 1:
- Label: "Black Friday discount"
- Message: "Add {value} more to get a 30% Black Friday discount!"
- Value: 2000
- Icon: Discount

Conditional display:
Enable conditional display: Yes
Conditions:
  - Type: Date
  - Compare: >= (from)
  - Date: 2025-11-24 00:00

  - Type: Date
  - Compare: <= (to)
  - Date: 2025-11-25 23:59

Result: The progress bar is shown only during Black Friday (Nov 24-25, 2025).

Multiple Progress Bars at Once

The plugin supports an unlimited number of progress bars.

Use cases:

Different goals for different customers (VIP, regular)
Different time-limited promotions (Black Friday, Christmas)
Different positions (cart vs. checkout)

Example:

Bar 1: Free shipping from $20 (all customers)
Bar 2: Extra VIP discount from $80 (VIP only)
Bar 3: Christmas gift from $60 (December only)

Note: All active bars are displayed at their selected positions.

Frequently Asked Questions

Does the progress bar appear on the product page?

No. The progress bar is shown only on the cart and checkout pages (based on the Display positions setting).

To display it on a product page, use the shortcode in a page builder or template customization.

How to set the progress bar only for certain products?

The progress bar does not have a product filter (like discount rules do).

Workaround: Use the Cart subtotal condition with a minimum value corresponding to the price of the products you want to target.

Does the progress bar work with AJAX cart?

Yes. The progress bar uses the WooCommerce fragments API for real-time AJAX updates.

Compatible with:

WooCommerce AJAX cart
Side cart plugins
Mini cart widgets

How does the progress bar behave with multiple milestones?

Sequential display:

First, the message for the nearest unreached goal is shown
On reaching a goal, the animation advances to the next goal
When all goals are reached, the Confirmation message is displayed

Animations:

Smooth progress animations
0.6s delay between milestones on multiple changes
Icon animations on completion

Does the progress bar support custom CSS?

Yes. The progress bar uses CSS variables for easy customization.

Available CSS variables:

:root {
  --wpify-upsell-bar-bg-color: #ffffff;
  --wpify-upsell-bar-text-color: inherit;
  --wpify-upsell-bar-icon-color: #000000;
  --wpify-upsell-bar-icon-color-completed: #ffffff;
  --wpify-upsell-bar-progress-color: #008B8B;
  --wpify-upsell-bar-remain-color: #eeeeee;
}

Custom CSS example:

.wpify-upsell-bar {
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

What is the difference between single and multi mode?

Single mode (1 goal):

Simple progress bar
Icon displayed on the left
Message above the progress bar

Multi mode (multiple goals):

Progress bar with milestones
Icons at each milestone
Milestone values displayed
Labels below icons

Note: The plugin automatically detects how many goals the bar has and switches between modes.