How to Add Storefront Free Shipping Message

In any WooCommerce store, shipping is an important factor for customers while shopping online. Store owners often give a variety of shipping options to customers so they are more inclined to finish their purchase. This means that some store owners give a discount on the shipping costs if customers purchase a certain number of products, or allow free shipping for certain zones near the store.

Table of Contents

WooCommerce Storefront Free Shipping Message

Customers love free shipping when buying products. Free shipping is often tied to a minimum order total for free shipping. Customers are always motivated to reach the minimum order total and this will improve sales in your store. However, you need to let the customers know how much more they need to shop to avail of free shipping.

WooCommerce by default has three shipping methods, which can be added for shipping zones based on different regions. However, this has limitations but can be overcome by using some advanced shipping plugins.

WooCommerce allows you to set the minimum amount required for free shipping. It displays an option for free shipping if the minimum amount required has been achieved. However, WooCommerce does not display a message to the user as to what is the minimum amount required to get free shipping. This is a big drawback, but in this article, I will show you how you can overcome that using the Storefront theme.

How to Set the Minimum Order Amount for Free Shipping

It is very easy to set the minimum order amount for free shipping. Here are the steps that you need to follow:

Log into your WordPress site and access the Dashboard as the admin user.
From the Dashboard menu, click on WooCommerce > Settings.
Click on the Shipping tab and add your shipping zone. Enter the shipping zone name and the regions. When adding the shipping method, select Free Shipping:
Ensure that the shipping method is enabled when you save the changes:
Hover over ‘Free Shipping’ and you will see the edit option. Click on edit. Here you can choose whether you want to set the minimum amount, a minimum amount for free shipping with a coupon, etc.

For this tutorial, I have set $20 as the minimum order amount that is required to get free shipping on any WooCommerce order. However, you can add any amount you desire for your store.

How to Show the Amount Left for Free Shipping on the Cart Page

In this section, I will share with you how you can display a notice above the cart with the WooCommerce hook woocommerce_before_cart. It will be displayed only when the cart total is less than the minimum amount required for free shipping.

For this, we need to display the difference between the total amount from the cart and the minimum amount required for free shipping. Here are the steps that you need to follow:

Log into your WordPress site and access the Dashboard as the admin user.
From the Dashboard menu, click on Appearance Menu > Theme Editor Menu. When the Theme Editor page is opened, look for the theme functions file where we will add the function that will show the amount left for free shipping on the cart.
Add the following code to the php file:

/**
 * @snippet $$$ remaining to Free Shipping @ WooCommerce Cart
*/

add_action( 'woocommerce_before_cart', 'bbloomer_free_shipping_cart_notice' );

  function bbloomer_free_shipping_cart_notice() {

     $min_amount = 50; //change this to your free shipping threshold

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

     if ( $current < $min_amount ) {

      $added_text = 'Get free shipping if you order ' . wc_price( $min_amount - $current ) . ' more!';

      $return_to = wc_get_page_permalink( 'shop' );

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

      wc_print_notice( $notice, 'notice' );

   }

  }

To see the outcome, simply add a product that is less than the minimum value and you will see the message:

Conclusion

In this post, I have highlighted why you may add a free shipping method for shipping zones near your store. Additionally, I have highlighted the variety of shipping options that store owners give to customers so they are more inclined to finish their purchase. This can be effectively done when they give a discount on the shipping costs if customers purchase a certain number of products.

By default, WooCommerce allows you to set the minimum amount required for free shipping. However, it does not provide a way to show a message to the user as to what is the minimum amount required to get free shipping, which is a big drawback. That is why I have shared with you a code snippet to display the amount left to get free shipping.

Editorial Staff

How to Add WooCommerce Storefront Free Shipping Message

WooCommerce Storefront Free Shipping Message

How to Set the Minimum Order Amount for Free Shipping

How to Show the Amount Left for Free Shipping on the Cart Page

Conclusion

Similar Articles

Related