How To display out-of-stock product variations in a dropdown list in WooCommerce?

Hello guys how are you? Welcome back to my blog therichpost.com. Guys today in this post, I will tell you How To display out-of-stock product variations in a dropdown list in WooCommerce?

Guys if you are new in WordPress or in WooCommerce then please check the below links for some good tutorials:

1. WooCommerce Hooks
2. WordPress Tricks
3. WordPress Hooks
4. Dokan

Here is the working steps and please follow carefully:

To display out-of-stock product variations in a dropdown list with a clear visual indicator, you can customize the behavior of the Elementor Add to Cart widget and WooCommerce. Here’s how to achieve it:

Step 1: Add Custom JavaScript to Modify Dropdown Behavior

You can use custom JavaScript to dynamically add styles (e.g., line-through or grayed-out) to out-of-stock variations in the dropdown list.

1. Add the JavaScript Code:
   Go to your WordPress Dashboard:

• Navigate to Appearance > Customize > Additional CSS/JS or use a plugin like Code Snippets.
• Insert the following JavaScript code:

   jQuery(document).ready(function ($) {
       // Iterate over the variation dropdown
       $('.variations_form select').each(function () {
           $(this).find('option').each(function () {
               let option = $(this);
               // Check if the option contains 'Out of stock'
               if (option.text().toLowerCase().includes('out of stock')) {
                   // Add a CSS class to style out-of-stock options
                   option.css({
                       'text-decoration': 'line-through',
                       'color': 'gray'
                   }).attr('disabled', true); // Optional: Disable selection
               }
           });
       });
   });

2. Save and Publish Changes:
   This script will scan the dropdown for “Out of Stock” options and apply a line-through and gray color styling. You can also disable the option for selection.

Step 2: Enable WooCommerce Stock Status in Dropdown

To ensure WooCommerce includes stock status in the variation dropdown, add a PHP function to your theme.

1. Edit Your Theme’s Functions.php File:

• Go to Appearance > Theme File Editor.
• Add the following code to the functions.php file:

   add_filter('woocommerce_product_variation_title_include_attributes', '__return_true');
   add_filter('woocommerce_variation_option_name', 'custom_variation_stock_status');

   function custom_variation_stock_status($option_name) {
       global $product;

       // Get variations
       $variations = $product->get_available_variations();

       foreach ($variations as $variation) {
           if ($variation['attributes']['attribute_pa_size'] === $option_name) {
               if (!$variation['is_in_stock']) {
                   return $option_name . ' (Out of stock)';
               }
           }
       }
       return $option_name;
   }

This code appends “(Out of stock)” to the variation names that are out of stock.

Step 3: Style the Dropdown Options

Add CSS to style out-of-stock options.

1. Add the CSS Code:
   Go to Appearance > Customize > Additional CSS, and add:

   select.variations option[disabled] {
       text-decoration: line-through;
       color: gray;
   }

This styles disabled dropdown options with a line-through and gray color.

Step 4: Test the Changes

1. Open a product page with variations in the Elementor preview or live site.
2. Check the dropdown to confirm:

• Out-of-stock variations are grayed out and have a line-through.
• “(Out of stock)” is appended to their names.

Optional: Use Plugins for Simplification

If you’re not comfortable editing code, consider using a plugin like:

• Variation Swatches for WooCommerce: Adds visual indicators for variation stock status.
• WooCommerce Advanced Product Labels: Displays stock labels dynamically.

Let me know if you need more help! Also feel free to comment below.

Ajay

Thanks