How to display a $0.00 amount for free shipping methods in WooCommerce? 

Sometimes, giving subtle visual cues to your audience can make a difference during the online purchasing process. One such cue is to display the price of an element on the page, even if the price is 0.

In this post, we will delve into how to display a “$0.00” text for the free shipping methods on WooCommerce’s 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 the Code Snippets plugin. You can then add the code as a new snippet via the plugin.

Solution: Displaying the $0.00 amount for Free Shipping methods

Below is the code snippet that will display the $0.00 amount for the free shipping methods in WooCommerce.

add_filter( 'woocommerce_cart_shipping_method_full_label', 'ts_add_0_to_shipping_label', 10, 2 );
 
function ts_add_0_to_shipping_label( $label, $method ) {
   if ( ! ( $method->cost > 0 ) ) {
      $label .= ': ' . wc_price( 0 );
   }
   return $label;
}
 
add_filter( 'woocommerce_order_shipping_to_display', 'ts_add_0_to_shipping_label_ordered', 10, 3 );
 
function ts_add_0_to_shipping_label_ordered( $shipping, $order, $tax_display ) {
   if ( ! ( 0 < abs( (float) $order->get_shipping_total() ) ) && $order->get_shipping_method() ) {
      $shipping .= ': ' . wc_price( 0 );
   }
   return $shipping;
}

Output

On the WooCommerce cart & checkout page, it will show the $0.00 amount for the free shipping methods as shown below.

Code Explanation:

Let’s break down the code step by step:

1. add_filter( ‘woocommerce_cart_shipping_method_full_label’, ‘ts_add_0_to_shipping_label’, 10, 2 );

This line adds a filter to modify the full label of shipping methods displayed in the shopping cart. It hooks the function ts_add_0_to_shipping_label into the woocommerce_cart_shipping_method_full_label filter. The priority is set to 10, which means this filter will be applied towards the end of the filter chain.

2. function ts_add_0_to_shipping_label( $label, $method ) { … }

This function is called by the above filter. It takes two parameters: $label (the label of the shipping method) and $method (the shipping method instance).

Inside the function:

• It checks if the cost of the shipping method ($method->cost) is not greater than zero.
• If the cost is not greater than zero, it appends ‘: ‘. wc_price( 0 ) to the shipping method label. This effectively adds a “: $0.00” portion to the label.
• The modified label is returned.

3. add_filter( ‘woocommerce_order_shipping_to_display’, ‘ts_add_0_to_shipping_label_ordered’, 10, 3 );

This line adds a filter to modify the display of shipping costs on the order details page. It hooks the function ts_add_0_to_shipping_label_ordered into the woocommerce_order_shipping_to_display filter with a priority of 10.

4. function ts_add_0_to_shipping_label_ordered( $shipping, $order, $tax_display ) { … }

This function is called by the above filter. It takes three parameters: $shipping (the shipping cost), $order (the order instance), and $tax_display (a tax display setting).

Inside the function:

• It checks if the absolute value of the shipping total of the order is not greater than zero and if the order has a shipping method.
• If both conditions are met, it appends ‘: ‘. wc_price( 0 ) to the shipping cost. This adds a “: $0.00” portion to the shipping cost.
• The modified shipping cost is returned.

Conclusion

These code snippets can be valuable for those seeking to customize their WooCommerce store’s shipping label and cost displays to better reflect cases where shipping is free or when specific conditions are met.

Please leave a comment with your thoughts on how the code was useful for you or any other feedback.