How to Add Free Shipping Notifications (with amount left) to Woocommerce Product and Cart Pages

There is lots of proof about the fact that by offering free shipping to your customers you can improve your conversion rate. Therefore, it would be nice to let your customers clearly know about it. So, in this post I will show you how to add free shipping notifications to your Woocommerce single product pages and cart pages.

So, how do you add free shipping notification to WooCommerce pages? In order to accomplish that you need a Code Snippets plugin or a WordPress child theme where you can add a small bit of a code provided below.

Also, if you are using the awesome Kadence theme, you will learn how to add free shipping notification to the Kadence side cart. The best part is that the amount is dynamic and will change every time you add new product to the cart. And if the amount (50USD for example) is reached, then the message will be hidden.

How to Add Free Shipping Notifications to Woocommerce Single Product Page and Cart Pages?

First thing first. In this tutorial I assume that you already have a Code Snippets plugin installed or you know how to modify the functions.php file. Therefore, I will skip this part.

Adding the free notification to Single Product Page

In my example I am using the free Code Snippets plugin which allows me to run PHP code snippets on my site without the need to modify functions.php

Now, open up the Code Snippets plugin and click Add new. Next, give your snippet a title (for example, Single Product page shipping)

If this is done, add this code to the code box

// Woocommerce - Single product page notification
add_action( 'woocommerce_share', 'single_product_page_notice' );
 
function single_product_page_notice() {
	$min_amount = 50; //This is the amount of your free shipping threshold. Change according to your free shipping settings
	$current = WC()->cart->subtotal;
	if ( $current < $min_amount ) {
		$added_text = '<div class="woocommerce-message">Buy  ' . wc_price( $min_amount - $current ) . ' worth products more to get free shipping<br/>'; // This is the message shown on the single product page
		$return_to = wc_get_page_permalink( 'shop' );
		$notice = sprintf( '%s<a href="%s">%s</a>', $added_text, esc_url( $return_to ), 'Continue shopping</div>' ); // This is the text shown below the notification. Link redirects to the shop page
		echo $notice;
	}
}

Save the snippet and preview your single product page. Add product to your cart and you should see something like this.

How to Add Free Shipping Notifications (with amount left) to Woocommerce Product and Cart Pages

How to add a free shipping notification to the Woocommerce cart page?

If you don’t want to add the notification on the single product page and need to use it on the cart page, then all you need to do is to modify the code shown above. Instead, use this code to create a snippet.

// Woocommerce - Cart page notification
add_action( 'woocommerce_before_cart_table', 'cart_page_notice' );
 
function cart_page_notice() {
	$min_amount = 50; //This is the amount of your free shipping threshold. Change according to your free shipping settings
	$current = WC()->cart->subtotal;
	if ( $current < $min_amount ) {
		$added_text = '<div class="woocommerce-message">Buy  ' . wc_price( $min_amount - $current ) . ' worth products more to get free shipping<br/>'; // This is the message shown on the cart page
		$return_to = wc_get_page_permalink( 'shop' );
		$notice = sprintf( '%s<a href="%s">%s</a>', $added_text, esc_url( $return_to ), 'Continue shopping</div>' ); // This is the text shown below the notification. Link redirects to the shop page
		echo $notice;
	}
}

If you save and activate your snippet, add at least one product to cart then you should see something like this.

How to Add Free Shipping Notifications (with amount left) to Woocommerce Product and Cart Pages

NB! If there is more than 50USD worth of products in the cart then the notification is not shown? Why, you may ask? It is because I have set my free shipping threshold to 50USD. See the explanation in the code.

How to add a free shipping notification to the Kadence theme side cart?

I really like the Kadence theme. Both free and Pro version. If you are like me and using the Kadence theme and you would like to place this free shipping notification below the side cart content, then use this code.

// Woocommerce - Kadence theme side cart notification
add_action( 'kadence-after-side-cart', 'kadence_notice' );
 
function kadence_notice() {
	$min_amount = 50; //This is the amount of your free shipping threshold. Change according to your free shipping settings
	$current = WC()->cart->subtotal;
	if ( $current < $min_amount ) {
		$added_text = '<div class="woocommerce-message">Buy  ' . wc_price( $min_amount - $current ) . ' worth products more to get free shipping<br/>'; // This is the message shown below the Kadence theme side cart content
		$return_to = wc_get_page_permalink( 'shop' );
		$notice = sprintf( '%s<a href="%s">%s</a>', $added_text, esc_url( $return_to ), 'Continue shopping</div>' ); // This is the text shown below the notification. Link redirects to the shop page
		echo $notice;
	}
}

