Woocommerce Category add to cart btns + qantity btns for variable product

code.php

add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_single_add_to_cart', 10 );

/* In woocommerce/single-product/add-to-cart/variable.php file use "radio button" insead of "Select" tag
 * Style the radio button with their "lable" to create "Switch" UI element.
 * Something like that: */


$unique_id = twentytwenty_unique_id();
$unique_id = 'product_variations_div'. ($unique_id * rand(1, 999999));
$terms = wc_get_product_terms(
  $product->get_id(),
  $attribute_name,
  array(
    'fields' => 'all',
  )
);
//var_dump($terms);

$attributes = $product->get_variation_attributes();

$_options    = $attributes[ $attribute_name ];
$args['selected'] = false;

// Get selected value.
if ( $attribute_name && $product instanceof WC_Product ) {
  $selected_key     = 'attribute_' . sanitize_title( $attribute_name );
  $args['selected'] = isset( $_REQUEST[ $selected_key ] ) ? wc_clean( wp_unslash( $_REQUEST[ $selected_key ] ) ) : ''; // WPCS: input var ok, CSRF ok, sanitization ok.
}


if ( $product && taxonomy_exists( $attribute_name ) ) {
  foreach ($terms as $key => $term) {
    if ($key == 0 && ! $args['selected']) {
      $args['selected'] = $term->slug;
    }
    if (in_array($term->slug, $_options, true)) {
      echo '<label>'.esc_html(apply_filters('woocommerce_variation_option_name', $term->name, $term, $attribute_name, $product)).'<input type="radio" name="attribute_'.sanitize_title($attribute_name).'" id="'.$unique_id.'_product_'.$product->get_id().'_'.esc_attr($term->slug).'" value="'.esc_attr($term->slug).'" '.checked(sanitize_title($args['selected']), $term->slug, false).'></label>';
    }
  }
} else {
  foreach ($_options as $key => $option) {
    if ($key == 0 && ! $args['selected']) {
      $args['selected'] = $option;
    }

    echo '<label>'.esc_html(apply_filters('woocommerce_variation_option_name', $option, null, $attribute_name, $product)).'<input type="radio" name="attribute_'.sanitize_title($attribute_name).'" value="'.esc_attr($option).'" '.checked(sanitize_title($args['selected']), sanitize_title($option), false).'></label>';
  }
}

?>

<div class="screen-reader-text">
  <label>
    <?php echo wc_attribute_label( $attribute_name ); // WPCS: XSS ok. ?>
    <?php
    wc_dropdown_variation_attribute_options(
      array(
        'options'   => $options,
        'attribute' => $attribute_name,
        'product'   => $product,
        'class' => 'screen-reader-text select-variation',
        'selected' => $args['selected']
      )
    ); ?>
  </label>
</div>

<?php echo end( $attribute_keys ) === $attribute_name ? wp_kses_post( apply_filters( 'woocommerce_reset_variations_link', '<a class="reset_variations d-none" href="#">' . esc_html__( 'Clear', 'woocommerce' ) . '</a>' ) ) : '';

Thanks for sharing this code.
What's the twentytwenty_unique_id(); function?
Am I correct in thinking the code in this Gist is only compatible with WC sites using the twentytwenty theme?

It's a function I forgot to exclude from my code. It creates an uniq id for the element.