DEV Community

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

Posted on • Edited on

2

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

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (0)

The discussion has been locked. New comments can't be added.
👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay