Disable Out of Stock Variations
### **1. Modify the Dropdown with JavaScript**
WooCommerce does not provide a built-in way to disable out-of-stock variations in the dropdown, but you can achieve this using JavaScript/jQuery.
#### **Steps to Implement:**
1. **Add this script to your theme’s `functions.php` file or enqueue it properly in your theme’s JS file:**
jQuery(document).ready(function ($) {
$('select[name^="attribute_"]').each(function () {
$(this)
.find('option')
.each(function () {
var variationText = $(this).text();
if ($(this).val() !== '' && variationText.includes('(out of stock)')) {
$(this).prop('disabled', true).css('color', '#ccc');
}
});
});
// Update on variation change
$(document).on('woocommerce_variation_select_change', function () {
$('select[name^="attribute_"]').each(function () {
$(this)
.find('option')
.each(function () {
var variationText = $(this).text();
if ($(this).val() !== '' && variationText.includes('(out of stock)')) {
$(this).prop('disabled', true).css('color', '#ccc');
}
});
});
});
});### **2. Append "(Out of stock)" to Disabled Variations**
To automatically append **"(Out of stock)"** to out-of-stock variations, use this PHP code in your theme's `functions.php` file:
add_filter('woocommerce_variation_option_name', function ($term, $term_id, $product) {
if ($product && is_a($product, 'WC_Product')) {
foreach ($product->get_available_variations() as $variation) {
if (isset($variation['attributes']['attribute_' . sanitize_title($term)]) && $variation['attributes']['attribute_' . sanitize_title($term)] == $term) {
if (!$variation['is_in_stock']) {
return $term . ' (Out of stock)';
}
}
}
}
return $term;
}, 10, 3);### **3. Save and Clear Cache**
– Save the changes and clear any cache (browser, WooCommerce, or plugin-based caching).
– Check the product detail page, and the out-of-stock variations should now be disabled and grayed out.
#### **Expected Behavior:**
– **In-stock variations** will remain selectable.
– **Out-of-stock variations** will be displayed as `disabled` in the dropdown and grayed out.
– Users cannot select out-of-stock variations.
Let me know if you need any modifications! 🚀
second option is out of stock but there is no indication in dropdown
—
### **1. Use PHP to Append "(Out of stock)" to the Variation Name**
Add the following code to your **theme's `functions.php`** file. This will automatically append "(Out of stock)" to the unavailable variations.
add_filter('woocommerce_variation_option_name', function ($term, $term_id, $product) {
if ($product && is_a($product, 'WC_Product')) {
foreach ($product->get_available_variations() as $variation) {
if (isset($variation['attributes']['attribute_' . sanitize_title($term)]) && $variation['attributes']['attribute_' . sanitize_title($term)] == $term) {
if (!$variation['is_in_stock']) {
return $term . ' (Out of stock)';
}
}
}
}
return $term;
}, 10, 3);—
### **2. Use jQuery to Disable Out-of-Stock Variations**
Now, add the following JavaScript code inside your theme's **custom JS file** or enqueue it in `functions.php`:
jQuery(document).ready(function ($) {
// Function to disable out-of-stock options
function disableOutOfStockOptions() {
$('select[name^="attribute_"]').each(function () {
$(this).find('option').each(function () {
var optionText = $(this).text();
if (optionText.includes('(Out of stock)')) {
$(this).prop('disabled', true).css('color', '#ccc');
}
});
});
}
// Run function on page load
disableOutOfStockOptions();
// Run function when variations update
$(document).on('woocommerce_variation_select_change', function () {
disableOutOfStockOptions();
});
});—
### **3. Clear Cache & Test**
– **Clear your cache** (WooCommerce, Cloudflare, WP Rocket, etc.).
– **Refresh the product page** and check the dropdown.
– **Expected Behavior:**
– The **"Triumph Bonneville Bud Ekins"** option will now display as **"Triumph Bonneville Bud Ekins (Out of stock)"** in the dropdown.
– It will be **disabled** and grayed out.
Let me know if you need further adjustments! 🚀