Wordpress - Woocommerce list product variations combinations in the same dropdown

Question

I would like to show the product variations combinations in the same dropdown show as:

I override the variations.php into the woocommerce folder in my child theme. This function show the information well:

$available_variations = $product->get_available_variations();

        if (count($available_variations) > 0) {

            $output = '<div class="product-variations-dropdown">
                <select id="available-variations" class="form-select product-selector mb-4" name="available_variations">';

                    $output .= '<option value="">' . __('Choose a variation') . '</option>';

                    foreach ($available_variations as $variation) {
                        $option_value = array();

                        foreach ($variation['attributes'] as $attribute => $term_slug) {
                            $taxonomy = str_replace('attribute_', '', $attribute);
                            $attribute_name = get_taxonomy($taxonomy)->labels->singular_name; // Attribute name
                            $term_name = get_term_by('slug', $term_slug, $taxonomy)->name; // Attribute value term name

                            $option_value[] = $attribute_name . ': ' . $term_name;
                        }
                        $option_value = implode(' | ', $option_value);

                        $output .= '<option value="' . $variation['variation_id'] . '">' . $option_value . '</option>';
                    }
                    $output .= '
                </select>
            </div>';

            echo $output;
        }

Next, the problem I have is that I don't know how when selecting the add to cart button in the drop-down menu, it activates the button, show price and shows the clean button. Once obtained, I will not know for sure if adding to the cart will add the product/variation correctly.

Maybe I could help me...