How to Hide the WooCommerce Product Price When Price Zero?

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.

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.

Product with price

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?

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.

Product with hidden price

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.

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.

Product with FREE text label

That’s it!!!

You May Also Like

About the Author: Aman Mehra

Hey! I'm Aman Mehra and I'm a full-stack developer and have 5+ years of experience. I love coding and help to people with this blog.

Leave a Reply

Your email address will not be published. Required fields are marked *