Black Friday & Cyber Monday SUPER SALE ALL WEEK:
Grab 40% OFF on plugins
Days
Hours
Minutes
Seconds

Display the remaining cost for customer to avail free shipping on your WooCommerce store

Free Shipping Remaining Cost on WooCommerce Cart & Checkout

Shipping is an important factor for the customers while shopping online. Usually store owners give a variety of shipping options to customers so they are more inclined to finish their purchase.

For example, some store owners give discount on the shipping costs if customers purchase a certain number of products, or allow free shipping for certain zones near the store.

The one thing e-commerce store owners know is that customers love free shipping when buying products. This is often tied to a minimum order total for free shipping. You can let the customers know how much more they need to shop so as to avail the free shipping.

By default, WooCommerce provides three shipping methods which can be added for shipping zones based on different regions. In a way, these are very limited. These limitations can be overcome by using some advanced shipping plugins.

WooCommerce has a setting where we can set the minimum amount required for free shipping. It displays an option for free shipping if that much amount of products have been purchased. However, WooCommerce doesn’t provide a way to show a message to the user as to what is the minimum amount required to get free shipping. That’s a big drawback. We will see how to overcome that.

Set Minimum Order Amount for Free Shipping

To set the free shipping minimum amount, go to Dashboard > WooCommerce > Settings > Shipping > Shipping Zones.

Display the remaining cost for customer to avail free shipping on your WooCommerce store - Tyche Softwares

If you hover over ‘Free Shipping’, you will see the edit option. On the edit screen, you can choose whether you want to set the minimum amount, a minimum amount for free shipping with a coupon, etc.

Display the remaining cost for customer to avail free shipping on your WooCommerce store - Tyche Softwares

So now we have set $500 as the minimum order amount that is required to get free shipping on any WooCommerce order. We will now see how to show the remaining amount to get free shipping on the cart & checkout page.

Where to Add Custom Code in WooCommerce?

It is advisable to add the code snippets to the functions.php file of your child theme. Access the file directly from Appearance->Theme File Editor->Locating the child theme’s functions.php from the right sidebar. You can also access it from your theme’s directory file. Insert the following code snippet in functions.php. The alternative & easy option is to install & activate the Code Snippets plugin. You can then add the code as a new snippet via the plugin.

Show Amount Left for Free Shipping on Cart Page

We will display the notice above the cart with the WooCommerce hook woocommerce_before_cart. This notice will be displayed only when the cart total is less than the minimum amount required for free shipping. We need the total amount from the cart and we already have the minimum amount required for free shipping. We need to display the difference between these two in the notice.

 

add_action( 'woocommerce_before_cart', 'ts_add_notice_free_shipping' );

function ts_add_notice_free_shipping() {
           
           $free_shipping_settings = get_option('woocommerce_free_shipping_1_settings');
           $amount_for_free_shipping = $free_shipping_settings['min_amount'];

           $cart = WC()->cart->subtotal;
           $remaining = $amount_for_free_shipping - $cart;

           if( $amount_for_free_shipping > $cart ){
               $notice = sprintf( "Add %s worth more products to get free shipping", wc_price($remaining));
               wc_print_notice( $notice , 'notice' );
           }
            
}

 

In the above example, we get the free shipping settings from our wp_options table. Then we get the cart subtotal and calculate the remaining amount. We display the notice using wc_print_notice() if the amount left for free shipping is greater than the cart total.

Display the remaining cost for customer to avail free shipping on your WooCommerce store - Tyche Softwares

The option for “Free shipping” won’t appear on cart page as far as the order total is below the minimum required order amount. But once the cart total reaches your minimum amount ( which in this example is $500 ), it will give an option for free shipping as well.

Display the remaining cost for customer to avail free shipping on your WooCommerce store - Tyche Softwares

