How to Disable Out of Stock Variations in WooCommerce Variable Products?

Customers prefer options while choosing a product. WooCommerce variable products can offer such options. A variable product is a type of product in WooCommerce which allows selecting options, like different colors, sizes, and SKU. 

Now, if you are selling variable products, and some of your product is out of stock, you have the option to hide the out-of-stock products. WooCommerce already has a setting to completely remove products/variations products when out of stock. This means they’re no longer visible on shop pages or on product pages for the variations. 

Remove Out of Stock Products

Go to the WooCommerce > Settings > Products > Inventory settings section. There you’ll find the ‘Out of stock visibility’ checkbox; check the box if you’d want to hide these products from the catalog, and variations from the dropdown completely. 

Disable Out of Stock Variations in WooCommerce

But, if you have a plan to restock the product, then it will be good if you disable the option rather than hiding it. Showing variation as disabled can be a good customer experience to show there are different options available, but not available right now. They will inform about all the variations of that product and there is a good chance that they will revisit your store in the future.

With just a small code snippet it is possible to check the product stock and make variations inactive. You can add these snippets to your child theme’s functions.php file. WooCommerce Core will then by default show the options in the dropdown as disabled.

/**
*
* Variations that are out of stock will be greyed out (made inactive).
*
*
* @param bool $is_active Original value.
* @param WC_Product_Variation $variation Variation.
* @return bool Modified value.
*/
function grey_out_variations_when_out_of_stock( $is_active, $variation ) {
if ( ! $variation->is_in_stock() ) {
$is_active = false;
}

return $is_active;
}
add_filter( 'woocommerce_variation_is_active', 'grey_out_variations_when_out_of_stock', 10, 2 );

Add Text to Out of Stock Variations

With the above addition, it is not possible to select and view these variations. 

Adding the snippet below adds this text to all disabled options. Add the text ‘(out of stock)’ to provide additional context as to why variations are not available/disabled. This is done through some Javascript in order to make sure it is updated accordingly. You can change the text of course in the snippet itself.

/**
* Add text to out of stock variations.
*
*/


function add_text_out_of_stock_variations() {
wp_add_inline_script( 'wc-add-to-cart-variation', "
var outOfStockText = ' (out of stock)'
jQuery('.variations_form').on('woocommerce_update_variation_values', function() {
jQuery(this).find('option:disabled').text(function(i, v) {
return v.replace(outOfStockText, '') + ' ' + outOfStockText
})
})
" );
}
add_action( 'wp_enqueue_scripts', 'add_text_out_of_stock_variations' );

It will give the following result,

Snippet credit, Jeroen with thanks. ❤️