How to Add a Free Shipping Bar in WooCommerce

Offering free delivery is one of the simplest ways to increase average order value in an online store. A dynamic notice that updates in real time as customers add products to their cart can be the extra nudge they need to complete a purchase or add one more item. In this guide, you’ll learn several ways to add a free shipping bar in WooCommerce, from lightweight code snippets to flexible plugins, so you can choose the approach that best fits your store and workflow.

Why a free shipping bar boosts conversions

A free shipping notice is more than a nice visual touch; it’s a proven conversion booster. When implemented well, it can:

• Increase average order value by showing how much more shoppers need to spend to unlock free delivery.
• Reduce cart abandonment by setting clear expectations up front about shipping costs.
• Highlight promotions without intrusive pop-ups or overlays.
• Guide user behavior by encouraging customers to add more items to qualify for a perk they clearly understand.

The key is to make the notice contextual and dynamic, adjusting the message based on the current cart total and your configured shipping thresholds.

Decide when free shipping should apply

Before adding any bar to your storefront, define the conditions under which free delivery will be available. The most common scenario is a minimum order amount, such as “Free shipping over $50.” You might also restrict this to certain locations, specific products, or particular shipping methods.

Configure a free shipping method

First, set up a proper free delivery option in your store so that the bar is aligned with actual shipping rules:

• In the dashboard, go to the shipping settings for your store.
• Select the shipping zone where you want to offer free delivery.
• Add or edit a method of type “Free shipping.”
• Choose the “Minimum order amount” requirement (or any combination that matches your promotion).
• Enter the minimum amount, for example 50 or 75.

Make a note of that threshold; you will use it in the text and logic of your free shipping notice.

Approach 1: Add a free shipping bar with a code snippet

If you prefer to keep your store lean and avoid additional plugins, you can add a free shipping bar via a simple snippet. This approach is ideal for developers or site owners comfortable editing theme files or using a code snippets plugin.

What this snippet will do

The example below will:

• Display a small notice at the top of the cart and checkout pages.
• Calculate how much more the customer must spend to get free shipping.
• Update the message dynamically based on the current cart subtotal.
• Show a success message once the free shipping threshold is reached.

Sample PHP snippet

Place the following code in a functionality plugin or via a safe code snippets tool. Avoid editing the parent theme’s core files directly.

<?php
// Show a free shipping progress notice in cart and checkout
add_action( 'woocommerce_before_cart', 'custom_free_shipping_bar' );
add_action( 'woocommerce_before_checkout_form', 'custom_free_shipping_bar', 5 );

function custom_free_shipping_bar() {

    if ( is_admin() ) {
        return;
    }

    // Set your minimum amount for free shipping
    $minimum_amount = 50; // Change to match your promotion

    if ( WC()->cart ) {

        $cart_total = WC()->cart->get_displayed_subtotal();

        if ( $cart_total < $minimum_amount ) {

            $remaining = $minimum_amount - $cart_total;
            $message   = sprintf(
                'Add %s more to your cart to unlock free shipping!',
                wc_price( $remaining )
            );

        } else {

            $message = 'Congratulations! You have unlocked free shipping.';

        }

        echo '<div class="custom-free-shipping-bar">' . esc_html( $message ) . '</div>';
    }
}

Refining the display location

The hooks above attach the bar to cart and checkout pages. If you want to show the notice on other areas, you can also experiment with:

• A header hook from your theme to show the notice sitewide.
• Product or archive hooks to display the bar while customers are still browsing.

Keep your design consistent: if you show the bar globally, ensure it doesn’t compete with navigation or push important elements too far down the viewport.

Styling the bar with CSS

The snippet outputs a simple container with a class. You can style it using your theme’s stylesheet or an additional CSS section:

.custom-free-shipping-bar {
    background-color: #f5f5f5;
    color: #222;
    text-align: center;
    padding: 10px 15px;
    font-size: 14px;
    border-bottom: 1px solid #e0e0e0;
}

.custom-free-shipping-bar strong {
    font-weight: 600;
}

Adjust the colors, spacing, and typography so the bar blends naturally with your brand while still catching attention.

Linking the bar to specific shipping methods

If you have multiple shipping methods and only one of them provides free delivery at a threshold, you may want your bar to reflect that more precisely. To do this, you can:

• Detect the active shipping methods in the current zone.
• Read the minimum amount from the free shipping method settings.
• Use that value instead of hard-coding it in your snippet.

This avoids inconsistencies if you later change the threshold in your shipping configuration.

Approach 2: Use a plugin for a flexible, visual bar

Not everyone wants to work directly with code. Several dedicated plugins are available that add a free shipping notice with minimal setup and offer more design and targeting options.

Typical features of dedicated plugins

While features vary, most well-built solutions offer:

• Visual configuration of text, colors, fonts, and positioning.
• Progress messages such as:
  • “You’re only $X away from free delivery.”
  • “You’ve unlocked free shipping!”
• Display rules to show or hide the bar on specific pages, categories, or devices.
• Support for multiple currencies or automatic formatting based on your store settings.
• Compatibility with caching and cart fragments so the amount updates without a full page reload.

Configuration steps (general workflow)

Although each plugin has its own interface, the setup process typically looks like this:

1. Install and activate the chosen plugin from the extensions directory or via manual upload.
2. Open the settings page dedicated to the free shipping notice.
3. Set the free shipping threshold to match your shipping method configuration.
4. Customize the messages for:
   • When the cart is empty or below the threshold.
   • When the customer is close to reaching the goal.
   • After the free shipping requirement is satisfied.
