[Woocommerce] Display “Left to free shipping” notice on the shopping cart

Free shipping is a great way to encourage customers to spend more. You can offer customers free shipping on orders over $100.

You know that there is free shipping in Woocommerce. It is a good way to encourage customers to spend more in your internet store.

When I was making one internet store the owner asked me to add a special notice in the cart page to notify customer how much left to free shipping.

For example, customer has added to cart products and total sum is $80. Free shipping starts from $100. When customer goes to cart page see the notice “You Only Need $$$ to Get Free Shipping!”

If there are enough sum for free shipping customer see notice “Free shipping”

Best to place this notice is before cart table.

There are two options to add such a notice.

1. Default Woocommerce notice

Add this code to functions.php file of you child theme, or use special plugin for custom code.

Here we use WordPress wc_print_notice function for displaying notices. Notice will look like on the screenshot below.

add_action( 'woocommerce_before_cart_table', 'wc_add_notice_amound_left_for_free_shipping' ); // * You can choose another hook to display notice

function wc_add_notice_amound_left_for_free_shipping() {

  /* option "woocommerce_free_shipping_settings" can be with number between "shipping" and "settings",
     like this "woocommerce_free_shipping_3_setting". Check it in your database in wp_options table */
  $free_shipping_settings = get_option('woocommerce_free_shipping_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( "You Only Need %s to Get Free Shipping!", wc_price($remaining));
       wc_print_notice( $notice , 'notice' );
  }      
}

2. Custom code

I like second way more, because I can style it.

/* "woocommerce_before_cart_table" is a hook to display notice before cart table.
You can choose another hook to place a notice somewhere else. */

add_action( 'woocommerce_before_cart_table', 'wc_add_notice_amound_left_for_free_shipping' ); 

function wc_add_notice_amound_left_for_free_shipping() {

  /* option "woocommerce_free_shipping_settings" can be with number between "shipping" and "settings",
  like this "woocommerce_free_shipping_3_setting". Check it in your database in wp_options table */

  $free_shipping_settings = get_option( 'woocommerce_free_shipping_settings' ); // **
  $min_amount = $free_shipping_settings['min_amount'];

  $cart = WC()->cart->subtotal;
	
  $remaining = $min_amount - $cart;
  $html_start = '<p class="free-shipping-remain">';
  $html_end = '</p>';
  
  if( $min_amount > $cart ){	
	$notice = sprintf( "%s You Only Need %s to Get Free Shipping! %s ", $html_start, wc_price($remaining), $html_end);		
	echo $notice ;
   } else {
     echo '<p class="free-shipping-remain">Free shipping!</p>';
   }     
}

Here is css for second variant. Put this css either in style.css of your child theme, or got to Appearance -> Customize -> Additional css.

.amound-left-for-free-shipping {    
    font-size: 14px;
    padding: 10px 20px 10px 20px;
    background: #454545;
    display: inline-block;
    color: #ffffff;
    text-align: right;
    float: right;
    font-weight: 600;
    border-radius: 50px;}

.amound-left-for-free-shipping .woocommerce-Price-amount.amount {
	color: #ffffff;
}

If you have any question, feel free to ask in a comments blow.