Woocommerce – Displaying variations inside the loop

0 Views
<?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

Read More

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!

Post Views: 0

Related posts

Leave a Reply

3 comments

  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 🙂

  2. The variations dropdown template file for single post pages is located here:
    woocommercetemplatessingle-productadd-to-cartvariable.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.

  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.