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!
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.
I want to remove attribute from dropdown list if they are out of stock.
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!
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.
Thanks!
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
I believe CSS can help
Is it possible to hide the variation if it’s already in the cart?
by ‘hide’ I mean disable/grey out
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!
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.
Not sure Matt, this might need troubleshooting, sorry but this is custom work
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.
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!
Hi thanks. good snippet, but it does not work on Mac OS.
This should be browser-independent. Try clearing your cookies
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
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!
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.
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
How did this work with Gemma Grove’s problem? I have same issue, works with small amount of variations.
Have you tried with 2020 theme and no other plugin apart from Woo?
It works perfectly! But how to style enabled and disabled variations? I would like to visually enhance the difference between the variations…
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!
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.
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
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.
Not sure 😐
Great addition to my websites. Work great! Thank you
Awesome!
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
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!
Thank you for the offer, but I don’t think I need it that bad.
No problem!
Hei, that’s a really nice tweak..
Thanks.. I wanna implement it soon on one of my client website.
🙂
Great!