How to Add Free Shipping Progress Bar in WooCommerce Product Page?

Are you searching for ways to boost your online store’s sales? I’m sure you might have already tried the proven strategy of offering free shipping based on different conditions when customers spend a little more. But now, let’s enhance this strategy from simply showing a notice message to an eye-catching ‘Free Shipping Progress Bar’. This makes the free shipping offer even more appealing, driving conversions like never before!

Picture this: a customer is about to purchase a $90 item but sees a message encouraging them to add just $10 more to qualify for free shipping. This nudges customers to spend a bit more. As a store owner, implementing this feature can increase your average order value and drive more sales. Let’s see how it’s done!

Solution: Add Free Shipping Progress Bar in WooCommerce Product Page

• The code ensures that the free shipping option is hidden until the cart total reaches or exceeds the set threshold of $100.
• If the cart total falls below $100, a progress bar appears, showing customers how much more they need to spend to qualify for free shipping. The progress bar dynamically changes based on the current cart total and the $100 threshold.
• When the cart total meets or exceeds the $100 threshold, the code displays a message indicating that free shipping has been unlocked.

add_filter( 'woocommerce_package_rates', 'ts_hide_free_shipping', 10, 2 );
function ts_hide_free_shipping( $rates, $package ) {
    // Calculate cart total
    $cart_total = WC()->cart->get_subtotal();

    // Check if cart total is less than 100
    if ( $cart_total < 100 ) {
        // Loop through shipping rates
        foreach ( $rates as $rate_id => $rate ) {
            // Check if the rate is free shipping and unset it
            if ( 'free_shipping' === $rate->method_id ) {
                unset( $rates[ $rate_id ] );
            }
        }
    }

    return $rates;
}


// Show 'Spend another X amount' on cart page.
add_filter( 'woocommerce_cart_totals_before_shipping', 'ts_cart_page_progress_bar', 10 );
function ts_cart_page_progress_bar() {
    $cart_total = WC()->cart->get_subtotal();
    $cart_remaining = 100 - $cart_total;
    if ($cart_total < 100 ) {
        echo '<div style="display: flex; align-items: center;">';
        echo '<span style="margin-right: 10px;">' . get_woocommerce_currency_symbol() . '0</span>';
        echo '<progress id="freeshippingprogress" max="100" value="'.$cart_total.'"></progress>';
        echo '<span style="margin-left: 10px;">' . get_woocommerce_currency_symbol() . '100</span>';
        echo '</div>';
        echo '<span style="color:blue;">You\'re ' . get_woocommerce_currency_symbol() . $cart_remaining . ' away from free shipping!</span>';
    } else {
        echo '<span style="color:blue;">You\'ve unlocked free shipping!</span>';
    }
};

// Show 'Spend another X amount' on checkout.
add_filter( 'woocommerce_checkout_before_order_review', 'ts_checkout_page_progress_bar', 10 );
function ts_checkout_page_progress_bar() {
    $cart_total = WC()->cart->get_subtotal();
    $cart_remaining = 100 - $cart_total;
    if ($cart_total < 100 ) {
   echo '<span style="color:blue;">Spend another ' . get_woocommerce_currency_symbol() . $cart_remaining . ' for free shipping!</span><br><progress id="freeshippingprogress" max="100" value="'.$cart_total.'"></progress>';
    } else {
        echo '<span style="color:blue;">You\'ve unlocked free shipping!</span>';
    }
};

Output

When a customer adds a product worth $90 to the cart, the progress bar is displayed as “You’re $10 away from free shipping”. Also, the free shipping is hidden at this point since the cart total doesn’t meet the threshold amount of $100.

If the customer proceeds to the checkout page with the same cart total, then the progress bar will aslo be displayed on the checkout page as well.

With only $10 left for free shipping, customers might opt to add a $10 product. In such cases, the message will switch to “You’ve unlocked free shipping!

Showing the free shipping progress bar in WooCommerce is just one part of optimizing sales. You can add many more conditions to make it logical and functional. Take a look at the Free Shipping Progress Bar plugin to easily implement the progress bar and also set complex conditions based on your store’s requirements.