To achieve this just follow the guidelines as described below.
Create a custom module at below location
Magento_root/app/code/{Vendor}/{ModuleName}
Create below file into your module as per there locations given here.
- registration.php
- etc/module.xml
- etc/view.xml
- etc/di.xml
- view/frontend/templates/product/view/type/grouped.phtml
- view/frontend/layout/catalog_product_view_type_grouped.xml
- Model/Product/Type/Grouped.php
Now put below code into the respective files I am not putting here content of registraton.php & module.xml as because it might be well understood to you or you can get it from any where.
view.xml
<?xml version="1.0"?>
<view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/view.xsd">
<media>
<images module="Magento_Catalog">
<image id="product_page_image_group_product" type="thumbnail">
<width>100</width>
<height>100</height>
</image>
</images>
</media>
</view>
di.xml
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
<preference for="\Magento\GroupedProduct\Model\Product\Type\Grouped" type="{Vendor}\{ModuleName}\Model\Product\Type\Grouped" />
</config>
grouped.phtml
<?php $block->setPreconfiguredValue(); ?>
<?php $_product = $block->getProduct(); ?>
<?php $_associatedProducts = $block->getAssociatedProducts(); ?>
<?php $_hasAssociatedProducts = count($_associatedProducts) > 0; ?>
<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 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): ?>
<tbody>
<tr>
<?php /* code for image thumbnail start */?>
<?php
$imageUrl = $this->helper('Magento\Catalog\Helper\Image')->init($_item, 'product_page_image_group_product')
->setImageFile($_item->getThumbnail())->getUrl();
?>
<td><div class="group-img-<?php echo $_item->getEntityId(); ?>" data-role="group-image" data-product-id="<?php echo $_item->getEntityId(); ?>"><img src="<?php echo $imageUrl; ?>"></div></td>
<?php /* code for image thumbnail end */?>
<td data-th="<?= $block->escapeHtml(__('Product Name')) ?>" class="col item">
<strong class="product-item-name"><?= $block->escapeHtml($_item->getName()) ?></strong>
<?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>
<script type="text/x-magento-init">
{
"[data-role=group-image]": {
"Webindiainc_Groupedproduct/js/group-image-renderer": {
"jsongroupimageConfig": "<?php echo $_item->getEntityId() ?>",
"mediaCallback": "<?= /* @escapeNotVerified */ $block->getMediaCallback() ?>"
}
}
}
</script>
catalog_product_view_type_grouped.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceContainer name="product.info.form.content">
<block class="Magento\GroupedProduct\Block\Product\View\Type\Grouped" name="product.info.grouped" before="product.info.addtocart" template="{Vendor}_{ModuleName}::product/view/type/grouped.phtml"/>
</referenceContainer>
</body>
</page>
Grouped.php
<?php
namespace {Vendor}\{ModuleName}\Model\Product\Type;
use Magento\Catalog\Api\ProductRepositoryInterface;
class Grouped extends \Magento\GroupedProduct\Model\Product\Type\Grouped
{
/**
* Retrieve array of associated products
*
* @param \Magento\Catalog\Model\Product $product
* @return array
*/
public function getAssociatedProducts($product)
{
if (!$product->hasData($this->_keyAssociatedProducts)) {
$associatedProducts = [];
$this->setSaleableStatus($product);
$collection = $this->getAssociatedProductCollection(
$product
)->addAttributeToSelect(
['name', 'price', 'special_price', 'special_from_date', 'special_to_date', 'tax_class_id', 'thumbnail']
)->addFilterByRequiredOptions()->setPositionOrder()->addStoreFilter(
$this->getStoreFilter($product)
)->addAttributeToFilter(
'status',
['in' => $this->getStatusFilters($product)]
);
foreach ($collection as $item) {
$associatedProducts[] = $item;
}
$product->setData($this->_keyAssociatedProducts, $associatedProducts);
}
return $product->getData($this->_keyAssociatedProducts);
}
}
?>
Note: After completing with this stuff just do run below commands.
php bin/magento module:enable {Vendor}_{ModuleName}
php bin/magento setup:upgrade
php bin/magento setup-static-content:deploy
