How to show “FREE” instead of 0 dollars in WooCommerce or price is not set?

I believe FREE looks good than $0.00

Do you need to replace the default WooCommerce pricing label for a free product? Perhaps you offer some, if not all, of your products at no cost. Instead of showing the default WooCommerce price label of $0.00, you want to show custom text, such as the word “FREE” or “Download Now”.

We really didn’t like showing a $ value of zero and so we replaced it with the text “FREE”. It turns out, that it’s really simple to do in WooCommerce.

What is required is a quick filter to override the price of the product and replace it with the text of your choice.

Change Free Product’s WooCommerce Price Label.

Just copy and paste the following snippet into your functions.php file and edit the label text as indicated in the snippet’s comment below.

Do these changes in child-theme’s function.php

If you do not have a child theme then create a backup using Updraft Plugin and then follow the below steps. or you can contact your website theme developer for a Child-theme they can provide you a child-theme.

Steps: Display free if price 0 in WooCommerce

  • Open WordPress admin panel, go to Appearance > Theme Editor
  • Open functions.php theme file.
  • Add the following code at the bottom of the functions.php file.
  • Save the changes and check your website.
/**
* @snippet       Display FREE if Price Zero or Empty - WooCommerce Single Product
* @how-to        Display FREE if the price is zero
* @author        Hassam Mughal
* @testedwith    WooCommerce 3.8
* @follow        @devhassam
*/
  
add_filter( 'woocommerce_get_price_html', 'wooc_price_free_zero_empty', 9999, 2 );
   
function wooc_price_free_zero_empty( $price, $product ) {
    if ( '' === $product->get_price() || 0 == $product->get_price() ) {
        $price = '<span class="wooc-price-amount amount amount-free">FREE</span>';
    }  
    return $price;
}

Breaking it down, we’re just checking the price of the product to make sure that it is “empty” i.e. free, and then if it is, returning different label text which in the case above is the word “FREE”.

That’s a Wrap

I hope you find this code snippet and article useful. Please, drop a comment if it’s not working for you we will reply and help you solve the issue.

Remember to add the code snippets at the bottom of your child theme’s functions.php file. If you encounter any problems, please contact a qualified WordPress developer or contact the support team of your theme creator.

when your products are on sale the below code snippet will show the regular price along with the word “Free”.

All you need to do is add the following code snippet to your theme’s function.php file and voila…

function woowp_price_free_zero_empty( $price, $product ) {
	if ( $product->get_price() == 0 ) {
		if ( $product->is_on_sale() && $product->get_regular_price() ) {
			$regular_price = wc_get_price_to_display( $product, array( 'qty' => 1, 'price' => $product->get_regular_price() ) );

			$price = wc_format_price_range( $regular_price, __( 'Free!', 'woocommerce' ) );
		} else {
			$price = '<span class="amount">' . __( 'Free!', 'woocommerce' ) . '</span>';
		}
	}

	return $price;
}

add_filter( 'woocommerce_get_price_html', 'woowp_price_free_zero_empty', 10, 2 );

If you don’t want that kind of behavior then use the first code snippet, it will only show the word Free and not the regular price but don’t use both of them together.

2 thoughts on “Woocommerce display FREE instead of 0 in Woocommerce”

    • you will need to use CSS to change the color. I added custom classes like [wooc-price-amount, amount, amount-free] you can use any class and apply CSS.

      
          .amount-free {
              background-color: #2271b1;
              color: #fff;
          }
      
      
      Reply

Leave a Comment