Tag: Inventory

WooCommerce: Hide Out-of-Stock Products from the Catalog

If you run a WooCommerce store, displaying out-of-stock products can frustrate customers and clutter your catalog. The quick fix is to hide these unavailable products, improving user experience and focusing attention on what’s actually purchasable.

Quick Fix: Hide Out-of-Stock Products

1. Go to your WordPress admin dashboard.
2. Navigate to WooCommerce > Settings > Products > Inventory.
3. Check the box labeled Hide out of stock items from the catalog.
4. Save changes.

This built-in option immediately removes out-of-stock products from your shop and category pages without any coding.

Why This Happens

By default, WooCommerce shows all products regardless of stock status. This is to maintain SEO value and product visibility, but it can lead to poor user experience when customers find products they cannot buy. Hiding out-of-stock items ensures your catalog only features available products, reducing confusion and potentially increasing sales.

Step-by-Step: Hide Out-of-Stock Products with Code Snippets

If you want more control or the built-in option is insufficient (for example, to hide out-of-stock products only on specific pages), you can use custom code snippets.

1. Backup your site before making code changes.
2. Add the following snippet to your child theme’s functions.php file or a site-specific plugin:

function custom_hide_out_of_stock_products( $query ) {
    if ( ! is_admin() && $query-is_main_query() && ( is_shop() || is_product_category() || is_product_tag() ) ) {
        $meta_query = $query-get( 'meta_query' );
        if ( ! $meta_query ) {
            $meta_query = [];
        }
        $meta_query[] = [
            'key'     ='_stock_status',
            'value'   ='outofstock',
            'compare' ='!=',
        ];
        $query-set( 'meta_query', $meta_query );
    }
}
add_action( 'pre_get_posts', 'custom_hide_out_of_stock_products' );

This snippet modifies the main WooCommerce product queries on shop, category, and tag pages to exclude products marked as outofstock.

Common Pitfalls

• Cache Issues: Changes may not appear immediately due to caching plugins or server cache. Clear all caches after applying settings or code.
• Theme or Plugin Conflicts: Some themes or plugins override WooCommerce queries, which can prevent hiding out-of-stock products. Test with default themes or disable conflicting plugins.
• Incorrect Hook Usage: Using the wrong hook or targeting the wrong query can cause the code not to work. Always use pre_get_posts for modifying product queries.
• Stock Management Disabled: If stock management is off, WooCommerce won’t track stock status, so hiding out-of-stock products won’t work.

Works on

• Web servers: Apache, Nginx, LiteSpeed
• Hosting panels: cPanel, Plesk, and others
• WooCommerce versions 3.0 and above
• Compatible with most themes and plugins that respect WooCommerce query filters

FAQ

Q: Will hiding out-of-stock products affect SEO?

A: Hiding out-of-stock products removes them from catalog pages but does not delete them. They remain accessible via direct URLs unless you also change product visibility. This approach minimizes SEO impact but consider using 301 redirects if you remove products entirely.

Q: Can I hide out-of-stock products only on the shop page but show them in search results?

A: Yes. Modify the conditional in the code snippet to target only is_shop() and exclude other queries like search.

Q: What if I want to show a message instead of hiding out-of-stock products?

A: You can customize your theme’s product templates to display an “Out of stock” notice instead of hiding the product. This requires editing template files or using hooks.

Q: Does this method work with variable products?

A: Yes. WooCommerce treats variable products as in-stock if any variation is available. Out-of-stock variable products will be hidden if all variations are out of stock.

Q: How do I re-enable showing out-of-stock products?

A: Simply uncheck the “Hide out of stock items from the catalog” option in WooCommerce settings or remove the custom code snippet if used.

…