5. Choose the display position:
   • Top or bottom of the site as a floating bar.
   • Within the cart and checkout pages only.
   • Above the product grid or product details.
6. Enable device-specific rules if available:
   • Hide on mobile if the bar crowds the viewport.
   • Show only on mobile if that’s where most traffic comes from.
7. Test the behavior by adding and removing products from the cart, ensuring the text and threshold update correctly.

Advantages of the plugin-based approach

Using a dedicated extension is particularly helpful when:

• You want fine-grained control over design and placement without writing CSS.
• You run multiple promotions with different thresholds, for example by country or category.
• You prefer GUI-based management so non-technical team members can adjust messages and amounts.
• You need analytics or A/B testing features some plugins provide, to evaluate how well your bar performs.

Approach 3: Add a dynamic notice using hooks and shortcodes

If you want more flexibility than a simple snippet but don’t want to rely entirely on a dedicated plugin, you can create a shortcode that outputs the free shipping bar. This makes it easy to place the notice inside blocks, widgets, or custom templates.

Create a shortcode for the bar

The following example defines a shortcode that prints a dynamic message based on the current cart subtotal and a chosen minimum amount.

<?php
// Shortcode: [free_shipping_bar minimum="50"]
function custom_free_shipping_bar_shortcode( $atts ) {

    $atts = shortcode_atts(
        array(
            'minimum' => 50,
        ),
        $atts,
        'free_shipping_bar'
    );

    if ( ! WC()->cart ) {
        return '';
    }

    $minimum    = floatval( $atts['minimum'] );
    $cart_total = WC()->cart->get_displayed_subtotal();

    if ( $cart_total < $minimum ) {
        $remaining = $minimum - $cart_total;
        $message   = sprintf(
            'Spend %s more to get free shipping.',
            wc_price( $remaining )
        );
    } else {
        $message = 'You have qualified for free shipping!';
    }

    return '<div class="custom-free-shipping-bar">' . esc_html( $message ) . '</div>';
}
add_shortcode( 'free_shipping_bar', 'custom_free_shipping_bar_shortcode' );

Placing the shortcode in Gutenberg

Once this shortcode is active:

• Add a Shortcode block in the editor where you want the bar.
• Insert something like: [free_shipping_bar minimum="75"] to match your promotion.
• Update or publish the page.

This lets you control the free shipping notice per page or per block layout without editing theme files again.

Best practices to maximize impact

Regardless of the method you choose, the details of your implementation will heavily influence how effective the free shipping bar is. Keep the following points in mind when you design and configure your notice.

Align the bar with your branding

Consistency matters for trust and professionalism. Make sure that:

• The bar’s typography and color scheme align with your site’s design system.
• The tone of voice in your message matches your brand, whether that’s playful, minimalist, or formal.
• The bar does not overshadow key navigational elements or primary calls to action.

Use clear, concise messaging

Your text should be instantly understandable. Aim for:

• Specific thresholds: clearly mention the amount required.
• Positive reinforcement: celebrate when the customer qualifies.
• Short sentences: avoid long explanations or legal disclaimers in the bar itself.

Reserve any detailed terms for a separate section or a link within the notice if necessary.

Test across devices and screen sizes

A bar that looks great on a large monitor can feel intrusive on a mobile phone. Always test:

• On multiple screen widths to ensure the text wraps cleanly.
• That no important content is hidden behind floating elements.
• That close or dismiss buttons are easy to tap when provided.

Measure performance and iterate

A free shipping bar is a marketing element and should be treated like one. To optimize it over time:

• Monitor your average order value before and after implementation.
• Track changes in cart abandonment rates and checkout completion.
• Run simple A/B tests with different thresholds or messages, if your setup allows.
• Adjust the threshold if too many orders fall just below the target amount.

Common pitfalls to avoid

When adding a dynamic notice about shipping, it’s easy to introduce minor inconsistencies that confuse customers. Pay attention to the following issues.

Mismatch between bar and actual shipping rules

If your cart displays a bar that promises free delivery at a certain threshold, but the checkout shows otherwise due to location, weight, or product exceptions, customers will lose trust quickly. To minimize this risk:

• Keep your shipping configuration simple and transparent.
• Ensure the bar’s threshold and conditions match your actual rules.
• Add a short clarification when necessary, such as “Selected regions only.”

Performance and caching conflicts

Because the bar depends on the cart contents, caching plugins and full-page cache can sometimes prevent it from updating properly. If you notice stale messages:

• Enable cart fragment support in your theme or your plugin settings, where applicable.
• Exclude cart, checkout, and account pages from aggressive caching.
• Test guest and logged-in sessions separately.

Overlapping promotional elements

Too many sticky bars, pop-ups, and banners can frustrate users. Carefully assess which elements are truly essential and:

• Avoid stacking multiple floating bars at the top of the viewport.
• Coordinate timing with other promotions so your free shipping message remains visible.
• Use dismissible options where appropriate so returning visitors can hide the notice.

Putting it all together

A well-implemented free shipping bar in a WooCommerce store can significantly improve both conversion rate and basket size. Whether you choose a lightweight code snippet, a flexible shortcode, or a full-featured plugin, the goal remains the same: clearly communicate the value of free delivery and guide customers toward qualifying for it.

Start by defining your free shipping rules, then choose the technical approach that suits your workflow. Keep the design on-brand, make the messaging concise and dynamic, test thoroughly across devices, and monitor how it affects your key metrics. With these fundamentals in place, your free shipping bar will feel like a natural extension of your store rather than an afterthought—and your customers will be more inclined to complete and even upgrade their orders.