Hide Sold Out Variations

User
greyed out variation option not hide from dropdown wocoomerce if its sold out
Assistant
By default, WooCommerce does not hide sold-out variations from the dropdown; it only greys them out. However, you can completely remove sold-out variations from the dropdown using a custom function.

### Solution: Remove Sold-Out Variations from Dropdown
You can add the following code to your theme’s `functions.php` file:

add_filter('woocommerce_variation_is_active', 'hide_sold_out_variations', 10, 2);
function hide_sold_out_variations($is_active, $variation) {
    if (!$variation->is_in_stock()) {
        return false;
    }
    return $is_active;
}

### Explanation:
– This function checks if a variation is **out of stock** and removes it from the dropdown selection.
– If the variation is in stock, it remains selectable.

### Alternative: Use a Plugin
If you prefer not to modify code, you can use a plugin like:
– **WooCommerce Variation Swatches**
– **WooCommerce Stock Manager**

Let me know if you need further adjustments! πŸš€

User
NO I want to greyed out not hide but currently its hide
Assistant
If your sold-out variations are completely **hidden** instead of just **greyed out**, it means WooCommerce might be filtering them out incorrectly. The default behavior of WooCommerce should be to **grey out** out-of-stock variations but still display them in the dropdown.

### βœ… Fix: Ensure Sold-Out Variations Are Displayed but Greyed Out
Try **removing** any custom code that hides out-of-stock variations. If you have added something like this before:

add_filter('woocommerce_variation_is_active', function($is_active, $variation) {
    return $variation->is_in_stock();
}, 10, 2);

Remove it, as it completely hides the variation.

### βœ… Proper Code to Keep Sold-Out Variations Greyed Out
If your theme or plugins are altering this behavior, try explicitly allowing WooCommerce to display **all** variations but keep them disabled when out of stock.

Add this to your `functions.php` file:

add_filter('woocommerce_variation_is_active', 'keep_sold_out_variations_greyed', 10, 2);
function keep_sold_out_variations_greyed($is_active, $variation) {
    return true; // Ensures variations remain visible
}

This ensures that **all variations** remain in the dropdown, but WooCommerce will naturally grey out the ones that are out of stock.

### βœ… Check WooCommerce Settings
Go to:
**WooCommerce β†’ Settings β†’ Products β†’ Inventory**
Make sure **β€œHide out-of-stock items from the catalog”** is **unchecked**.

### βœ… Check for Theme or Plugin Conflicts
If the issue persists, test by:
1. Switching to the **default Storefront theme**.
2. Disabling **all plugins except WooCommerce** and checking the dropdown.

If the variations reappear, re-enable your theme and plugins one by one to identify the conflict.

### Let me know if you still face issues! πŸš€

User
okay now showing that option but make it disabled in dropdown
Assistant
Great! Now, to make the **out-of-stock** variations appear in the dropdown but be **disabled (unclickable)**, follow these steps:

### βœ… Solution: Disable Sold-Out Variations in the Dropdown
Add the following jQuery script to your theme. You can place it in:
**Appearance β†’ Theme Editor β†’ `footer.php` (before “)**
or
Use a plugin like **Code Snippets** to add the script.

jQuery(document).ready(function ($) {
    $('select[name^="attribute_"] option').each(function () {
        if ($(this).text().includes("(Out of stock)")) {
            $(this).prop('disabled', true);
        }
    });
});

### βœ… Explanation:
– This script looks for variations in the dropdown.
– If the option **contains "Out of stock"**, it **disables** that option.
– The "(Out of stock)" text is automatically added by WooCommerce, so this method works dynamically.

### βœ… Alternative: Add a CSS Style (Optional)
If you want to visually **style the disabled variations**, add this to **Appearance β†’ Customize β†’ Additional CSS**:

.variations select option:disabled {
    color: grey !important;
    font-style: italic;
}

### βœ… Bonus: Ensure "(Out of stock)" Appears in Dropdown
If your theme doesn’t show "Out of stock" in the dropdown, add this PHP snippet to `functions.php`:

add_filter('woocommerce_variation_option_name', function ($name, $variation, $product) {
    if (!$variation->is_in_stock()) {
        return $name . ' (Out of stock)';
    }
    return $name;
}, 10, 3);

### πŸš€ Final Result:
– Sold-out variations will **appear** in the dropdown.
– They will be **disabled (unclickable)**.
– The styling will indicate that they are **unavailable**.

Let me know if you need further refinements! 🎯

Leave a Comment

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