Out of Stock Variation Swatches Are Not Hidden, Blurred, or Crossed Out

A customer opens a variable product, sees several color or size swatches, clicks one, and only then discovers that the option is unavailable.

That is not a great shopping experience.

Out of stock variation swatches should make availability obvious before a customer clicks them. Depending on your store design, unavailable options can be hidden, blurred, faded, disabled, or crossed out.

If WooCommerce is still showing unavailable swatches like normal active options, here is what you should check.

Why WooCommerce May Still Show Unavailable Swatches

WooCommerce understands whether a variation is in stock, but the way that information appears on the product page depends heavily on your swatches plugin and theme.

The default variation system may simply prevent customers from purchasing an unavailable combination. A swatches plugin adds the visual layer.

That means your product can have correct stock data while out of stock variation swatches still look completely normal.

For example, a shirt may have:

Colors: Black, Red, Blue
Sizes: Small, Medium, Large

If Blue + Large is unavailable, WooCommerce may know that combination cannot be purchased. But if the swatches plugin does not visually mark it, the shopper receives that information too late.

The solution starts by checking both inventory data and swatch behavior.

1. Confirm the Variation Is Actually Out of Stock

Before changing any design settings, ensure WooCommerce knows the variation is unavailable.

Edit the product and go to:

Product Data → Variations

Open the affected variation.

Check:

• Stock status
• Manage stock
• Stock quantity
• Allow backorders

If “Manage stock” is enabled and quantity is zero, WooCommerce should normally treat the variation as unavailable unless backorders are allowed.

If you manually control stock status, make sure it is set to:

Out of stock

This sounds basic, but incorrect inventory data is one of the first things to rule out when out of stock variation swatches are not behaving correctly.

2. Check the Swatches Plugin’s Out-of-Stock Settings

Most capable variation swatches plugins include some type of unavailable-option behavior.

Look through the plugin settings for options such as:

• Hide out-of-stock swatches
• Disable unavailable variations
• Blur unavailable options
• Cross out disabled swatches
• Fade disabled swatches
• Disable click
• Show unavailable variation
• Out-of-stock styling

The exact wording depends on the plugin.

You may discover that out of stock variation swatches are intentionally configured to remain visible.

For example, a plugin may offer three choices:

Hide

The unavailable swatch disappears completely.

Blur or fade

The option remains visible but clearly looks unavailable.

Cross out

The swatch remains visible with a diagonal line through it.

Choose the behavior that makes the most sense for your products.

3. Decide Whether Hiding or Disabling Is Better

Hiding unavailable options is not always the best solution.

Suppose a customer wants a shirt in Red, but Red is currently unavailable.

If you hide the swatch entirely, the customer may assume that Red was never offered.

Keeping it visible but crossed out lets the customer know that Red is still an option, even if it can’t be purchased right now.

This can be useful for products where customers may return later when stock is replenished.

For many stores, visually disabled out of stock variation swatches provide more useful information than completely hidden ones.

A faded or crossed-out swatch says:

“This option exists, but it is unavailable right now.”

That is usually clearer than simply removing it.

4. Check How Combination-Based Stock Is Handled

Variable products can become more complicated when availability depends on multiple attributes.

For example:

Black + Small: Available
Black + Medium: Available
Black + Large: Out of stock

The Black color itself is technically available because other Black variations can still be purchased.

So WooCommerce should not necessarily cross out the Black swatch immediately.

Instead, after the shopper selects Black, the Size options should update and Large should become unavailable.

Your swatches plugin needs to understand these variation combinations correctly.

If out of stock variation swatches are disabled too early or remain available after another option is selected, check whether the plugin supports dynamic variation availability.

5. Make Sure Unavailable Swatches Cannot Still Be Clicked

Visual styling alone is not enough.

A gray or crossed-out swatch should also behave like an unavailable option.

Customers should not be able to click it and accidentally create a confusing variation state.

Test the affected product.

Select different attributes and try clicking the unavailable swatch.

A properly disabled option should either

• Not respond to clicks
• Clearly show that it is unavailable
• Prevent the unavailable combination from being selected

If the swatch looks disabled but still behaves like an active choice, the problem may involve JavaScript or plugin compatibility.

6. Check Your Theme for Styling Conflicts

Your swatches plugin may already be adding the correct disabled class to unavailable options, while your theme prevents the visual styling from appearing.

This happens more often than many store owners expect.

A theme may override styles related to:

• Opacity
• Borders
• Pseudo-elements
• Background colors
• Disabled states
• Text decoration

As a result, out of stock variation swatches behave correctly but still look active.

Temporarily test the product using a standard WooCommerce-compatible theme.

If the unavailable styling suddenly appears, your theme is likely overriding the swatches plugin’s CSS.

You can then check for a compatibility setting before adding custom CSS.

7. Clear Cache After Changing Stock or Swatch Settings

Stock changes can be hidden behind cached product pages.

You may mark a variation as out of stock and configure crossed-out swatches correctly but still see the previous version.

Clear:

• WordPress cache
• Server cache
• CDN cache
• Browser cache
• WooCommerce transients

Then test the product in a private browser window.

This is especially important if your store uses aggressive page caching or JavaScript optimization.

Old frontend data can make out of stock variation swatches appear available even after the underlying configuration has already been corrected.

8. Test Both Single Products and Shop Pages

Some swatch plugins use different settings for different locations.

Out-of-stock behavior may work correctly on a single product page but not on the following:

• Shop pages
• Category pages
• Search results
• Quick view
• Related products

Or the opposite may happen.

If you display variation swatches outside individual product pages, test those locations separately.

Make sure out of stock variation swatches communicate the same availability state wherever customers can interact with them.

Consistency matters here.

An object is consistently available or unavailable, both on the shop page and unavailable after opening the product.

9. Check JavaScript If Availability Does Not Update

Variation availability often changes dynamically.

When a shopper selects Color, WooCommerce recalculates which Size options are valid for that selection.

Swatch plugins usually depend on WooCommerce variation JavaScript to reflect those changes visually.

Open the product page and check:

F12 → Console

Look for JavaScript errors involving:

• WooCommerce variations
• jQuery
• Switches scripts
• Theme scripts
• Optimization plugins

If a script fails, out of stock variation swatches may never update after customers change an attribute.

Also test temporarily without JavaScript optimization features such as delay, deferral, or aggressive script combination.

10. Keep the Unavailable Style Obvious but Simple

Do not make unavailable swatches difficult to recognize.

A shopper should understand the state almost instantly.

Good approaches include:

• Reduced opacity
• A clean diagonal cross
• A subtle blur
• Muted colors
• Disabled cursor behavior

You do not need several effects at once.

For example, a faded swatch with one diagonal line is usually enough.

The purpose of styling out of stock variation swatches is not decoration. It is communication.

Customers should immediately understand which options they can choose and which ones they cannot.

FAQs

Conclusion

If out of stock variation swatches look exactly like available options, first confirm the variation inventory is correct. Then review your swatches plugin’s unavailable-option settings and decide whether hiding, fading, or crossing out works best for your store.

Most importantly, make the unavailable state obvious and consistent. Customers should know what they can purchase before they waste time clicking on an unavailable option.