Display WooCommerce product variations dropdown select on the shop, categories, catalog... pages

functions.php

<?php
/**
* Display WooCommerce product variations dropdown select on the shop, categories, catalog... pages
*	Tested on WordPress 5.8.2 + WooCommerce 5.9.0 + Storefront 3.9.1 + PHP 7.3.11
*
*	Alberto de Vera Sevilla <hola@albertodevera.es>
*/
add_filter( 'woocommerce_loop_add_to_cart_link', function( $html, $product ) {
 
 if ( $product->is_type( 'variable' ) ) {
 
   wp_enqueue_script( 'wc-add-to-cart-variation' );

   $get_variations = count( $product->get_children() ) <= apply_filters( 'woocommerce_ajax_variation_threshold', 30, $product );

   ob_start();
   wc_get_template(
     'single-product/add-to-cart/variable.php',
     [
       'available_variations' => $get_variations ? $product->get_available_variations() : false,
       'attributes'           => $product->get_variation_attributes(),
       'selected_attributes'  => $product->get_default_attributes(),
     ]
   );
   $html = ob_get_clean();
   
   // Override "yourtheme/woocommerce/single-product/add-to-cart/variable.php" template for advanced customizations
   
 }
 
 return $html;
 
}, 10, 2 );

Agreed, would be nice if it added to cart and stayed on the page.

Product image change automatic after adding this code

Exist an update function of this? It Not work now thos. The variation is showed but not is possibile add to cart.