How to Hide the Product Price in WooCommerce

I’ve been asked this many times:

How do I remove the price from my shop? I only want it to be seen in the product page

The reasons vary – maybe it’s a site that doesn’t sell but only lists products, maybe it’s an art gallery that doesn’t like to display prices on the main shop page, or maybe it’s a sales tactic.

What do we need to consider?

I think there’s a few things to consider beyond just removing the price. Let’s take a look at a standard Shop page:

Looking at this example, if we removed the price, does it still make sense to have an “Add to Cart” button? Why would you add it to your cart if you didn’t know the price?

Maybe a “Click to view price” link would be better. Or some kind of call to action to view more information.

Here’s our list for what we need to do, it’s pretty short!

1. Remove the Price for the Shop or any other “Shop loop” pages
2. Change “Add to Cart” to something else that will send you to the product page itself.

If you’re not sure what “Shop loop” means, the Shop Loop is basically how WooCommerce uses templates to display products in a loop. You can see how the loop works here in the source code.

Please note: The following code should be added to your themes functions.php file OR to a functionality plugin.

Me

Lets remove the price

WooCommerce: 4.5.2
Source: https://github.com/woocommerce/woocommerce/blob/4.5.2/includes/wc-template-functions.php#L1318-L1326

This is pretty straight forward:

<?php  // only include this if it's not already in the file!

remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_price', 10 );

What’s happening here?
WooCommerce has a template file called content-product.php (source) that displays each product in the loop. In that template, there are some action hooks, where other things can “hook” into. In this case, the price is being hooked into the woocommerce_after_shop_loop_item_title action. When the template calls that action, it retrieves all things hooked into there, like the price!

What we’re doing is removing the woocommerce_template_loop_price function FROM the woocommerce_after_shop_loop_item_title action hook. When we do that, the price is removed!

Lets see what it looks like now:

Let’s change the “Add to Cart” action

WooCommerce: 4.5.2
Source: https://github.com/woocommerce/woocommerce/blob/4.5.2/includes/wc-template-functions.php#L1265-L1306

Very similar to the above change, we first need to remove the “Add to Cart” code that runs on the hook for the shop loop!

<?php  // only include this if it's not already in the file!

remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );

Next, we want to now add some text with a link to the product:

<?php  // only include this if it's not already in the file!

add_action( 'woocommerce_after_shop_loop_item', 'discocow_woocommerce_template_loop_custom_link' );
function discocow_woocommerce_template_loop_custom_link() {
	global $product;
	if ( $product ) { 
		$permalink = $product->get_permalink();
		echo '<a href="' . esc_url( $permalink ) . '" class="button addtocartbutton">Learn more</a>';
	}
}	

What does this do? First, we’re hooking into the same action that the Add to Cart was hooked into: woocommerce_after_shop_loop_item. When we hook into that, we need to echo out (which means we’re spitting out into the browser) our new link. To do that, we need to get the global $product that’s currently being called, grab it’s link, and then safely wrap it around an anchor tag.

Here’s the final result:

Final thoughts

WooCommerce has some pretty powerful template hooks. If you want to explore how you could customize your site, here are some good resources:

The current WooCommerce Template files source

The official documentation on how to override templates (that I helped write)

The WooCommerce Wiki on Template Guidelines for Developers and Theme Authors

If you have questions on this topic or want me to cover anything else, please let me know in the comments!