As you can see, the cart page gives an option to select a shipping method.But you may want to display only the “Free shipping” method & hide the other shipping methods (like “Flat rate”), as the order total has already reached the minimum amount for the free shipping option. Let’s see how we can do that.

abandoned cart pro CTA image tyche

Wondering how to bring back your Abandoned cart users?

Abandoned Cart Pro for WooCommerce is loaded with useful features that help you send an effective volume of reminders via text, email, and messenger. You can also share and manage discount codes that will encourage your customers to complete their orders.

Even better, you can stop the cart abandonment with the exit intent popup!

Show Amount Left for Free Shipping on Checkout Page

We can display the notice on the checkout page in the same way as the cart page. Our function will be same but we will use a different filter for the checkout page. Of course, the filter/hook depends on the position you want to display the notice. We will display it above the checkout form using the woocommerce_before_checkout_form hook.

add_action( 'woocommerce_before_checkout_form', 'ts_add_notice_free_shipping' );
function ts_add_notice_free_shipping() {
    $free_shipping_settings = get_option('woocommerce_free_shipping_1_settings');
    $amount_for_free_shipping = $free_shipping_settings['min_amount'];
    $cart = WC()->cart->get_subtotal();
    $remaining = $amount_for_free_shipping - $cart;
    if ( $amount_for_free_shipping > $cart ) {
        $notice = sprintf( "Add %s worth more products to get free shipping", wc_price( $remaining ) );
        wc_print_notice( $notice , 'notice' );
    }
}

The notice will now show up above the checkout form.

Free Shipping Remaining Cost on WooCommerce Cart & Checkout

Show the Amount left while 2 Free Shipping Methods are available

Let’s consider that you have 2 Free shipping methods as Free shipping via Post & Free shipping via courier. The foremost step is to create these methods in WooCommerce settings. Go to Dashboard > WooCommerce > Settings > Shipping > Shipping Zones.

And then, set the free shipping minimum amount for these two methods. 

Display the remaining cost for customer to avail free shipping on your WooCommerce store - Tyche Softwares

You can define the minimum order amount required for availing of free shipping using these methods, as illustrated in the provided image below. As per the code, the minimum order amount to avail of Free shipping via post is set to $50. And the minimum order amount to avail of Free shipping via courier is set to $100.

Display the remaining cost for customer to avail free shipping on your WooCommerce store - Tyche Softwares
Display the remaining cost for customer to avail free shipping on your WooCommerce store - Tyche Softwares

The code is intended to showcase a message when the cart with a subtotal that falls below the minimum requirement for availing of free shipping via the courier method.

add_action( 'woocommerce_before_cart', 'ts_free_shipping_cart_notice' );

function ts_free_shipping_cart_notice() {
    $min_post_amount = 50; // Minimum amount for free shipping via post
    $min_courier_amount = 100; // Minimum amount for free shipping via courier

    $subtotal = WC()->cart->subtotal;

    $courier_notice = '';

    if ( $subtotal < $min_courier_amount ) {
        $courier_remaining = wc_price( $min_courier_amount - $subtotal );
        $courier_notice = sprintf( 'Add %s worth more products to get free shipping via courier', $courier_remaining );
    } else {
        $courier_notice = 'You qualify for free shipping via courier!';
    }

    $return_to = wc_get_page_permalink( 'shop' );

    $notice = sprintf(
        '<a href="%s" class="button wc-forward">%s</a><br>%s',
        esc_url( $return_to ),
        'Continue Shopping',
        $courier_notice
    );

    wc_print_notice( $notice, 'notice' );
}

Output 1

The presented image illustrates a cart subtotal of $80, which is below the minimum requirement of $100 for qualifying for free shipping via the courier method. So, the notice message such as “Add $20.00 worth more products to get free shipping via courier!” is displayed.

Cart Subtotal is Below the Minimum for Courier Shipping

Display the remaining cost for customer to avail free shipping on your WooCommerce store - Tyche Softwares

Output 2

