Woocommerce separate title and variation from mini cart

<a class="minicart-product-title" href="url-to-product">
  <div class="minicart-image"><img width="128" height="100" src="url-to-image" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail" alt="" loading="lazy"></div>my product - green</a>

This is html output of mini cart product item, I need to separate title and variation something like this:

<a class="minicart-product-title" href="url-to-product">
  <div class="minicart-image"><img width="128" height="100" src="url-to-image" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail" alt="" loading="lazy"></div<h3>>my product</h3> - <span>green</span></a>

But I edit mini-cart.php and find this code:

<a href="<?php echo esc_url( $product_permalink ); ?>">
                            <?php echo $thumbnail . wp_kses_post( $product_name ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
                        </a>

And there is wp_kses_post to generate this title, but I don’t know how to add some html to it?

Answer

Simply clone and override mini-cart.php in your theme then, find this line:

if ( $_product && $_product->exists() && $cart_item['quantity'] > 0 && apply_filters( 'woocommerce_widget_cart_item_visible', true, $cart_item, $cart_item_key ) ) {

Append:

$product_title = $_product->get_title( $cart_item );

Now echo $product_title, note that get_name() return product name with variation name, but get_title() return title only.