Changing the product title variation dynamically

Hi there 👋

Upon checking on the internet, I found a custom PHP code that might do the job for you, here is the code and the link to the article:

Link: https://stackoverflow.com/questions/47462265/add-some-attribute-values-to-woocommerce-variable-product-title-from-chosen-vari?answertab=active#tab-top

// Defining product Attributes term names to be displayed on variable product title
add_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 names
add_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
}

I normally recommend using the Code Snippet plugin in order to add custom PHP code into your site without having to touch the functions.php file. Here is a link on how to use the Code Snippet plugin:

https://www.wpbeginner.com/plugins/how-to-easily-add-custom-code-in-wordpress-without-breaking-your-site/

I hope that helps 🙂

Well, at the moment, there’s no default option for that in WooCommerce, and setting that as the default would require quite a bit of additional coding. Please kindly note that this requires some custom coding – which goes beyond the scope of support we are able to provide in this forum.

If you do require more help with the actual coding, we’d recommend you hire a developer who can take a look at this, quote you for their services, and help you add this feature to your site. We’d recommend getting in touch with a web developer or one of the customization experts listed at https://woocommerce.com/customizations/.

I can also recommend the WooCommerce Developer Resources Portal for resources on developing for WooCommerce.

You can also visit the WooCommerce Facebook group or the #developers channel of the WooCommerce Community Slack. We’re lucky to have a great community of open-source developers for WooCommerce, and many of our developers hang out there, as well.

Cheers!