How to Hide Out of Stock Products in WooCommerce Pages

Looking for great ways to customize your WooCommerce product pages and improve user experience? Then you’ve come to the right place. In this guide, you will learn different methods to hide out-of-stock products in WooCommerce.

Why hide out-of-stock products in WooCommerce?

If you’re running an online business that sells physical products, some of your items will be sold out from time to time. In these cases, you can:

Each of these options has pros and cons. In this guide, we’ll focus on how to hide the products that aren’t available. By default, in WooCommerce, if a product runs out of stock, your Shop page will display a Read more button instead of the classic Buy or Add to Cart button. Additionally, the option to purchase the out-of-stock product will be disabled on the product page.

This can be inconvenient for some users, especially if you sell products in limited periods of time or change your inventory frequently. So if you want to only display products currently available and ready to be shipped, temporarily hiding the unavailable items can be a good idea. Let’s have a look at how you can do that in WooCommerce.

How to hide out of stock products in WooCommerce

There are two main ways to hide out of stock products in WooCommerce:

  1. From the WooCommerce settings
  2. Programmatically

Let’s have a closer look at both methods.

1) Hide out of stock products from the WooCommerce Settings

The simplest way to hide your unavailable products is through the WooCommerce Settings. In your WordPress dashboard, go to WooCommerce > Settings > Products > Inventory. There you will see an option called Out of Stock Visibility. Simply enable it and click Save Changes

hide out of stock products - woocommerce settings

Now, all your out of stock products will be automatically hidden on the following pages:

  • Shop page
  • Search Results
  • Product Category
  • Product Tag pages
  • Related products section
  • Upsells and Cross-sell sections

If you want a simple solution and you want to hide the unavailable products on all those pages, this is an excellent alternative. However, if you want more flexibility and would like to have the option to hide your out-of-stock products on specific pages, you will need to use a bit of code.

2) Hide Out of Stock WooCommerce Products Programmatically

To hide out-of-stock products in WooCommerce programmatically, you will need to use filter hooks. If you’re not familiar with hooks, we recommend you have a look at this guide to learn more about them and how to make the most of them.

In this tutorial, we’ll show you some scripts that you can add directly to your site to hide out-of-stock products.

Before you start

As we’ll edit some core files, we recommend you backup your site. Additionally, create a child theme or use one of these plugins to make sure that you don’t lose the changes the next time you update your theme.

The scripts we’ll show you today should go in the functions.php file. To open this file, in your WordPress Admin Dashboard go to Appearance > Theme Editor. Then, click on the functions.php file on the right sidebar to open the Theme Functions file.

hide out of stock products woocommerce - theme editor functions

You can simply paste the scripts we’ve listed below into this section.

Now, let’s see some examples to hide out-of-stock products in WooCommerce.

2.1) How to Hide Out of Stock Products on the shop archive page

You can use the following function with the woocommerce_product_query_meta_query filter hook to hide out-of-stock products in your Shop archive pages. Simply add the following script to the functions.php file of your child theme and update the file.

add_filter( 'woocommerce_product_query_meta_query', 'shop_only_instock_products', 10, 2 );
function shop_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;
}
hide out of stock products - from shop archive

2.2) How to Hide Out of Stock Products on the Home page

If you want to hide your out-of-stock products only from your homepage, you can use the following function using the same woocommerce_product_query_meta_query filter hook.

add_filter( 'woocommerce_product_query_meta_query', 'filter_product_query_meta_query', 10, 2 );
function filter_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;
}


2.3) How to Hide Out of Stock Products in your Search Pages

To hide unavailable products from all your search pages, you can use the following function that uses the pre_get_posts action hook. Simply paste it in the functions.php of your child theme and press the Update file button. This way, if your customers search for any of your out-of-stock products, they won’t be able to find them.

add_action( 'pre_get_posts', hide_out_of_stock_in_search' );
function 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' );
}
}
hide out of stock products - from search pages

2.4) How to Hide Out of Stock Products in Related Products sections

If you want to make sure that none of your related product sections shows your out-of-stock products, you can use this script. This way, your customers will only receive recommendations of products that they can buy straight away.

function 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', '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', 'hide_out_of_stock_option' );
} );

How to remove the Out of Stock text on a specific product

Another interesting alternative is to hide the out-of-stock text only from specific products using a bit of CSS. This way, you can display certain products in your store but disable the option to buy them. This can be useful if you’re about to launch a new product and want to create a bit of hype or when you add an option for users to get notified when the item is available again.

hide out of stock products - out of stock text

To remove the out-of-stock text on a specific product, you need to check the product id of the item you want to hide. For this, in your WordPress admin dashboard go to Products and hover over the product, and copy the product ID underneath the specific WooCommerce product. For example, in our case, the product ID is 37.

hide out of stock products - product ID

Then, go to Appearance > Customize > Additional CSS.

theme settings

After that, paste the following CSS code and press Publish. Remember to replace the xx with your post ID number.

.postid-xx .out-of-stock { display: none !important; }

In our case, to hide the out-of-stock text on our specific product with product ID 37, we will use this code:

.postid-37 .out-of-stock { display: none !important; }
out of stock css

Additionally, you can also hide the out-of-stock text from all your WooCommerce products using this CSS code.

.woocommerce-page .out-of-stock { display: none !important; }

Remember to save the changes to finalize the customization and that’s it!

Final Recommendations

Adding lines of code to your theme files the wrong way can break your site so before you start customizing, remember the following:

  • Generate a full backup of your site
  • Always use a child theme for any code or script modifications. Check out our guide if you don’t know how to create one
  • Test your changes individually to be able to identify which one causes issues
  • If you’re using multiple codes, make sure they work smoothly in all possible scenarios when you combine them

Conclusion

In summary, if you only want to display products that shoppers can buy in your store, hiding unavailable items can be a good idea for those who sell physical products. 

In this guide, we’ve shown you how to hide out-of-stock products in WooCommerce in two different ways:

  1. From the WooCommerce settings
  2. Programmatically

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. It’s easy and quick and anyone can do it. If you want to have more flexibility and hide products only on certain pages, then you need to use a bit of code. There’s a lot more you can do so we encourage you to take these scripts as a base and customize them to make the most of your store.

Finally, we’ve seen how to remove the out-of-stock text from specific products using a bit of CSS

Please let us know if you have any questions, we’ll be happy to help you out.

Do you know any other ways to hide out-of-stock prices? Let us know in the comments section below!