Add some attribute values to WooCommerce variable product title from chosen variation

UPDATE 04-2021 - Successfully tested on WooCommerce 5.1+ (handle custom product attributes)

The following code, will add to variable product title the value(s) of the chosen variation from specific defined product attribute(s) (or all of them optionally too):

The code:

// Defining product Attributes term names to be displayed on variable product titleadd_filter( 'woocommerce_available_variation', 'filter_available_variation_attributes', 10, 3 );function filter_available_variation_attributes( $data, $product, $variation ){    // Here define the product attribute(s) slug(s) which values will be added to the product title    // Or replace the array with 'all' string to display all attribute values    $attribute_names = array('Custom', 'Color');    foreach( $data['attributes'] as $attribute => $value ) {        $attribute      = str_replace('attribute_', '', $attribute);        $attribute_name = wc_attribute_label($attribute, $variation);        if ( ( is_array($attribute_names) && in_array($attribute_name, $attribute_names) ) || $attribute_names === 'all' ) {            $value = taxonomy_exists($attribute) ? get_term_by( 'slug', $value, $attribute )->name : $value;            $data['for_title'][$attribute_name] = $value;        }    }    return $data;}// Display to variable product title, defined product Attributes term namesadd_action( 'woocommerce_after_variations_form', 'add_variation_attribute_on_product_title' );function add_variation_attribute_on_product_title(){    // Here define the separator string    $separator = ' - ';    ?>    <script type="text/javascript">    (function($){        var name = '<?php global $product; echo $product->get_name(); ?>';        $('form.cart').on('show_variation', function(event, data) {            var text = '';            $.each( data.for_title, function( key, value ) {                text += '<?php echo $separator; ?>' + value;            });            $('.product_title').text( name + text );        }).on('hide_variation', function(event, data) {            $('.product_title').text( name );        });    })(jQuery);    </script>    <?php}

Displaying all attributes

You can display all variations attributes values for the chosen variation by defining the variable $attribute_names to "all" so like:

$attribute_names = "all";

Code goes in functions.php file of your active child theme (or theme) or also in any plugin file.

Tested and works… you will get something like: