Woocommerce Grouped Product Images

1 Views

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:

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

Post Views: 1

Related posts

Leave a Reply

3 comments

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

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

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