Save and activate and preview. If everything is OK then you should see something like this.

How to Add Free Shipping Notifications (with amount left) to Woocommerce Product and Cart Pages

PRO TIP: How to Add Free Notification to the three places with one code snippet?

Above I explained how to add this notification to the one place at a time but maybe you wish to add it in three places. If so, then use this code here below.

// Woocommerce - Single product page notification
add_action( 'woocommerce_share', 'free_shipping_notification' );
 
// Woocommerce - cart page notification
add_action( 'woocommerce_before_cart_table', 'free_shipping_notification' );
 
// Kadence - side cart notificatin
add_action( 'kadence-after-side-cart', 'free_shipping_notification' );
 
function free_shipping_notification() {
	$min_amount = 50; //This is the amount of your free shipping threshold. Change according to your free shipping settings
	$current = WC()->cart->subtotal;
	if ( $current < $min_amount ) {
		$added_text = '<div class="woocommerce-message">Buy  ' . wc_price( $min_amount - $current ) . ' worth products more to get free shipping<br/>'; // This is the free shipping notification message
		$return_to = wc_get_page_permalink( 'shop' );
		$notice = sprintf( '%s<a href="%s">%s</a>', $added_text, esc_url( $return_to ), 'Continue shopping</div>' ); // This is the text shown below the notification. Link redirects to the shop page
		echo $notice;
	}
}

How to Add Free Shipping Notifications (with amount left) to Woocommerce Product and Cart Pages

If all this seems complicated to you then take a look at the video where I show you all the steps described earlier.

Useful tips

Here are some of my favorite Wordpress tools

Thank you for reading this article. I hope you found it helpful as you build your own websites and e-commerce sites. Here are some tools I use as a Wordpress developer and enthusiast that I hope you’ll also find helpful.

These are affiliate links, so if you do decide to use any of them, I’ll earn a commission and this helps me create these tutorials and make Youtube videos. But in all honesty, these are the exact tools that I use and recommend to everyone, even my friends and family.

Themes: For the last couple of years I have two go-to themes which I use for every kind of projects. Those two themes are Blocksy theme and Kadence Theme. On this site and my Youtube channel you’ll see a lot of tutorials I have made about them. If you would like to get a 10% discount for both of them then:

Code Snippets manager: WPCodeBox allows you to add code snippets to your site. Also, it allows you to build and manage your WordPress Code Snippets library in the cloud. You can grab it with the 20% discount here (SAVE 20% Coupon: WPSH20).

Contact forms: There are hundreds of contact forms out there but Fluent Forms is the one I like the most. If you need a 20% discount then use this link (save 20% coupon is WPSH20).

Gutenberg add-ons: If I need a good Gutenberg blocks add-on then Kadence Blocks is the one I have used the most. You’ll get 10% discount with the coupon SIMPLEHACKS here.

Website migration: While building a website you probably need a good plugin that can help you with the migration, backups, restoration and staging sites. Well, WpVivid is the one I have used for the last couple of years. If you use this link along with the WPSH20 coupon you’ll get 20% discount.

Woocommerce extensions: There are a bunch of Woocommerce extensions that I really like but the one that stands really out is Advanced Dynamic Pricing. Once again, you’ll get a 20% discount if you use this link here (save 20% coupon is WPSH20)

Web Hosting: If you would like to have a really fast and easy to use managed cloud hosting, then I recommend Verpex Hosting (see my review here). Btw, this site is hosted in Verpex.)

To see all my of most up-to-date recommendations, check out this resource that I made for you!

Do you want to thank me and buy me a beer?

Every donation is entirely welcome but NEVER required. Enjoy my work for free but if you would like to thank me and buy me a beer or two then you can use this form here below.

Donation Form (#2)

Best selling plugins

Janek T.
Janek T.

I am a Wordpress enthusiast who has been making websites since 2011. In this site I am offering simple to follow tips on how to use Wordpress and Woocommerce.
If you want to be the first to be notified about the new tutorials then please subscribe to my Youtube channel here
Follow me in Twitter here

Articles: 96