Shipping Progress Bar

Shipping Progress Bar allows your WooCommerce store to display dynamic progress indicators that motivate customers to reach free shipping thresholds, increasing average order value and reducing cart abandonment.

By showing customers exactly how much more they need to spend to unlock free shipping, this plugin creates a powerful psychological incentive that encourages additional purchases while improving the overall shopping experience.

Setup and Configuration

↑ Back to top

Getting started

↑ Back to top

To set up your store with Shipping Progress Bar:

1. Go to: WooCommerce > Settings > Shipping Progress Bar
2. Tick the checkbox to Enable Shipping Progress Bar
3. configure your free shipping threshold amount (e.g., 50 for $50) in the woocommerce setting
4. Customize your progress messages and design
5. Save changes

Basic Settings

Display Locations

Choose where the progress bar appears:

• Custom position using shortcode [shipping_progress_bar]
• ⚠️ Important for Divi Theme Users: If you’re using the Divi theme and want to display the progress bar on product pages, you should use the shortcode method instead of automatic placement. Add a Code module to your Divi product page template and insert [shipping_progress_bar] to ensure proper rendering.

Message Customization

• Initial Message: Text shown before threshold is reached
  • Default: “Add {amount} more for free shipping!”
  • Variables: {amount}, {currency}, {percentage}
• Success Message: Text shown when threshold is met
  • Default: “Congratulations! You’ve unlocked free shipping! 🎉”
• Close Message: Optional text when customer is very close
  • Example: “Only {amount} away from free shipping!”

Advanced configuration

↑ Back to top

Design Customization

Colors

• Background Color: Choose the bar container background
• Progress Bar Color: Color that fills as threshold is approached
• Text Color: Message text color
• Border Settings: Optional border radius

Typography

• Font size (12-24px recommended)
• Font weight (normal, bold)
• Text alignment (left, center, right)

Shipping Zones Integration

If you use multiple shipping zones with different free shipping thresholds:

1. The plugin will automatically detect customer’s shipping zone
2. Display the appropriate threshold for their location
3. Configure zone-specific messages if needed

Display Rules

↑ Back to top

Page Targeting

• Show on all pages
• Cart and checkout only
• Product pages only

Mobile Optimization

• Responsive design enabled by default

Usage

↑ Back to top

What Customers See on the Front End

↑ Back to top

Before Reaching Threshold

When a customer browses your store or adds items to cart:

• A prominent progress bar appears in the chosen location
• Clear message shows remaining amount needed
• Visual progress indicator fills gradually
• Updates in real-time as items are added/removed

Approaching Threshold

When customer is within 20% of the goal:

• Optional “Close Message” appears
• Progress bar color may intensify (if configured)
• Additional motivation to complete the goal

Goal Achieved

When cart total meets or exceeds the threshold:

• Success message displays
• Progress bar shows 100% complete
• Optional confetti animation plays
• Free shipping confirmed in cart totals

Cart Updates

• Progress updates automatically when:
  • Products are added to cart
  • Quantities are changed
  • Items are removed
  • Coupons are applied
• No page reload required (AJAX-powered)

Troubleshooting

↑ Back to top

Known errors or issues and how to solve them.

The Progress Bar Doesn’t Appear

↑ Back to top

Possible causes:

• Plugin not activated: Go to Plugins and ensure it’s active
• Not enabled in settings: Check WooCommerce > Settings > Shipping Progress Bar
• Page exclusion rule: Verify display rules don’t exclude current page
• Theme conflict: Switch to a default theme temporarily to test
• Caching issue: Clear all caches (browser, plugin, CDN)

Solution:

1. Verify plugin is activated
2. Check “Enable Shipping Progress Bar” is ticked
3. Review display location and page targeting settings
4. Clear all caches and test in incognito mode

For Divi Theme Users: If the progress bar doesn’t appear on product pages with Divi:

1. Edit your product page with Divi Builder
2. Add a Code module where you want the bar to appear
3. Insert the shortcode: [shipping_progress_bar]
4. Save and test

Incorrect Amount Calculation

↑ Back to top

Possible causes:

• Threshold doesn’t match WooCommerce shipping settings
• Tax or fees included/excluded inconsistently
• Product exclusions affecting calculation

Solution:

1. Go to WooCommerce > Settings > Shipping
2. Verify your free shipping method minimum amount
3. Ensure Shipping Progress Bar threshold matches exactly
4. Check if “Calculate based on” setting matches WooCommerce (subtotal vs total)
5. Review product exclusion rules

Progress Bar Styling Issues

↑ Back to top

Possible causes:

• Theme CSS conflicts
• Z-index issues with other elements
• Custom CSS overriding plugin styles

Solution:

1. Try increasing z-index in Advanced Settings
2. Add custom CSS to override theme conflicts:

css

.shipping-progress-bar {
    z-index: 9999 !important;
}

3. Contact support with theme name for compatibility patch

Divi-Specific Styling: If the progress bar looks misaligned in Divi:

1. Use the Code module with shortcode instead of automatic placement
2. Adjust padding/margins in the Code module settings
3. Add custom CSS to the Code module if needed

Progress Not Updating in Real-Time

↑ Back to top

Possible causes:

• JavaScript errors on page
• AJAX conflicts with other plugins
• Caching plugin preventing updates

Solution:

1. Open browser console (F12) and check for JavaScript errors
2. Temporarily disable other plugins to identify conflicts
3. Exclude progress bar from AJAX caching
4. Contact support if issue persists

Different Thresholds for Different Locations

↑ Back to top

How it works: The plugin automatically detects customer location and uses WooCommerce shipping zone settings. No additional configuration needed.

If threshold seems incorrect:

1. Check your WooCommerce > Settings > Shipping > Zones
2. Verify each shipping zone has the correct free shipping method configured
3. Ensure free shipping minimum order amounts are set properly per zone
4. Test by entering different shipping addresses during checkout

Mobile Display Issues

↑ Back to top

Possible causes:

• Mobile-specific CSS conflicts
• Fixed positioning issues on iOS
• Font size too large for small screens

Solution:

1. Adjust mobile font size setting separately
2. Test on actual devices, not just browser resize
3. Try different positioning options (floating vs static)

FAQs

↑ Back to top

Help customers by answering commonly asked questions.

For additional assistance:

• Documentation: Full guides available in your vendor dashboard
• Support Tickets: Submit via WooCommerce.com account
• Community Forum: Connect with other users

Before contacting support, please:

1. Check this documentation thoroughly
2. Clear all caches and test in incognito mode
3. Temporarily disable other plugins to isolate conflicts
4. Provide WordPress, WooCommerce, and plugin version numbers
5. If using Divi, mention this in your support request

---

Last updated: January 2026