How to Hide the WooCommerce Product Price When Price Zero?

By default woocommerce display the price of products on the shop archive page or single product page but what if your product has zero price and you want to hide the price for that product.

However, if you also want to display the “FREE” text instead of the “$0.00” price then you can simply do that with the help of action hooks.

Because instead of showing the “$0.00” price and showing the “FREE” text look more elegant and also engages the customer.

See Also: How to Hide Specific Products from Shop Page and Search Page in WooCommerce?

Let’s see how we can hide the woocommerce product price when the product has zero price.

Hide Price When Price Zero

We will use the woocommerce_get_price_html filter hook to hide the product price if the price is zero and show something instead of “$0.00”.

See the following image showing the “$0.00” price in the default behavior.

Now, let’s make a function to customization in price HTML content and check if the product price is zero then don’t show the price text.

Add the following code in your theme’s functions.php file and I would recommend using the child theme so you don’t lose your changes when the theme is updated.

If you don’t have a child theme, you can check our guide on how to create a child theme in WordPress?

add_filter( "woocommerce_get_price_html", "hide_product_price_zero", 20, 2 );

function hide_product_price_zero( $price, $product ){

	if ( $product->get_price() === '' || $product->get_price() == 0 ) {

		$price = "";

	}

	return $price;

}

When you have added the above code successfully in your theme and saved it, you will see your product price is not showing if the product price has zero. You will see the product like the following image, without the price.

See Also: How to Change Price of Specific Product and Quantity in Cart?

But did you notice that the product is not looking good because one of the main elements is not shown to the customer? And customers get confused while buying products.

So it will be good if you show the “FREE” text to customers, so they get attracted to the product by seeing the “FREE” label. So let’s do it.

Display FREE Text When Price Zero

OK. So we will follow the same process to hide the woocommerce product price and display the “FREE” text instead. You just have to add the “FREE” text to the $price variable.

It is not compulsory to add the “FREE” text, it’s all up to you. You can add anything which you want to display when the product has zero price.

Add the following code to your theme’s functions.php file and save it.

add_filter( "woocommerce_get_price_html", "hide_product_price_zero", 20, 2 );

function hide_product_price_zero( $price, $product ){

    if ( $product->get_price() === '' || $product->get_price() == 0 ) {

        $price = "FREE";

    }

    return $price;

}

After saving the above code, you will see your all product showing the “FREE” text instead of the “$0.00” price. Now you can design it on the front end as you want. See the following image for reference.

That’s it!!!