Display thumbnail of child images in grouped product page

Question

I created a grouped product, each child product has an image but they do not get displayed in on the front. No you only see the product name, price, quantity,...

Is there an easy way to do this? thanks.

Answer 1

Copy the following file:

vendor/magento/module-grouped-product/view/frontend/templates/product/view/type/grouped.phtml

to:

app/design/frontend/Vendor/theme/Magento_GroupedProduct/templates/product/view/type/grouped.phtml

and use the below code for it:

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

// @codingStandardsIgnoreFile

/**
 * Grouped product data template
 *
 * @var $block \Magento\Catalog\Block\Product\View\BaseImage
 * @var $block \Magento\GroupedProduct\Block\Product\View\Type\Grouped
 */
?>
<?php $block->setPreconfiguredValue(); ?>
<?php $_product = $block->getProduct(); ?>
<?php $_associatedProducts = $block->getAssociatedProducts(); ?>
<?php $_hasAssociatedProducts = count($_associatedProducts) > 0; ?>

<?php $objectManager =  \Magento\Framework\App\ObjectManager::getInstance(); ?>
<?php $productRepository = $objectManager->get('\Magento\Catalog\Model\ProductRepository'); ?>

<div class="table-wrapper grouped">
    <table class="table data grouped" id="super-product-table">
        <caption class="table-caption"><?= /* @escapeNotVerified */ __('Grouped product items') ?></caption>
        <thead>
        <tr>
            <th>Image</th>
            <th class="col item" scope="col"><?= /* @escapeNotVerified */ __('Product Name') ?></th>
            <?php if ($_product->isSaleable()): ?>
                <th class="col qty" scope="col"><?= /* @escapeNotVerified */ __('Qty') ?></th>
            <?php endif; ?>
        </tr>
        </thead>

        <?php if ($_hasAssociatedProducts): ?>
        <?php foreach ($_associatedProducts as $_item): ?>
            <?php $childProduct = $productRepository->get($_item->getSku()); ?>
        <tbody>
            <tr>
                <td><img src="<?= $block->getUrl('pub/media/catalog').'product'.$childProduct->getImage() ?>"/></td>
                <td data-th="<?= $block->escapeHtml(__('Product Name')) ?>" class="col item">
                    <strong class="product-item-name"><?= $block->escapeHtml($_item->getName()) ?></strong>
                    <div class="sku"><?= $_item->getSku() ?></div>
                    <?php if ($block->getCanShowProductPrice($_product)): ?>
                        <?php if ($block->getCanShowProductPrice($_item)): ?>
                            <?= /* @escapeNotVerified */ $block->getProductPrice($_item) ?>
                        <?php endif; ?>
                     <?php endif; ?>
                </td>
                <?php if ($_product->isSaleable()): ?>
                <td data-th="<?= $block->escapeHtml(__('Qty')) ?>" class="col qty">
                <?php if ($_item->isSaleable()) : ?>
                    <div class="control qty">
                        <input type="number"
                               name="super_group[<?= /* @escapeNotVerified */ $_item->getId() ?>]"
                               data-selector="super_group[<?= /* @escapeNotVerified */ $_item->getId() ?>]"
                               value="<?= /* @escapeNotVerified */ $_item->getQty() * 1 ?>"
                               title="<?= /* @escapeNotVerified */ __('Qty') ?>"
                               class="input-text qty"
                               data-validate="{'validate-grouped-qty':'#super-product-table'}"
                               data-errors-message-box="#validation-message-box"/>
                    </div>
                <?php else: ?>
                    <div class="stock unavailable" title="<?= /* @escapeNotVerified */ __('Availability') ?>">
                        <span><?= /* @escapeNotVerified */ __('Out of stock') ?></span>
                    </div>
                <?php endif; ?>
                </td>
                <?php endif; ?>
            </tr>
            <?php if ($block->getCanShowProductPrice($_product)
                && $block->getCanShowProductPrice($_item)
                && trim($block->getProductPriceHtml(
                    $_item,
                    \Magento\Catalog\Pricing\Price\TierPrice::PRICE_CODE
                ))): ?>
                <tr class="row-tier-price">
                    <td colspan="2">
                        <?= $block->getProductPriceHtml(
                            $_item,
                            \Magento\Catalog\Pricing\Price\TierPrice::PRICE_CODE
                        ) ?>
                    </td>
                </tr>
            <?php endif; ?>
        </tbody>
        <?php endforeach; ?>
        <?php else: ?>
        <tbody>
            <tr>
                <td class="unavailable"
                    colspan="<?php if ($_product->isSaleable()): ?>4<?php else : ?>3<?php endif; ?>">
                    <?= /* @escapeNotVerified */ __('No options of this product are available.') ?>
                </td>
            </tr>
        </tbody>
        <?php endif; ?>
    </table>
</div>
<div id="validation-message-box"></div>

I have used object manager which is not a good practice. You need to override the block file and then add your code accordingly.