Add "Sold Out" to Woocommerce variations dropdown

Question

I figured out to grey out unavailable options for Woocommerce variable products thanks to the code on the following page: Greying out out-of-stock product variations (WooCommerce)

I'm wondering if there's a way to add "Sold Out" text to unavailable options. It seems there used to be a way to do this, but this doesn't work anymore. https://www.skyverge.com/blog/add-sold-out-to-woocommerce-variable-product-dropdow/

Any help would be appreciated!

Savan Dholu Savan Dholu · Accepted Answer · 2016-12-06T10:03:54

The JavaScript we need to inject into the page to add the ‘Sold Out’ (or any other notice) is the following:

<script type="text/javascript">
jQuery( document ).bind( 'woocommerce_update_variation_values', function() {

jQuery( '.variations select option' ).each( function( index, el ) {
var sold_out = '<?php _e( 'sold out', 'woocommerce' ); ?>';
var re = new RegExp( ' - ' + sold_out + '$' );
el = jQuery( el );

if ( el.is( ':disabled' ) ) {
 if ( ! el.html().match( re ) ) el.html( el.html() + ' - ' + sold_out );
} else {
if ( el.html().match( re ) ) el.html( el.html().replace( re,'' ) );
}
} );
} );
</script>

The final step is to inject this javascript into the page content via the ‘woocommerce_before_add_to_cart_form’ action like so:

add_action( 'woocommerce_before_add_to_cart_form', 'woocommerce_sold_out_dropdown' );
function woocommerce_sold_out_dropdown() {
?>
// JavaScript from above goes here
 <?php
}

Thanks in advance

Add "Sold Out" to Woocommerce variations dropdown

1 Answers