fbpx
hide out of stock products - featured image

How to Hide Out of Stock Products in WooCommerce

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 for 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:

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 into 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' );
} );

If you want to learn how to easily remove the related product section, check out this guide.

2.5) How to Hide Out of Stock Products except on specific pages

Alternatively, you may want to hide out-of-stock products but display them on a certain page. To do this, first, you have to activate this option from your dashboard. Go to WooCommerce > Settings > Products > Inventory and check the Hide out of stock items from the catalog option.

Hide out-of-stock products WooCommerce

Now let’s say that you don’t want to hide products on the page with ID 10. This means that out-of-stock products won’t be displayed except on the page with ID = 10. To do this, simply add the following code at the end of your functions.php file.

add_filter( 'pre_option_woocommerce_hide_out_of_stock_items', 'ql_hide_out_of_stock_exception' ); 
function ql_hide_out_of_stock_exception( $hide ) { 
   if ( is_page( 10 ) ) { 
     $hide = 'no'; 
   } 
   return $hide; 
}

As you can see in the code, with the if conditional we tell WooCommerce not to hide the page with ID = 10. You can do the same with as many pages as you want to add more exceptions and display out-of-stock products on other pages. Similarly, you can apply exceptions to the category pages by tweaking the code.

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!

Bonus: Don’t show product stock

Instead of removing the out-of-stock products, you can also decide whether to show the stock of your products or not. If you go to WooCommerce > Settings > Products > Inventory and navigate to Stock display format, you’ll see three options:

  1. Always show quantity remaining in stock
  2. Only show quantity remaining in stock when low
  3. Never show quantity remaining in stock

By selecting the third option, you won’t show the product stock on the product page. However, this doesn’t apply to variable products. On variable product pages, users will see the “In stock” or “Out of stock” labels for the variation they choose.

Hide out of stock products WooCommerce - Stock information

The good news is that you can hide the product stock label with a bit of code.

To remove the stock information for variable products, simply add the following code to your functions.php file.

NOTE: Once again, as you’ll edit core files, remember to backup your site and create a child theme before adding the code snippet.

// Remove the stock info from product page for variable products
function quadlayers_remove_stock_data_variable_products( $data ) {
    unset( $data['availability_html'] );
    return $data;
}
add_filter( 'woocommerce_available_variation', 'quadlayers_remove_stock_data_variable_products', 99 );

That’s it! That way you can remove the stock information from the product page for your variable products. For more information, check out this page.

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!

Hello!

Click one of our representatives below to chat on Telegram or send us an email to [email protected]

How can I help you?