Step 1: Add below code to variable.php file located in woocommerce plugin (single-product/add-to-cart)
<?php
$product_variations = $product->get_available_variations();
echo '<ul class="attr_avail_custom dnone">';
foreach ($product_variations as $variation) {
$var_data = $variation['attributes'];
if(!$variation['is_in_stock']) {
echo '<li>';
foreach ($var_data as $vk => $vv) {
echo "<span data-key=$vk data-value=$vv >$vv</span>";
}
echo '</li>';
}
}
echo '</ul>';
?>
Step 2: Add below code to your javascript file
//SOLD OUT text jquery for Prdocut detailed pages...
if( jQuery('ul.attr_avail_custom').length > 0 ) { /*loading jQuery only if the current page is product's detail page*/
//On hovering mouse over the SIZE dropdown - adding SOLD OUT text according to the hidden 'out of stock' attributes available in 'ul.attr_avail_custom'...
jQuery('select[id*="size"]').hover(function () {
var selected_color = jQuery('select[id*="colour"]').val();
//firslty removing SOLD OUT from all if added previously...
jQuery('select[id*="size"] option:not([value=""])').each(function () {
jQuery(this).text(jQuery(this).val());
});
/*checking if the selected colour is in the SOLD OUT pair printed (above select boxes) in hidden and coded in this file woocommerce (single-product\add-to-cart\variable.php) */
jQuery('ul.attr_avail_custom [data-key*="colour"][data-value="' + selected_color + '"]').each(function () { /*out of stock size loop fro selected colour*/
var out_stock_colour_val = jQuery(this).data('value');
var out_stock_size_val = jQuery(this).parent().find('[data-key*="size"]').data('value');
//Finally adding SOLD OUT text...
jQuery('select[id*="size"] option[value="' + out_stock_size_val + '"]').text(out_stock_size_val + ' - SOLD OUT');
});
});
//if mouse is hover over COLOUR dropdown - we must have to (1) Flush the SIZE if seleceted and (2) Triggering clicks on both Dropdowns to prevent AJAX conflicts... (this is required)
jQuery('select[id*="colour"]').hover(function () {
//Flushing selecrted SIZE and triggering click..
jQuery('select[id*="size"]').trigger('click');
jQuery('select[id*="size"] option:eq(0)').attr('selected','selected');
//triggering click on COLOUR dropdown..
jQuery('select[id*="colour"]').trigger('click');
});
}
Note: Remember to overwrite your variable.php file in your theme folder. Click here to learn how to do that.