How to Hide Out of Stock Products

In this tutorial I will show you not only how to hide out of stock items all over the website but also only in specific sections, like Related products.

By default, when a product is out of stock it is still going to be displayed on your shop pages, but instead of “Add to cart” button there is going to be “Read more” button, like this:

Out of stock items are displayed by default

But if you are reading this, I suppose you do not want them to be displayed, right? 🤔

Hide Out of Stock Items Everywhere

First things first – WooCommerce has a special options which allows to hide these out of stock products everywhere on the website. Just go to WooCommerce > Settings > Products Tab > Inventory.

Hide out of stock items from the WooCommerce catalog

All the products still will be available by the direct URL which is great, because somebody could add a product to his browser favourites. But will be hidden on:

Hide Out of Stock Products from Specific Locations, for example from Related Products section only

Products has a meta key _stock_status which can be instock or outofstock.

I’ve seen an example on the internet, where a guy suggested to pass meta_query parameter to the woocommerce_output_related_products_args filter hook. I want to clarify one moment – this hook is not about passing args into WP_Query. The filter hook supports only posts_per_page, columns, orderby and order parameters. That’s all!

So if you really need to hide your out of stock items from some specific places on the website and it is not ok for you to use the first method, I recommend to check pre_option_{option name} filter hook.

The code for your functions.php:

function misha_hide_out_of_stock_option( $option ){
	return 'yes';
}
 
add_action( 'woocommerce_before_template_part', function( $template_name ) {
 
	if( $template_name !== "single-product/related.php" ) {
		return;
	}
 
	add_filter( 'pre_option_woocommerce_hide_out_of_stock_items', 'misha_hide_out_of_stock_option' );
 
} );
 
add_action( 'woocommerce_after_template_part', function( $template_name ) {
 
	if( $template_name !== "single-product/related.php" ) {
		return;
	}
 
	remove_filter( 'pre_option_woocommerce_hide_out_of_stock_items', 'misha_hide_out_of_stock_option' );
 
} );

In case you would like to hide out of stock products from archive pages (search page, shop page, product category pages), you’d better use pre_get_posts action hook, example:

add_action( 'pre_get_posts', 'misha_hide_out_of_stock_in_search' );
 
function misha_hide_out_of_stock_in_search( $query ){
 
	if( $query->is_search() && $query->is_main_query() ) {
		$query->set( 'meta_key', '_stock_status' );
		$query->set( 'meta_value', 'instock' );
	}
 
}

As I already mentioned above and now you see it in the code, it is all about adding meta key parameter _stock_status to the query.

Read also

Misha Rudrastyh

Misha Rudrastyh

I love WordPress, WooCommerce and Gutenberg so much. 10 yrs of experience.

Need some custom developer help? Let me know

Follow Misha

Need some help with WooCommerce?

If you need some professional developer help, I will be happy to assist you.

Contact me Who I am?

Leave a comment

php js HTML CSS Code

I will only use your personal information to contact you. Privacy Policy