Woocommerce - Displaying variations inside the loop - php

Question

<?php
switch ( $product->product_type ) {
case "variable" :
$link = apply_filters( 'variable_add_to_cart_url', get_permalink( $product->id ) );
$label = apply_filters( 'variable_add_to_cart_text', __('Select options', 'woocommerce') );
break;
case "grouped" :
$link = apply_filters( 'grouped_add_to_cart_url', get_permalink( $product->id ) );
$label = apply_filters( 'grouped_add_to_cart_text', __('View options', 'woocommerce') );
break;
case "external" :
$link = apply_filters( 'external_add_to_cart_url', get_permalink( $product->id ) );
$label = apply_filters( 'external_add_to_cart_text', __('Read More', 'woocommerce') );
break;
default :
$link = apply_filters( 'add_to_cart_url', esc_url( $product->add_to_cart_url() ) );
$label = apply_filters( 'add_to_cart_text', __('Add to cart', 'woocommerce') );
break;
}
printf('%s', $link, $product->id, $product->product_type, $label);
?>
I'm trying to get variations to display inside the loop so customers can add variable products to their cart from the shop page (please see screenshot below)...
http://cl.ly/image/42401k0X0X2I
I know I need to include the function-
get_available_variations();
And i'm pretty sure this already returns an array, it's just putting that array into a select dropdown + listing the variations (S,M,L,XL) and having a link to add that variation to the basket.
Cheers!

Answer 1

I found your post while trying to solve the same problem. I finally found...
function woocommerce_variable_add_to_cart() {
global $product;
// Enqueue variation scripts
wp_enqueue_script( 'wc-add-to-cart-variation' );
// Load the template
woocommerce_get_template( 'single-product/add-to-cart/variable.php', array(
'available_variations' => $product->get_available_variations(),
'attributes' => $product->get_variation_attributes(),
'selected_attributes' => $product->get_variation_default_attributes()
) );
}
}
in
woocommerce-template.php
This works for me in loop/add-to-cart.php
switch ( $product->product_type ) {
case "variable" :
$link = apply_filters( 'variable_add_to_cart_url', get_permalink( $product->id ) );
$label = woocommerce_variable_add_to_cart();
break;
Let me know if this helps :)

Answer 2

The variations dropdown template file for single post pages is located here:
woocommerce\templates\single-product\add-to-cart\variable.php
Which requires the following script to pass the product variable information:
<script type="text/javascript">
var product_variations_<?php echo $post->ID; ?> = <?php echo json_encode( $available_variations ) ?>;
</script>
as well as the following hidden field:
<input type="hidden" name="variation_id" value="" /> - where the value is the variation ID
I hope that is a start others can help build upon.

Answer 3

I found on Remi Corson's blog a simple way to do that.
Change the href value of the cart button with the following:
http://example.com/cart/?add-to-cart=[PRODUCT_ID]&variation_id=[VARIATION_ID]&attribute_pa_[ATTRIBUTE_SLUG]=[ATTRIBUTE_SLUG_VALUE]
Example:
http://example.com/cart/?add-to-cart=123&variation_id=456&attribute_pa_colour=black
With the get_available_variations(); function is easy to get the variation values. For the product ID, you can use get_the_ID(); function.