@36styles

Add this code to your functions.php file or with a snippet plugin

https://wordpress.org/plugins/code-snippets/

add_filter( 'woocommerce_variation_is_active', 'grey_out_variations_when_out_of_stock', 10, 2 );

function grey_out_variations_when_out_of_stock( $grey_out, $variation ) {
  
  ?>
  <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>
   <?php

    if ( ! $variation->is_in_stock() )
        return false;

    return true;
}

Your variation select box will be something like this image below.

The customer can select only the variation which has stock.