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 <[email protected]>
*/
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 );

More compact than the last one I tried to implement. Plus I think Woocommerce made an update, which made the other one not work properly anymore. Thanks for this! Any clue where the settings are to keep the user on the shop page, instead of going to the product page after adding to cart?

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.