Woocommerce changing title on shop depending on variables - php

Question

I'm trying changing titles on Wordpress Woocommerce shop page depends on which variation I'm using.
I've found one solution which works perfectly on product pages. I'm stuck now and need to change a little bit the code that will work on shop page too.
Here is the code for the product page:
https://wordpress.org/support/topic/how-to-make-the-title-of-the-product-change-when-choosing-specific-variation/
It works perfectly, you can check the working code here:
http://tattodivi.nhely.hu/product/flower-lily/
I need one more solution which works on Woocommerce shop page too in this link:
http://tattodivi.nhely.hu/
If any of you can help me on this let me know.
Thanks.

Answer 1

The following code might work
jQuery('.products .variable-item').on('click', function(){
if(jQuery(this).parent().hasClass('image-variable-wrapper')){
var title_obj = jQuery(this).parent().parent().parent().parent().parent().find('.woocommerce-loop-product__title');
if(typeof(title_obj.attr('data-title'))=='undefined'){
title_obj.attr('data-title', title_obj.text());
}
title_obj.text(title_obj.data('title')+' - '+jQuery(this).data('value'));
}
});

Answer 2

This snippet will work only if you set default variation beforehand as its in the demo you provide.
//Remove default title
remove_action('woocommerce_shop_loop_item_title','woocommerce_template_loop_product_title',10);
//Add custom title
add_action('woocommerce_shop_loop_item_title','custom_template_loop_product_title',10);
function theme_template_loop_product_title() {
global $product;
if($product->get_type() === 'variable'):
$attributes = $product->get_default_attributes();
if($attributes):
$_title = array();
foreach($attributes as $attribute):
$_title[] .= $attribute.' ';
endforeach;
echo '<h2 class="' . esc_attr( apply_filters( 'woocommerce_product_loop_title_classes', 'woocommerce-loop-product__title' ) ) . '">' . get_the_title() .' '. implode('',$_title).'</h2>'; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
else:
echo '<h2 class="' . esc_attr( apply_filters( 'woocommerce_product_loop_title_classes', 'woocommerce-loop-product__title' ) ) . '">' . get_the_title() . '</h2>';
endif;
else:
echo '<h2 class="' . esc_attr( apply_filters( 'woocommerce_product_loop_title_classes', 'woocommerce-loop-product__title' ) ) . '">' . get_the_title() . '</h2>'; endif;
}