'WooCommerce show variation attributes dynamically

I'm going crazy trying to figure this out. I have a WooCommerce Shop with variable products. What I need is for when a user selects a variation, a box below to show the associated attributes. (Reason being, I need a user to be able to save their selections in a nice clean format without adding it to the cart). I have a code that shows all possible attribute combinations of the current product, but I need to display only the attributes of the currently selected variation. I know I need to use a combo of js and php, but I'm quite lost on how to make them work together.

My current code:

add_action( 'woocommerce_after_add_to_cart_form', 'mad_show_attrs' );
 
function mad_show_attrs() {
global $product;
if($product->is_type('variable')){
    $variations = $product->get_available_variations();

    foreach($variations as $variation)
    {
        $variation_obj = wc_get_product($variation['variation_id']);

        // Variation can have many poduct attributes
        $attr_slugs = implode(', ', $variation['attributes']);

       
        $COD = $variation_obj->get_sku();
        $wood = $variation_obj->get_attribute('wood-type');
        

        echo "<p>Manufacturer:  </p>";
        echo "<p>Product: " .$attr_slugs."</p>";
        echo "<p>Product Code: " .$COD."</p>";
        echo "<p>Species: " .$wood."</p>";

       
    }
}}

Please send help, I'm losing my mind. Thanks



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source