DEV Community

Cover image for How to Hide Out-of-Stock Products on Your WordPress Website
Ali Karbasi
Ali Karbasi

Posted on • Edited on

How to Hide Out-of-Stock Products on Your WordPress Website

If you use WordPress to manage an online store, you must keep your product pages clean and clutter-free. One effective strategy is to hide out-of-stock items. This improves the general shopping experience and helps avoid confusion among customers. In this article, we'll walk you through a simple method to hide out-of-stock products using a custom code snippet added to your functions.php file.

The Code

Let's start by looking at the code that will make your product pages show only available products.

/**
 * Visit AliKarbasi.dev for more codes.
**/
function custom_pre_get_posts_query( $q ) {
    if ( ! is_admin() && $q->is_main_query() ) {
        if ( is_home() || is_front_page() || is_shop() || is_product_category() ) {
            $meta_query = $q->get( 'meta_query' );
            $meta_query[] = array(
                'key'     => '_stock_status',
                'value'   => 'outofstock',
                'compare' => 'NOT IN',
            );
            $q->set( 'meta_query', $meta_query );
        }
    }
}
add_action( 'pre_get_posts', 'custom_pre_get_posts_query' );
Enter fullscreen mode Exit fullscreen mode

How It Works

This code snippet leverages the pre_get_posts action hook to modify the main query before WordPress fetches posts from the database. Here's a breakdown of how it works:

  1. Function Declaration: The function custom_pre_get_posts_query is declared to modify the query parameters.
  2. Conditional Check: The function checks if the current request is not from the WordPress admin area (! is_admin()) and if it is the main query ($q->is_main_query()).
  3. Home and Front Page Check: It further checks if the current page is the home page or the front page (is_home() or is_front_page()) or the current page is shop page (is_shop()) or product category page (is_product_category()) .
  4. Modify Meta Query: If all conditions are met, it retrieves the existing meta_query from the query object and appends a new condition to exclude posts with the meta key _stock_status set to outofstock.
  5. Set Modified Meta Query: The modified meta_query is then set back to the query object, effectively excluding out-of-stock products from the results.

How to Use the Code

To apply this code to your WordPress site, take these steps:

Access Your Theme's functions.php File:

  • Log in to your WordPress admin dashboard.
  • Navigate to Appearance > Theme Editor.
  • In the Theme Files list, locate and click on functions.php.

Add the Code:

  • Copy the provided code snippet.
  • Paste it at the end of your functions.php file, just before the closing ?> tag if it exists.

Save Changes:

  • Click the Update File button to save your changes.

Conclusion

By adding this simple code snippet in your functions.php file, you can easily hide out-of-stock items from your product and main pages. This will assist maintain your website clean and guarantee that customers only see available products.

Happy coding :D

Top comments (0)

The discussion has been locked. New comments can't be added.