Woocommerce Grouped Product Images

Question

I'm trying to include a product thumbail alongside the name and price of grouped products. Currently, one parent product includes 20 or so child (grouped) products, and as default the page only displays the quantity chooser, product name, price and add to cart button at the bottom of the list. All of the products are listed in a big table one under the other, and I want to include an individual product image for each seperate product.

Currently, by editing the /single-product/add-to-cart/grouped.php product file, i've managed to get it to display a small image but only of the main parent product by adding the following in a DIV after the product title php:

<div class="images">

<?php if ( has_post_thumbnail( $post_id ) ) { ?>

<a itemprop="image" href="<?php echo wp_get_attachment_url( get_post_thumbnail_id( $post_id ) ); ?>" class="zoom" rel="thumbnails" title="<?php echo get_the_title( get_post_thumbnail_id( $post_id ) ); ?>"><?php echo get_the_post_thumbnail( $post_id, apply_filters( 'grouped_product_large_thumbnail_size', 'shop_thumbnail' ), array( 
'title' => get_the_title( get_post_thumbnail_id( $post_id ) ), 
) ); ?></a>

<?php } ?>

</div>

I know this code is only copied from the bundled product image, but it's the closest i've got. You can see the example of what I mean here:

http://hallmark.digitalstorm.co.uk/product/luxor-custom-built-arrangement/

Any help would be really appreciated, as i know i must be really close.

Answer 1

For Woocommerce 2.6 and above (update $product to use data stores):

add_action( 'woocommerce_grouped_product_list_before_price','woocommerce_grouped_product_thumbnail');

function woocommerce_grouped_product_thumbnail( $product ) {
$image_size = array( 100, 100 );  // array( width, height ) image size in pixel
$attachment_id = get_post_meta( $product->get_id(), '_thumbnail_id', true );
$link = get_the_permalink($product->get_id());
?>
<td class="label">
    <a href="<?php echo $link; ?>" > <?php echo 
wp_get_attachment_image($attachment_id, $image_size ); ?> </a>
</td>
<?php
}

Answer 2

Here is the code you are looking for:

add_action( 'woocommerce_grouped_product_list_before_price', 'woocommerce_grouped_product_thumbnail' );

function woocommerce_grouped_product_thumbnail( $product ) {
    $image_size = array( 20, 20 );  // array( width, height ) image size in pixel 
    $attachment_id = get_post_meta( $product->id, '_thumbnail_id', true );
    ?>
    <td class="label">
        <?php echo wp_get_attachment_image( $attachment_id, $image_size ); ?>
    </td>
    <?php
}

Hope this will be useful.

Answer 3

Fantastic code by @Ratnakar - Store Apps

For those who try to add the product link to the image I added a "link" wrap to the image so it will result Image + Link to product

$link = get_the_permalink($product->id);

and

<a href="<?php echo $link; ?>" > <?php echo wp_get_attachment_image( $attachment_id, $image_size ); ?> </a>

Final:

add_action( 'woocommerce_grouped_product_list_before_price', 'woocommerce_grouped_product_thumbnail' );

function woocommerce_grouped_product_thumbnail( $product ) {
    $image_size = array( 100, 100 );  // array( width, height ) image size in pixel 
    $attachment_id = get_post_meta( $product->id, '_thumbnail_id', true );
    $link = get_the_permalink($product->id);
    ?>
    <td class="label">
        <a href="<?php echo $link; ?>" > <?php echo wp_get_attachment_image( $attachment_id, $image_size ); ?> </a>
    </td>
    <?php
}