Woocommerce - Displaying variations inside the loop

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('<a href="%s" rel="nofollow" data-product_id="%s" class="add_to_cart_button button product_type_%s">%s</a>', $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

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 2

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 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.