The image illustrates a cart subtotal of $120 that exceeds the minimum requirement for free shipping via the courier method. The cart contains products with a combined value that fulfills the specified threshold for free shipping via post & via courier.

Cart Subtotal Qualifies for Free Shipping via Courier

Display the remaining cost for customer to avail free shipping on your WooCommerce store - Tyche Softwares

The provided output images also demonstrate how the shipping methods adjust dynamically according to the specified threshold values for each of the Free shipping methods.

If you have any questions or feedback, or if you’d like to share your own experiences with these methods, feel free to leave a comment below.

Browse more in: WooCommerce Tutorials, WooCommerce, WooCommerce How Tos

Share It:

Subscribe
Notify of
56 Comments
Newest
Oldest
Inline Feedbacks
View all comments
nicholas
2 months ago

Hello, Thank you for your informative guide. I would like to implement something like this to our website. Instead of free shipping we would like it to advertise a free product ” Spend X worth more and get Free Y” With some minor adjustments to the code this seems possible. However we would like to got a step further. We would like a ” Spend X worth more and get Free Y” notification to appear, as a pop up when a customer is close to the X amount. For example Spend £50 and get a free T shirt, if a… Read more »

2 months ago
Reply to  nicholas

Hi Nicholas,
For your specific requirement, please refer to our post “How to Set Up a BOGO Deal: Spend X More and Get a Free Product Based on Cart Amount in WooCommerce?

Abed
3 months ago

Hello all

if i need to display the notice on the checkout page and cart page to be (Add (20.00 our currency is ILS ) worth more products to get 10% discount) , is it possible , ?? what the codes will be ??? , please help

3 months ago
Reply to  Abed

Hi Abed,
Below is the code for your specific requirement and also refer to the output here:

https://prnt.sc/KEShMvFGXj1C
https://prnt.sc/kStoTC8QC6cV

// Hook to display notice on cart page
add_action('woocommerce_before_cart', 'ts_add_discount_notice');


// Hook to display notice on checkout page
add_action('woocommerce_before_checkout_form', 'ts_add_discount_notice');


function ts_add_discount_notice() {
    $discount_percentage = 10; // Change this to the desired discount percentage
    $currency_symbol = '₪'; // ILS currency symbol
    $discount_amount = 20;


            $notice = sprintf("Add %s worth more products to get %d%% discount", $currency_symbol . number_format($discount_amount, 2), $discount_percentage);
        wc_print_notice($notice, 'notice');
    }


6 months ago

Hello,
with the code for checkout page message “reads” only nett prices of the products. How should I change the parameter $cart = WC()>cart->get_subtotal();
to obtain gross prices of the product (price including tax) without shipping costs?

Because I have prices including tax on products and if you buy over 150 EUR worth of products (including taxes), you get free shipping.

6 months ago
Reply to  Peter

Hi,
To display gross prices (including tax) without shipping costs in the checkout page message, you can include these lines of code that follows:
// Use get_cart_contents_total to get the subtotal
    $subtotal = WC()->cart->get_cart_contents_total(); 
// Use get_cart_contents_tax to get the total tax amount
    $tax = WC()->cart->get_cart_contents_tax();    
$cart = $subtotal + $tax;
    $remaining = $amount_for_free_shipping – $cart;
Please refer to the output screenshot: https://prnt.sc/8-Zm_TIkNqpa 

6 months ago
Reply to  Saranya

Hello, I have tried to add this snippet but I got critical error on the page.

Kind regards,
Peter

6 months ago

Hello, I followed the procedure for checkout page notification and it works perfectly. I even managed to modify code so I could translate it using wpml string translation and gave it an id so I could customize it’s color via css. But I still have one issue. The amount for free shipping is’t shown correctly. I have set free shipping above 150 EUR but with this code the amount is about 20 EUR higher. For example. 150 EUR is minimum amount for free shipping. I’ve put the coat that has price of 107 EUR in the basket and went to… Read more »

