How to Show the 'Amount Left for Free Shipping' in WooCommerce

Charis Valtzis

Charis Valtzis

· 2 min read

If a store offers free shipping above a certain amount, customers should know how close they are. Otherwise someone sitting at €26 with a €30 threshold just pays shipping and leaves, when they would have happily added one more item.

Lots of plugins do this. But it's a few lines of code, so I usually just add it directly.

The code

Add this to your child theme's functions.php or a custom plugin:

add_action( 'woocommerce_before_cart', 'cv_show_free_shipping_notice' );

function cv_show_free_shipping_notice() {

    $free_shipping_min = 30; // Your free shipping threshold
    $cart_total = WC()->cart->subtotal;

    if ( $cart_total < $free_shipping_min ) {
        $remaining = $free_shipping_min - $cart_total;
        $message = 'Add ' . wc_price( $remaining ) . ' more to your cart to get free shipping!';
        $shop_url = wc_get_page_permalink( 'shop' );
        $notice = sprintf(
            '<a href="%s" class="button wc-forward">%s</a> %s',
            esc_url( $shop_url ),
            'Continue Shopping',
            wp_kses_post( $message )
        );
        wc_print_notice( $notice, 'notice' );
    }
}

With a €30 threshold and €22 in the cart, the customer sees:

Add €8.00 more to your cart to get free shipping!

next to a "Continue Shopping" button. Once they pass €30, the notice disappears.

What's going on

One small fix compared to versions of this snippet you'll find around: wc_price() returns HTML, so escaping the message with esc_html() would print the raw tags on screen. wp_kses_post() keeps the formatting and is still safe.

Before you copy-paste

Keep the number in sync. The 30 in the code has nothing to do with the free shipping setting in WooCommerce. If you change the threshold in WooCommerce → Settings → Shipping, change it here too. Otherwise the notice will lie to your customers, which is worse than no notice.

Taxes and coupons. subtotal includes tax. If your free shipping method is set up to count the amount before tax, or after coupons, the numbers won't match exactly. Test it with a real cart before going live.

Other places. The same logic works in the mini-cart or on the checkout page. Just hook it somewhere else, e.g. woocommerce_before_checkout_form. You could also turn it into a progress bar if you want something more visual.

#Cart#Free Shipping#Hooks#UX
← All postsHave a project in mind? Let's talk