How to add thumbnails to grouped products in WooCommerce

WooCommerce group products is a product type that lets you add some simple products to a single parent product. This allows your visitor to add products from a range (or few ranges), to their cart on the same page instead of jumping between product pages to do so.

The “problem” with these grouped products, however, is that, by default, only the product name and a quantity input box is shown, like so:

Some folks would like to have that show the thumbnails, too! And, you can! The following piece of code will add the thumbnails to grouped products in WooCommerce so that it looks like this:

add_action( 'woocommerce_grouped_product_list_before_price', 'wc_grouped_product_thumbnail' );

function wc_grouped_product_thumbnail( $product ) {
    $image_size = array( 120, 120 );
    $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
}

Cheers!


Was this helpful? Please buy me a coffee






This code should be added to your child theme’s functions.php file or via a plugin that allows custom functions to be added, such as the Code snippets plugin. Please don’t add custom code directly to your parent theme’s functions.php file as this will be wiped entirely when you update.

One thought on “How to add thumbnails to grouped products in WooCommerce

Share your thoughts

Your email address will not be published. Required fields are marked *