WooCommerce: Disable Out of Stock Variations @ Variable Product Dropdown

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 CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 8
 * @community     https://businessbloomer.com/club/
 */

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

function bbloomer_grey_out_variations_out_of_stock( $is_active, $variation ) {
    if ( ! $variation->is_in_stock() ) return false;
    return $is_active;
}

Advanced Plugin: WooCommerce Bulk Variations

Greying out of stock variations in the dropdown is a good way to avoid disappointment, but customers still have to click on the dropdowns to see which variations are and arenโ€™t available.

If youโ€™d prefer to see all the variations at once – complete with stock information – then Iโ€™ve found a high quality plugin that can do this for you.

WooCommerce Bulk Variations replaces the variation dropdowns with a variations order form. Each variation appears separately with its own quantity box and stock information, and out of stock variations are greyed out automatically.

Where to add custom code?

You should place custom PHP in functions.php and custom CSS in style.css of your child theme: where to place WooCommerce customization?

This code still works, unless you report otherwise. To exclude conflicts, temporarily switch to the Storefront theme, disable all plugins except WooCommerce, and test the snippet again: WooCommerce troubleshooting 101

Related content

  • WooCommerce: Custom Add to Cart URLs – The Ultimate Guide
    In WooCommerce you can add a product to the cart via a custom link. You just need to use the “add-to-cart” URL parameter followed by the product ID. This tutorial will show you how to create custom URLs to add simple, variable and grouped products to the cart – as well as defining the add […]
  • WooCommerce: Add Custom Field to Product Variations
    Adding and displaying custom fields on WooCommerce products is quite simple. For example, you can add a “RRP/MSRP” field to a product, or maybe use ACF and display its value on the single product page. Easy, yes. Unfortunately, the above only applies to “simple” products without variations (or the parent product if it’s a variable […]
  • WooCommerce: Show “Sold Out” @ Shop Page
    Here’s another simple snippet that can easily help user experience and make sure a “sold out” badge shows on each out of stock product in the category & shop pages. Not all themes allow this so you can use the snippet below to make it happen!
  • WooCommerce: Display “FREE” Instead of $0.00 Price
    In older versions of WooCommerce free prices used to display as “FREE!” and products with empty prices were not publishable/purchasable. Now they’ve changed this around, but I still believe “FREE” looks much better than “$0.00”. It’s much more enticing, isn’t it? Well, here’s how you restore the old WooCommerce functionality – as usual it’s as […]
  • WooCommerce: Display Variations’ Stock @ Shop Page
    Thanks to the various requests I get from Business Bloomer fans, this week I’m going to show you a simple PHP snippet to echo the variations’ name and stock quantity on the shop, categories and loop pages. Of course, if “Manage stock” is not enabled at variation level, the quantity will be null, and therefore […]

Rodolfo Melogli

Business Bloomer Founder

Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as an independent WooCommerce freelancer since 2011. His goal is to help entrepreneurs and developers overcome their WooCommerce nightmares. Rodolfo loves travelling, chasing tennis & soccer balls and, of course, wood fired oven pizza. Follow @rmelogli

35 thoughts on “WooCommerce: Disable Out of Stock Variations @ Variable Product Dropdown

  1. I want to remove attribute from dropdown list if they are out of stock.

    1. Hello Bhrugesh, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  2. I have used this snippet on almost every WooCommerce site I have made and it’s brilliant.
    Now I found out that it is not compatible with the WooCommerce Waitlist plugin. The waitlist field is not showing up anymore if a product is out of stock. This is a bit unfortunate because in this particular setup, not every product has a waitlist option. So in the ideal setup, the grey-out does not work when there is a waitlist option active.

    This can probably be fixed by diving deeper into the code of the Waitlist plugin so consider this as an FYI comment.

  3. The grey out options works fine but the greay out color does not stand out enough. Is there a (simple) way to change this colour to a color that stands out more

    1. I believe CSS can help

  4. Is it possible to hide the variation if it’s already in the cart?

    1. by ‘hide’ I mean disable/grey out

      1. Hi Aaron, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  5. I’m having the same problem others have noted. It seems to work perfect on products with a small number of variations but not on ones with a lot of variations. I tried changing the 10 to 9999 but no change.

    I set up a new install of WP & Woo, with Twenty-Twenty as the theme and no other plugins. I created two products, the first with 6 variations, and the second with 81. It works fine with the first one, but doesn’t work with the second.

    First product you can see that a Small Red is grayed out.

    Second product check Size 6 and Black. Not grayed out, but shows up Out of Stock after selecting it.

    1. Not sure Matt, this might need troubleshooting, sorry but this is custom work

  6. Is there any way to just lower the opacity or add custom styling instead of disabling the variable?

    Im using an InStock email Notifier, so I would like customers to be able to see whats available at a glance but still be able to select the out of stock variation and subscribe for notification.

    1. I’m sure there is a way, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  7. Hi thanks. good snippet, but it does not work on Mac OS.

    1. This should be browser-independent. Try clearing your cookies

  8. Hi,
    do not know anyone how to hide “out of stock” child product in Product page (grouped product)

    Grouped PRODUCT
    — SUB ITEM 1 — add to cart
    — SUB ITEM 2 (out od stock) – only this item hide
    — SUB ITEM 3 — add to cart

    1. Hi Antony, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  9. Hi, speak to me like I know nothing, because I don’t!

    I have around 10 variable products, this code worked for the products with a limited number of variables (around 5-10) but I have three products with a large number of variations, around 30 and the code hasn’t worked for these. Any ideas?

    Many thanks.

    1. Hey Gemma, this is unusual. It should work for all variations. Try changing “10” with “9999”, otherwise try disabling all plugins but WooCommerce to see if it works fine – in case it’s one of those plugins creating the “conflict”. Hope this helps

      1. How did this work with Gemma Grove’s problem? I have same issue, works with small amount of variations.

        1. Have you tried with 2020 theme and no other plugin apart from Woo?

  10. It works perfectly! But how to style enabled and disabled variations? I would like to visually enhance the difference between the variations…

    1. Hi Patrick, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  11. Hey, I have tried to implement this code, but I am having some issues, would you be willing to take a look and see what might be the problem?

    note: the variable “test” is out of stock.

    1. Hello Seth, thanks for your comment! I just tested this again with Storefront theme and it works perfectly. Maybe your theme (or another plugin) is messing/conflicting with my snippet?

      To troubleshoot, disable all plugins but WooCommerce and also switch temporarily to “Twentyseventeen” theme (load the snippet there in functions.php) – does it work? If yes, you have a problem with your current theme or one of the plugins.

      Hope this helps!

      R

      1. Thank you, I turned everything off, I even tried the Storefront theme. It still didn’t seem to work. My dropdown box looks different from yours as well… https://www.dropbox.com/s/uaixvgrjcirbsg2/Screen%20Shot%202019-10-22%20at%204.21.08%20PM.png?dl=0

        I wonder what I’ve done wrong.

        1. Not sure ๐Ÿ˜

  12. Great addition to my websites. Work great! Thank you

    1. Awesome!

      1. I do have a wholesale quick order form on my website that replicates the WooCommerce order form cart. The code snippet doesn’t seem to get applied on this.

        Here’s a link to the quick order form where you can see the variation form used and the various are not greyed out:
        https://silviafindings.staging.wpengine.com/wholesale-quick-order-form

        Here’s a link to a product to test with (SKUs: BC004 BC005 & BC006 are out of stock)
        https://silviafindings.staging.wpengine.com/product/oval-multi-purpose-jeweller-setting-pendant-oval-bezel-mounting-sterling-silver

        How would I apply the same rule in this case?

        Thanks
        Lyse

        1. Hello Lyse, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

          1. Thank you for the offer, but I don’t think I need it that bad.

            1. No problem!

  13. Hei, that’s a really nice tweak..
    Thanks.. I wanna implement it soon on one of my client website.
    ๐Ÿ™‚

    1. Great!

Questions? Feedback? Customization? Leave your comment now!
_____

If you are writing code, please wrap it like so: [php]code_here[/php]. Failure to complying with this, as well as going off topic or not using the English language will result in comment disapproval. You should expect a reply in about 2 weeks - this is a popular blog but I need to get paid work done first. Please consider joining the Business Bloomer Club to get quick WooCommerce support. Thank you!

Your email address will not be published. Required fields are marked *