Displaying Out-of-Stock Products at the End of the WooCommrece Shop Page

It has probably happened to you that some products in your store are out of stock. This unavailability may negatively affect the appearance of your site, user satisfaction, and ultimately your website’s SEO. But don’t worry! Displaying out-of-stock products at the end of the list is as easy as pie. Read this article to the end to learn how.

Managing Out-of-Stock Products in an Online Store

Some products have an expiration date, and after a while, they either disappear from the market or have no buyers. Over time, this can fill your store’s website with unavailable products, which must be properly managed. Typically, there are two main strategies for handling out-of-stock products:

Move out-of-stock products to the end of the list.
Do not display out-of-stock products.

If the variety or number of products in a store or a product category is low, removing out-of-stock products may make the category look empty. In such cases, the preferred strategy is to display out-of-stock products at the end of the list.

Removing out-of-stock products is not recommended because they may still be searched for by users, allowing you to retain organic traffic. Instead, you can suggest an alternative product on the product page. Additionally, some products may be temporarily unavailable and restocked later, making the first approach more effective.

Below, we explain how to implement the strategy of displaying out-of-stock products at the end of the category list in WooCommerce.

How to Move Out-of-Stock Products to the End of the List?

You can easily move out-of-stock products to the bottom of the list using two simple methods. Just paste the following code into the theme’s functions.php file:

/**
* Snippet Name:  Displaying Out-of-Stock Products at the End of the WooCommrece Shop Page
* Snippet Source :  headwaytips.com
*/
 
// Displaying Out-of-Stock Products at the End of the WooCommrece Shop Page
  
add_action( 'woocommerce_product_query','hide_out_of_stock' );
function hide_out_of_stock( $q ) {
$q->set( 'orderby', 'meta_value' );
$q->set( 'meta_key', '_stock_status' );
$q->set( 'order', 'ASC' );
}

Impact of Out-of-Stock Products on SEO for Online Stores

With proper management, out-of-stock products will not negatively affect your website’s SEO. One crucial step is adding an availability tag to your products, which can be easily done using product schema markup. Below is an example of the schema code for products that are in stock:

 <meta property="product:availability" content="in stock" />

For out-of-stock products, use the following tag:

<meta property="product:availability" content="out of stock" />

How to Hide Out-of-Stock Products in WooCommerce

To hide out-of-stock products in WooCommerce, simply follow these steps:

Log in to your WordPress dashboard.
From the left-hand menu, go to WooCommerce.
Navigate to the Settings section.
Click on the Inventory tab.
On this page, check the option “Hide out-of-stock products from the catalog” to enable it.

This setting will automatically hide all out-of-stock products from your store, improving the user experience and keeping your product listings relevant.

✅ Save the settings, and congratulations! Now, out-of-stock products are hidden from your store page. 😉🤞

Note: The section names in WordPress may vary slightly depending on your translation or language settings. However, there’s no need to worry! You can also access the settings directly via the following URL:

👉 /wp-admin/admin.php?page=wc-settings&tab=products&section=inventory

If you know other methods for hiding out-of-stock products in WooCommerce, feel free to share them in the comments below!

We look forward to your feedback ❤️ Stay awesome!