A nice way to avoid user frustration is to never let them pick a product / variation that is out of stock, only to realize later they can’t purchase it.
A variable product comes with a “select dropdown” on the single product page, from which customers can pick their favorite variation. Problem is that ONLY after selecting this they will find out about price, stock status and may be able to add to cart.
Today, we’ll completely disable (grey-out) those select dropdown options (variations) that are out of stock, so that users don’t waste time and only pick one of those that are in stock. Enjoy!
In this example, thanks to my snippet, the “Medium” variation is greyed out and not selectable on the WooCommerce Single Product page (“Medium” is out of stock)
PHP Snippet: Grey-out Out of Stock Variations @ WooCommerce Single Product Page
/**
* @snippet Disable out of stock variations @ WooCommerce Single
* @how-to Get tutoraspire.com FREE
* @author Tutor Aspire
* @compatible WooCommerce 3.7
* @donate $9 https://tutoraspire.com
*/
add_filter( 'woocommerce_variation_is_active', 'tutoraspire_grey_out_variations_out_of_stock', 10, 2 );
function tutoraspire_grey_out_variations_out_of_stock( $is_active, $variation ) {
if ( ! $variation->is_in_stock() ) return false;
return $is_active;
}
