WooCommerce: Adding an “In Stock” Filter to the Shop Page

In a recent Business Bloomer Club discussion, a WooCommerce store owner wanted to implement a stock filter similar to the price or attributes filter.

They aimed to allow customers to view only in-stock products, which is particularly useful for improving the shopping experience on mobile devices.

While WooCommerce does not include this feature by default, it’s an excellent addition for shops with varying stock availability.

Using the Sorting Dropdown for Stock Filtering

One approach to tackle this is to modify the sorting dropdown to include stock filtering. The inspiration came from existing solutions like displaying “In Stock” products first. However, this request needed a toggle or filter option visible on mobile, potentially alongside the sorting dropdown.

Here’s the custom code solution that one developer implemented:

Code Implementation

add_filter('woocommerce_get_catalog_ordering_args', 'custom_stock_filter_ordering');
function custom_stock_filter_ordering($args) {
    if (isset($_GET['stock_filter']) && $_GET['stock_filter'] === 'in_stock') {
        $args['meta_query'][] = array(
            'key'     => '_stock_status',
            'value'   => 'instock',
            'compare' => '='
        );
    }
    return $args;
}

add_filter('woocommerce_catalog_orderby', 'add_stock_filter_option');
function add_stock_filter_option($options) {
    $options['in_stock'] = __('In Stock', 'woocommerce');
    return $options;
}

add_action('woocommerce_before_shop_loop', 'stock_filter_dropdown');
function stock_filter_dropdown() {
    echo '<div class="stock-filter">';
    echo '<form method="GET">';
    echo '<select name="stock_filter" onchange="this.form.submit()">';
    echo '<option value="">' . __('All Products', 'woocommerce') . '</option>';
    echo '<option value="in_stock"' . selected($_GET['stock_filter'], 'in_stock', false) . '>' . __('In Stock', 'woocommerce') . '</option>';
    echo '</select>';
    echo '</form>';
    echo '</div>';
}

Features of the Solution

• Dropdown or List: This code adds a dropdown menu to filter in-stock products, placed before the product list.
• Customizable Options: You can modify the labels and placement of the dropdown.
• Efficient Filtering: Filters only in-stock products when selected, while retaining default WooCommerce sorting options.

Enhancements for Mobile Usability

The developer also noted that on mobile devices, the sidebar filters are less visible. To solve this, placing the stock filter dropdown above the products or integrating it with the sorting dropdown makes it accessible and user-friendly.

Conclusion

While WooCommerce does not natively provide an “In Stock” filter, you can achieve this functionality through custom code. This approach offers flexibility to tailor the filter’s behavior and placement. If you’re looking for a more advanced solution, you might explore plugins or customize the filter further for specific requirements. Happy coding!