How to Grey Out WooCommerce Out-of-Stock Variations in the Dropdown

WooCommerce normally displays out-of-stock variations in the select dropdown alongside available ones. This isn’t the best user experience for customers.

A better approach is to grey out and make these out-of-stock options unselectable in the dropdown. This way, customers can easily see which variations are unavailable without any confusion.

In this article, I’ll show you how to do it using a simple code snippet.

Let’s start.

Step 1: Copy the Code Snippet

Add this code to your theme’s functions.php file to grey out the out-of-stock variations and make them unselectable.

These will still be visible, but customers won’t be able to select them. It gives a clear idea of what’s not available without removing the options entirely.

/*
 * Snippet: Unselectable and Grey out out-of-stock variations in the select dropdown
 * Author: Toufique Alahi
 * URL: https://wpblogr.com
 * Tested with WooCommerce 9.3.3
 */

add_filter('woocommerce_variation_is_active', 'wpb_disable_out_of_stock_variations', 10, 2);

 function wpb_disable_out_of_stock_variations($is_active, $variation) {
     // Check if the variation is not in stock
     if (!$variation->is_in_stock()) {
         return false; // Disable the variation
     }
     return $is_active; // Keep the variation active
 }

Step 2: Add it to functions.php

You should add the code snippet to the functions.php file in your child theme. If you don’t have a child theme, read this guide on How to Create a Child Theme.

Once you have the child theme, follow these steps:

• Go to your WordPress dashboard.
• Hover over Appearance and click on Theme File Editor.

• On the right side, find functions.php and style.css
• Click on file names to add the code.

Paste the code and click on Update File.

If you have any questions, feel free to leave a comment below. I will try my best to answer.