How to display product variation selection in woocommerce catalog?

Question

WordPress

Hello everyone, please tell me how to display product variations in the catalog and the ability to add the selected variation to the cart. Do not scold me too much, I'm a beginner (
The product page uses this code in the form.

<?php wc_dropdown_variation_attribute_options([ 'options' =>'', 'attribute' => 'pa_testo', 'product' => $product, 'selected' => '', 'show_option_none' => '-', 'class' => 'w-select' ]); ?>

If you put it in a form in the catalog, then variations are displayed, but adding to the cart breaks down, stops adding products, or rather you poke at any product, but adds the first product from the general list all the time
. Here is the code that I try to use in the catalog, it is the same as and on the product page:

<div class="hidden_form w-form">
    <form id="add_to_cart_<?php echo get_the_ID() ?>" name="add_to_cart"
        data-name="add_to_cart" class="form" data-action="add_to_cart"
        action="/index.php"
        data-product-id='<?php $product = get_product(get_the_ID()); if($product->product_type === "variable"){ echo($product->get_available_variations()[0]["variation_id"]); } else { echo($product->id); } ?>'
        data-product_id="<?php the_ID(); ?>">
        <div class="div-block-122 w-clearfix">
                            <?php wc_dropdown_variation_attribute_options([ 'options' =>'', 'attribute' => 'pa_testo', 'product' => $product, 'selected' => '', 'show_option_none' => '-', 'class' => 'w-select' ]); ?>
<a href="#" class="button-7 w-button"
                data-action="product_qty_minus">-</a>
            <input type="text" class="text-field-2 w-input" maxlength="256" name="qty"
                data-name="qty" placeholder="" id="qty<?php echo get_the_ID() ?>"
                data-action="product_qty"
                value="<?php $min_qty = get_field('qty_min'); echo($min_qty ? $min_qty : 1); ?>"
                data-qty-min="<?php $min_qty = get_field('qty_min'); echo($min_qty ? $min_qty : 1); ?>"
                data-qty-max="<?php $min_qty = $product->get_stock_quantity() ? $product->get_stock_quantity() : get_field('qty_max'); echo($min_qty ? $min_qty : 0); ?>"
                data-qty-step="<?php $min_qty = get_field('qty_step'); echo($min_qty ? $min_qty : 1); ?>"><a
                href="#" class="button-7 w-button" data-action="product_qty_plus">+</a>
            <input onClick="ym(68400208,'reachGoal','addcart');" type="submit"
                value="В корзину" data-wait="Please wait..."
                class="button_cart-2 w-button">
        </div>
    </form>
    <div class="success-message-2 w-form-done">
        <div>Товар добавлен в <a href="/cart" class="link-2">корзину</a>!</div>
    </div>
    <div class="w-form-fail">
        <div>Выберите параметр.</div>
    </div>
</div>