How to Add Thumbnails to WooCommerce's Grouped Products
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.