Display Single Product Images on Grouped Product Page in WooCommerce

In WooCommerce, when you use the Grouped Product, it only shows a list of products without their thumbnails on the frontend of your online store. But maybe you want to change that so that it does show the product images along with their names. In this tutorial, We’ll show you an easy way to do this by adding a simple code snippet.

• Default
• After Changes

/**
 * Snippet Name:  Display Single Product Images in Grouped Products in WooCommerce
 * Snippet URL:  wpsnippets.dev
 */

// Hooking a function to display grouped product thumbnails before the product name in WooCommerce
add_action( 'woocommerce_grouped_product_list_before_label', 'wps_custom_woocommerce_grouped_product_thumbnail' );

// Custom function to display grouped product thumbnails
function wps_custom_woocommerce_grouped_product_thumbnail( $product ) {

    // Getting the URL of the product's thumbnail image
    $thumbnail_url = wp_get_attachment_image_src($product->get_image_id(), 'thumbnail', false)[0];
    ?>
    <td class="label">
        //Rendering the thumbnail image
        <img src="<?php echo $thumbnail_url; ?>" />
    </td>
    <?php
}

Code Explanation

• It utilizes a hook woocommerce_grouped_product_list_before_label to attach a custom function wps_custom_woocommerce_grouped_product_thumbnail.
• The function extracts the URL of the product’s thumbnail image using wp_get_attachment_image_src.
• It outputs the thumbnail image within a table cell (<td>) with the class label.
• The image source (<img src>) is set to the render thumbnail URL, ensuring it displays correctly.