Add a WooCommerce Free Shipping Progress Bar (Boost Average Order Value)

Want to make your WooCommerce store more engaging and increase your average order value?
Adding a WooCommerce free shipping progress bar is one of the easiest tricks to do it — and it looks great too!

This progress bar visually shows customers how close they are to earning free shipping, motivating them to add just a little more to their cart. 🛍️

💻 The Code Snippet (No Plugin Needed)

Paste this PHP snippet into your child theme’s functions.php or a code snippets plugin:

// Display a free shipping progress bar on cart and checkout pages
function show_free_shipping_progress_bar() {
    $min_amount = 1000; // Minimum amount for free shipping
    $current = WC()->cart->subtotal; // Current cart subtotal

    if ($current < $min_amount) {
        $remaining = $min_amount - $current;
        $percentage = ($current / $min_amount) * 100;
        ?>
        <div class="free-shipping-container">
            <p class="free-shipping-msg">🚚 Add <strong><?php echo wc_price($remaining); ?></strong> more to get Free Shipping!</p>
            <div class="free-shipping-bar">
                <div class="free-shipping-fill" style="width:<?php echo esc_attr($percentage); ?>%;"></div>
            </div>
        </div>
        <?php
    }
}
add_action('woocommerce_before_cart', 'show_free_shipping_progress_bar');
add_action('woocommerce_before_checkout_form', 'show_free_shipping_progress_bar');

🧩 How to Add the WooCommerce Free Shipping Progress Bar

You can insert the above code in:

1. functions.php (child theme)
2. Code Snippets Plugin — safer for updates
3. A small custom functionality plugin

⚠️ Always use a staging site or backup before editing live code.

🎨 How It Works

• The code checks the customer’s cart subtotal.
• It compares it with your free shipping threshold (e.g., $1000).
• If the subtotal is lower, it shows:
  • Remaining amount to qualify for free shipping
  • A progress bar indicating how close they are

💡 Example: If free shipping starts at $1000 and the cart total is $700, the progress bar will show 70%, and a message like

“Add $300 more to get Free Shipping!”

✨ Benefits of Adding a WooCommerce Free Shipping Progress Bar

✅ Encourages customers to spend more
✅ Visually motivates users (FOMO psychology)
✅ Increases average order value (AOV)
✅ Looks professional and enhances UX

This small visual tweak can make a huge difference in conversion rates.

⚙️ Customize the Look (CSS Example)

Add this to your theme’s Additional CSS section:

.free-shipping-container {
  margin: 15px 0;
  padding: 10px;
  background: #f5f5f5;
  border-radius: 10px;
  text-align: center;
}
.free-shipping-bar {
  width: 100%;
  background: #e0e0e0;
  height: 10px;
  border-radius: 8px;
  overflow: hidden;
  margin-top: 8px;
}
.free-shipping-fill {
  height: 100%;
  background: #27ae60;
  transition: width 0.5s ease-in-out;
}
.free-shipping-msg {
  font-weight: 600;
  color: #333;
}

🎨 You can tweak colors and layout to match your store’s branding.

💡 Advanced Tips

• Change $min_amount to your own free shipping threshold.
• Add conditions for specific countries or shipping zones.
• Combine it with coupon popups or product recommendations for more upsells.

✅ Conclusion

Adding a WooCommerce free shipping progress bar is a smart psychological nudge to increase sales.
It turns a normal checkout experience into a goal-oriented one — every buyer wants to reach “Free Shipping”!

Just copy the snippet, paste it, and start converting visitors into happy, returning customers. 💰

📘 FAQ

Q1: Can I change the free shipping amount?
Yes. Just edit $min_amount = 1000; to your desired threshold.

Q2: Can I style the progress bar differently?
Absolutely! Use CSS to change colors, size, or animation.

Q3: Will this work on both cart and checkout pages?
Yes, it’s displayed on both using WooCommerce hooks.

Q4: Can I hide it for logged-out users?
Yes, wrap the code in a condition:

if ( is_user_logged_in() ) { ... }