WooCommerce：如何实现前端用户自主隐藏/显示缺货商品？

Absolutely! You can absolutely add a frontend toggle (like a checkbox in your sidebar) to let users manually show or hide out-of-stock products in WooCommerce. Below are two solid approaches—one code-based for developers, and one plugin-based for those who prefer no-code solutions.

Code-Based Solution (Custom Toggle) #

If you're comfortable with adding custom code, here's how to build this feature step by step:

1. Add the Checkbox to Your Sidebar #

First, we'll inject a checkbox into the shop/category pages' sidebar area. Add this code to your child theme's functions.php file or a custom code plugin:

// Add out-of-stock toggle checkbox to WooCommerce shop pages
add_action('woocommerce_before_main_content', 'display_oos_toggle_checkbox');
function display_oos_toggle_checkbox() {
    // Only show on shop, category, or tag pages
    if (is_shop() || is_product_category() || is_product_tag()) {
        ?>
        <div class="oos-toggle-widget">
            <label for="hide-oos-products">
                <input type="checkbox" id="hide-oos-products" <?php echo isset($_GET['hide_oos']) ? 'checked' : ''; ?>>
                <?php _e('Hide Out of Stock Products', 'your-theme-text-domain'); ?>
            </label>
        </div>
        <?php
    }
}

2. Add JavaScript to Handle Toggle Actions #

Next, add this JS to handle the checkbox click and update the URL with the filter parameter:

// Handle out-of-stock toggle submission
jQuery(document).ready(function($) {
    $('#hide-oos-products').on('change', function() {
        const currentUrl = new URL(window.location.href);
        if ($(this).is(':checked')) {
            currentUrl.searchParams.set('hide_oos', '1');
        } else {
            currentUrl.searchParams.delete('hide_oos');
        }
        window.location.href = currentUrl.toString();
    });
});

3. Modify the Product Query to Filter Out-of-Stock Items #

Finally, add this code to modify the WooCommerce product query when the toggle is checked:

// Filter out-of-stock products when toggle is active
add_action('woocommerce_product_query', 'filter_oos_products_based_on_toggle');
function filter_oos_products_based_on_toggle($query) {
    // Only apply to frontend main queries
    if (isset($_GET['hide_oos']) && $_GET['hide_oos'] === '1' && !is_admin() && $query->is_main_query()) {
        $meta_query = $query->get('meta_query', array());
        $meta_query[] = array(
            'key'     => '_stock_status',
            'value'   => 'instock',
            'compare' => '=',
        );
        $query->set('meta_query', $meta_query);
    }
}

4. Add Custom Styling (Optional) #

Spruce up the toggle with some CSS to match your site's design:

.oos-toggle-widget {
    margin: 1.5rem 0;
    padding: 1rem;
    background-color: #f8f9fa;
    border-radius: 6px;
}

.oos-toggle-widget label {
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

No-Code Solution (Plugins) #

If you don't want to mess with code, several WooCommerce filter plugins let you add this toggle with just a few clicks:

• YITH WooCommerce Ajax Product Filter: This popular plugin includes a stock status filter that you can add to your sidebar via widgets. Users can toggle between showing in-stock only or all products.
• WooCommerce Product Filter: Another robust option that lets you enable stock-based filtering. You can customize the filter's appearance (checkbox, dropdown, etc.) and place it in your sidebar.

Important Notes #

• If you use a caching plugin (like WP Rocket or W3 Total Cache), make sure to exclude the hide_oos query parameter from caching. Otherwise, the filter might not update correctly for users.
• Always add custom code to a child theme or custom code plugin—never edit your parent theme's files directly, as changes will be lost when the theme updates.

内容的提问来源于stack exchange，提问作者G.determinism