6 months ago
Reply to  Peter

Hi Peter,
You’re welcome and glad to know that the code is working well for you. Since you have modified the code, the problem might be due to how the currency is formatted. Also, just to clarify, the $ symbol in the code refers to a variable that starts with the $ sign in PHP, and it doesn’t represent any currency. Could you please share the exact modified code? That way, we can help you figure out the issues.

6 months ago
Reply to  Saranya

Hello, thank you for your feedback. Sure thing, here is my code:

add_action( ‘woocommerce_before_checkout_form’, ‘ts_add_notice_free_shipping’ );
function ts_add_notice_free_shipping() {
  $free_shipping_settings = get_option(‘woocommerce_free_shipping_3_settings’);
  $amount_for_free_shipping = $free_shipping_settings[‘min_amount’];
  $cart = WC()->cart->get_subtotal();
  $remaining = $amount_for_free_shipping – $cart;
  if ( $amount_for_free_shipping > $cart ) {
    $notice = sprintf( __(“Add %s worth more products to get free shipping”,”woocommerce”), wc_price( $remaining ) );
    wc_print_notice( $notice , ‘notice’, array(‘id’ => ‘do-brezplacne-postnine’) );
  }
}

kind regards,
Peter

6 months ago
Reply to  Peter

Hello, I just received this message from your developers: To display gross prices (including tax) without shipping costs in the checkout page message, you can include these lines of code that follows: // Use get_cart_contents_total to get the subtotal     $subtotal = WC()->cart->get_cart_contents_total();  // Use get_cart_contents_tax to get the total tax amount     $tax = WC()->cart->get_cart_contents_tax();     $cart = $subtotal + $tax;     $remaining = $amount_for_free_shipping – $cart; Where exactly should I add/include this code in the upper one so there would be no erros? Or in other words, how would the whole code look like from top to bottom. Very nice thank you… Read more »

Last edited 6 months ago by Peter
6 months ago
Reply to  Peter

Hi Peter,
Please make sure you have replaced the code correctly. Here is the full script given below.
add_action( ‘woocommerce_before_checkout_form’, ‘ts_add_notice_free_shipping’ );
function ts_add_notice_free_shipping() {
  $free_shipping_settings = get_option(‘woocommerce_free_shipping_5_settings’);
  $amount_for_free_shipping = $free_shipping_settings[‘min_amount’];
  // Use get_cart_contents_total to get the subtotal
  $subtotal = WC()->cart->get_cart_contents_total();
  // Use get_cart_contents_tax to get the total tax amount
  $tax = WC()->cart->get_cart_contents_tax();
  $cart = $subtotal + $tax;
  $remaining = $amount_for_free_shipping – $cart;
  if( $amount_for_free_shipping > $cart ){
    $notice = sprintf( “Add %s worth more products to get free shipping”, wc_price($remaining));
    wc_print_notice( $notice , ‘notice’ );
  }
}

6 months ago
Reply to  Saranya

Great! Thank you!!! It works now as it should.

Big respect.

Kind regards,
Peter

6 months ago
Reply to  Peter

Hi,
I have checked the code and, I didn’t find any issues in showing the amount for free shipping. Kindly recheck whether you have used the correct Free shipping ID from the respective shipping zone. Also, make sure that the ID of that specific free shipping minimum value is set to 150.

Jan
1 year ago

Hi, I am trying to show Chinese notice in the cart, but seems sprintf() does not work with Chinese characters. someone please help me, Thanks!!

9 months ago
Reply to  Jan

Hi Jan, The sprintf() function should work fine with Chinese characters too, just like any other characters work. Please provide me with the exact error that you encounter so that I can help you better.

9 months ago
Reply to  Saranya

Please refer to the link I’ve provided, which has been tested with Chinese characters.
https://prnt.sc/s7tzQrwDuWz8

56
0
Would love your thoughts, please comment.x
()
x