3 Popular Ways to Hide WooCommerce Out of Stock Products

WooCommerce is undoubtedly the most popular plugin among merchants who run online stores with WordPress, allowing anyone can easily set up and run a virtual store.

However, one issue that every WooCommerce store owner faces is the unavailability of goods. Some choose to display an “out of stock” status when a product is no longer in stock, whilst others choose to hide the product completely from their website.

If you intend to do the latter, here’s 3 popular ways to hide out of stock products in WooCommerce stores.

Reasons for hiding out-of-stock products in WooCommerce

Every online store owner knows that the shopping experience has a direct impact on their revenue. Let’s analyze why hiding WooCommerce goods that are temporarily out of stock is important:

• Protect your customers from disappointment – Your potential customers will be frustrated if they select a product and realize it’s sold out, which means there’s a good chance they won’t come back. A current customer’s loyalty can decline over time because they can’t get the product that was supposed to be on your website.
• Provide the best service for your customers – Always allowing your customers the opportunity to buy in-stock products will improve the chances of sales and positive customer interaction.
• Reduce the risk of refunds or order cancelations – If your customers receive an email informing them that the products they have already paid for are no longer in stock, they could request a refund or cancel instead of looking for alternatives in your store.

Hiding out-of-stock products in WooCommerce

1. WooCommerce settings

The easiest way to hide unavailable products in WooCommerce is to use the built-in settings.

First, log in to WordPress, scroll down, find WooCommerce in the WordPress dashboard and click on Settings.

Select Products > Inventory.

Now scroll down to find the visibility of out of stock items at the bottom of the page. Select the Hide out of stock items from catalog checkbox and click the Save changes button.

Then, go back to your WooCommerce store and refresh the store page. All out-of-stock items will now disappear from your store.

2. Plugins

Installing a plugin is also an effective way to hide out-of-stock products. In addition to simply hiding out-of-stock products, plugins can also offer other functions that attract customers back later when the product is in stock.

WooCommerce Better Variations stands out as one of the most prominent candidates.

First, install and activate the plugin. Then, in the admin menu, go to WooCommerce > Settings and click on Better Variations. Now activate the checkbox Disable option for out of stock variations to hide the unavailable products.

Activate Show unavailable text next to out of stock variations. This will display a short text informing your customers that these products are not in stock at this time.

This way, customers cannot add out-of-stock items to their shopping cart.

You can still let your customers know when the product will be back in stock by ticking the Show date of re-availability box. This will prevent you from losing potential customers.

Once done, don’t forget to click on the Save changes box to save your updates.

3. Edit Code Manually

You also have the choice to edit the code of your website manually. However, you need some technical knowledge to use filter hooks – this knowledge is necessary to avoid unwanted losses.

Open the functions.php file by clicking on Theme Editor in the WordPress dashboard under Appearance. Then, click on the functions.php file in the Theme files drop-down menu at the bottom left of the screen.

Store archive pages

With the help of woocommerce_product_query_meta_query, products that are not in stock become invisible on the store archive pages. Simply insert the code below into functions.php.

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;
}

Home page

To make the unavailable items on the Home page invisible, the following code can help.

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;
}

Search pages

If it is important to you to hide unavailable items on the search pages, the pre_get_posts hook is the solution. By inserting the following code into functions.php, customers can only find products that are in stock.

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

Related products Sections

With the following script, you can prevent out-of-stock items from being displayed in relevant product categories. In other words, customers will only be suggested products that they can buy immediately.

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

Specific pages

You may need to display out-of-stock items on specific pages. To do this, go to WooCommerce > Settings, select Products and then Inventory on the newly transferred website.

Then, click on the Hide out of stock items from catalog section. Don’t forget to save your changes.

Go back to functions.php and paste the code below. Remember to select the page where you do not want to hide the out of stock items. In this example we show these articles on ID page 11.

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( 11 ) ) {
       $hide = 'no';
   }
   return $hide;
}

Conclusion

Hopefully we’ve covered how to hide WooCommerce out-of-stock products, and why you should do it in certain circumstances.

In truth, coding knowledge is not a necessity to hide out-of-stock products in WooCommerce. Simply go to the WooCommerce settings and follow the instructions above. What’s more, you can hide unavailable items in no time at all without changing the code!

If you want to inform your customers about the date when the product will be available again, the WooCommerce Better Variations plugin works well for this. It also is possible to hide out-of-stock products on your website by changing the code if you have more technical knowledge too.

Besides hiding your out-of-stock products, you can hide WooCommerce categories, hide product price range, hide add-to-cart buttons, or make the entire site private, so check out our useful guides if you need more information on this.