Show Variations on the Shop Page in WooCommerce

WooCommerce variations are hidden until you enable them. We are enabling product variations to show on the shop pages. Here we want to remove add to cart buttons in the loop and replace them with our code. This code will add the variable product attribute dropdowns into the WooCommerce shop page. This code used in functions.php.

Code is:

function ideal_change_loop_add_to_cart() {
remove_action( ‘woocommerce_after_shop_loop_item’, ‘woocommerce_template_loop_add_to_cart’, 10 );
add_action( ‘woocommerce_after_shop_loop_item’, ‘ideal_template_loop_add_to_cart’, 10 );
}

add_action( ‘init’, ‘ideal_change_loop_add_to_cart’, 10 );

/**
* Use single add to cart button for variable products.
*/
function ideal_template_loop_add_to_cart() {
global $product;

if ( ! $product->is_type( ‘variable’ ) ) {
woocommerce_template_loop_add_to_cart();
return;
}

remove_action( ‘woocommerce_single_variation’, ‘woocommerce_single_variation_add_to_cart_button’, 20 );
add_action( ‘woocommerce_single_variation’, ‘ideal_loop_variation_add_to_cart_button’, 20 );

woocommerce_template_single_add_to_cart();
}

/**
* Customise variable add to cart button for loop.
*
* Remove qty selector and simplify.
*/
function ideal_loop_variation_add_to_cart_button() {
global $product;

?>
<div class=”woocommerce-variation-add-to-cart variations_button”>
<button type=”submit” class=”single_add_to_cart_button button”>single_add_to_cart_text() ); ?></button>
<input type=”hidden” name=”add-to-cart” value=”get_id() ); ?>” />
<input type=”hidden” name=”product_id” value=”get_id() ); ?>” />
<input type=”hidden” name=”variation_id” class=”variation_id” value=”0″ />
</div>
<?php
}