How to Add Thumbnails to WooCommerce's Grouped Products

Blog

Posted by Nuno Marques on 31 Aug 2019

The Problem

You need to display a list of chosen products (grouped products) on a single product page in your WooCommerce online shop.

The Solution

This simple yet functional solution allows you to show thumbnail images for each product listed without navigating away from the page.

Add the following code to your functions.php child theme file:

add_action( 'woocommerce_grouped_product_list_before_quantity', 'woocommerce_grouped_product_thumbnail' );

function woocommerce_grouped_product_thumbnail( $product ) {
    $attachment_url = wp_get_attachment_image_src($product->get_image_id(), 'thumbnail', false)[0];
    ?>
    <td class="woocommerce-grouped-product-list-item__image">
        <img src="<?php echo $attachment_url; ?>" />
    </td>
    <?php
}

Bonus Tip

To display all variations of a variable product, replace the line #15 in the file woocommerce/includes/admin/meta-boxes/views/html-product-data-linked-products.php. Replace the attribute data-action with woocommerce_json_search_products_and_variations.

Update line #15 to: data-action="woocommerce_json_search_products_and_variations"

Note: Modifying core WooCommerce files may require permanent overrides to avoid conflicts during updates. If you have an alternative solution, feel free to share it.

This post was tagged in: