How to Hide Out of Stock Products In WooCommerce

Do you want to improve the user experience by hiding out of stock products in your WooCommerce store? Then read on, as this post will provide you with a solution to hide out of stock products programmatically.

Table of Contents

By default, WooCommerce displays a Read more button instead of the classic Buy or Add to Cart button when a product is out of stock. In addition, the option to purchase these products will be disabled on the product page.

This is a very convenient feature for some users. For example, if you sell products for limited periods or change your inventory frequently, this is a great option.

It is important to note that WooCommerce comes with a built-in feature to hide out of stock products from the WooCommerce settings. However, if you want more flexibility or would like to hide your out-of-stock products on specific pages, you need to use filter hooks. This is why we decided to create this tutorial to help you out.

Hide Out of Stock Products in WooCommerce

In today’s brief tutorial, we will share custom code snippets you can add directly to your site to hide out-of-stock products. We have tried to explain each step in detail to help you implement this solution.

Before you proceed, we recommend you backup your site. Additionally, you should create or install a child theme to ensure that you do not lose the changes the next time you update your theme.

Let us get right into it.

Steps to Hide Out of Stock Products in WooCommerce

Here are the steps you should follow:

Log into your WordPress site and access the Dashboard as the admin user.
From the Dashboard menu, click on Appearance Menu > Theme Editor Menu. When the Theme Editor page is opened, look for the theme functions file to add the function to hide out of stock products on the shop archive page.
Add the following code to the php file:

[php] add_filter( ‘woocommerce_product_query_meta_query’, ‘njengah_only_instock_products’, 10, 2 );
function njengah_only_instock_products( $meta_query, $query ) {
// Only on shop archive pages
if( is_admin() || is_search() || ! is_shop() ) return $meta_query;
$meta_query[] = array(
‘key’ => ‘_stock_status’,
‘value’ => ‘outofstock’,
‘compare’ => ‘!=’
);
return $meta_query;
}

[php] <ol start="4">
<li>If you want to hide out of stock products on the home page, add the following code to the php file:</li>
</ol>
[php] add_filter( ‘woocommerce_product_query_meta_query’, ‘njengah_product_query_meta_query’, 10, 2 );
function njengah_product_query_meta_query( $meta_query, $query ) {
// On woocommerce home page only
if( is_front_page() ){
// Exclude products "out of stock"
$meta_query[] = array(
‘key’ => ‘_stock_status’,
‘value’ => ‘outofstock’,
‘compare’ => ‘!=’,
);
}
return $meta_query;
}
[/php]

If you want to hide out of stock products on the search pages, add the following code to the php file:

[php] add_action( ‘pre_get_posts’, njengah_out_of_stock_in_search’ );
function njengah_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’ );
}
}
[/php]

If you want to hide out of stock products in related products sections, add the following code to the php file:

[php] function njengah_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’, ‘njengah_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’, ‘njengah_out_of_stock_option’ );
} );
[/php]

Wrapping Up

In summary, we have shared code snippets to hide unavailable items in your WooCommerce store. This is a great solution for those who sell physical products.

If you want an easy solution and you want to hide unavailable products from all the pages, doing it from the WooCommerce settings is an excellent choice. However, it does not provide the flexibility you may need.

It is also important to note that adding lines of code to your theme files can break your site. Therefore, you need to do a full backup of your site and use a child theme.

Editorial Staff

How to Hide Out of Stock Products in WooCommerce

Hide Out of Stock Products in WooCommerce

Steps to Hide Out of Stock Products in WooCommerce

Wrapping Up

Similar Articles

Related