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.
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.
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.
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 displayes 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 of these two in the 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.
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.
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.
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.
The notice will now show up above the checkout form.
Show only Free shipping & hide other shipping methods
We want to display only the free shipping option and hide other shipping options. WooCommerce provides a filter for that called – woocommerce_package_rates. It accepts one parameter – $rates, which is the array of rates found for the package. The $rates array contains the shipping methods & their shipping rates defined in our settings.
In the above example, we check for the available shipping methods & rates. This function will hide other shipping rates if ‘Free Shipping’ is available. It will only show ‘Free Shipping’ option. If free shipping is not available then we display the other options e.g. Flat Amount, Local Pickup, etc.
This method is really useful to inform users that they can get free shipping if they purchase a few more items. This can also help increase sales of your products.
A much better way to do this is by adding a sticky notice bar at the top of the website on all pages to inform the customers about the shipping threshold. We are going to work on that too and will update here on how to achieve that.
where is the code. just a dictation without example?
that just a theory which every one knows
Hi saad,
The github gists in the blog were not being displayed due to some issues. I have added code in the blog to explain the scenarios. Please do check them.
There is git code along with output, what else you need?
hello there, it doesn’t seem supporting ajax. so what would happen when cart is updated dynamically?
If i put this on the cart page, i dont only the code:
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’ );
}
}
?>
Someone help me pls (=
Do I have to copy the code in functions.php?
It’s not working there for me – thanks!
Hi Markus,
Yes, you will have to add this code in your active theme’s functions.php file. Can you show me the exact code you have added in the file?
I copy/paste the Show Amount Left for Free Shipping on Checkout Page code, and it broken my website. I added on fuctions.php files and removed php tag, but it doesn’t work. Any idea ??
Hi Joe,
If you have added the code in the functions.php file then you will need to remove the array part from the add_action. Add this in your functions.php file:
add_action( ‘woocommerce_before_checkout_form’, ‘wc_add_notice_free_shipping’ );
The array is used when we add the action in a class consructor. I will make it clear in the blog.
I’ve tried both ways with or without array and not working either way. I used code snippet. Any other ideas? Your coding for removing all other shipping methods worked though.
Hi Rachel,
Can you tell me which code snippet you tried and what happened when you added it?
Hi thanks for this! I’ve gotten it working on the cart page but not the checkout page. I put the cart code in a Code Snippet. When I put the checkout page code in a snippet it said I couldn’t redeclare the function. I tried it with just the line you mentioned above but that didn’t do anything:
add_action( ‘woocommerce_before_checkout_form’, ‘wc_add_notice_free_shipping’ );
Thanks for your help.
change the function name it is the same for that on cart thatis why you get that message. either way it didn’t work for me