Disable (Gray Out) Out-of-Stock Variations in WooCommerce

By default, a WooCommerce variable product lets customers pick out-of-stock variations. The out-of-stock message only shows after they select one. To gray out those options instead, return false from the woocommerce_variation_is_active filter for every variation that isn’t in stock. WooCommerce’s variation script then disables the matching options in the attribute dropdowns, so customers can’t select them. If you’d rather remove out-of-stock options completely, WooCommerce has a setting for that, covered below.

Add the code to your child theme’s functions.php file.

/**
 * Disable out of stock variations
 * @see WC_Product_Variation::variation_is_active()
 * @return bool
 */
function wcbv_variation_is_active( $active, $variation ) {
    if ( ! $variation->is_in_stock() ) {
        return false;
    }
    return $active;
}
add_filter( 'woocommerce_variation_is_active', 'wcbv_variation_is_active', 10, 2 );

How it works

WooCommerce asks every variation whether it’s active by running the woocommerce_variation_is_active filter. The filter starts as true and passes the variation object as the second argument. The function checks $variation->is_in_stock() and returns false for variations that are out of stock; all other variations keep their original status.

The result goes into the variation data that WooCommerce prints on the product page as variation_is_active. When the page loads and each time a customer changes a dropdown, the variation script (add-to-cart-variation.js) works out which options still lead to a variation and disables the options whose matching variations are all inactive. Browsers show disabled options grayed out, and customers can’t pick them.

How the graying works with two attributes

The check is per combination, not per value. Take a T-shirt with Size (Small, Medium, Large) and Color (Red, Blue), where both Large variations are out of stock, Medium/Blue is out of stock and Medium/Red is on backorder. With the snippet in place:

• Before the customer chooses a color, the dropdown grays out Large, because no Large variation is in stock. Medium stays selectable, because Medium/Red is available.
• After the customer picks Blue, the dropdown grays out Medium too, because Medium/Blue is out of stock.
• Without the snippet, every option stays selectable in both cases.

Remove out-of-stock options instead of graying them out

Go to WooCommerce > Settings > Products > Inventory and tick Hide out of stock items from the catalog (the Out of stock visibility setting). WooCommerce then leaves out-of-stock variations out of the variation data, and the variation script removes options that no remaining variation uses instead of graying them out. In the example above, Large disappears from the Size dropdown, and Medium disappears once the customer chooses Blue.

The setting applies to the whole store: out-of-stock simple and variable products also disappear from the shop, product category pages and product search results. Use the filter when you only want to change the variation dropdowns.

Why is an out-of-stock option still selectable?

• The variation is on backorder. Variations with the stock status On backorder count as in stock, so they stay selectable.
• The product has more than 30 variations. Above that number WooCommerce doesn’t print the variation data on the page and looks up each selection with AJAX instead, so it can’t gray out options in advance. Customers still can’t buy an out-of-stock variation: WooCommerce disables the add to cart button when they pick one. You can raise the limit with the woocommerce_ajax_variation_threshold filter, as shown below, at the cost of a larger page, because WooCommerce then prints all the variation data into the HTML.
• A swatches plugin replaced the dropdowns. The graying happens on WooCommerce’s own <select> elements. If a plugin or theme shows buttons or color swatches instead, whether those show the disabled state depends on that plugin.
• The product page uses the Add to Cart + Options (Beta) block. In a block theme, this newer block builds its own variation selector and doesn’t read woocommerce_variation_is_active. The Add to Cart with Options block used by WooCommerce’s default Single Product template prints the classic form, so the snippet works there. With the Beta block, use the Hide out of stock items setting; its Variation Selector then grays out or hides combinations that are no longer available, depending on its Invalid options setting.
• Cached pages. If you use a caching plugin, clear the cache so product pages pick up the new variation data.

To print the variation data for products with up to 100 variations:

add_filter( 'woocommerce_ajax_variation_threshold', 'wcbv_ajax_variation_threshold', 10, 2 );
function wcbv_ajax_variation_threshold( $threshold, $product ) {
    return 100;
}

To tell customers which options are sold out rather than only graying them out, add the stock status to each option’s label, either as Out of Stock text beside each option or with an outofstock CSS class you can style.

If you’d like variation and stock display handled for your store, see my WooCommerce development services.