Display Individual Product Images in Grouped Product

This topic has 6 replies, 2 voices, and was last updated 2 months, 1 weeks ago ago by Jonathan

  • Avatar: Jonathan
    Jonathan
    Participant
    September 26, 2025 at 09:48

    Hello XStore Team,

    I’m having an issue on my WooCommerce store. I would like to display the images of the individual products that are part of a grouped product on the single product page.

    I’ve tried adding custom code to my functions.php file, but it doesn’t seem to work. I’m wondering if the grouped product section is being handled or overridden by the XStore theme or by Elementor.

    Could you please let me know if XStore provides a built-in way to show product images in grouped products, or share a code snippet that would help me display them?

    Thank you in advance for your support!

    Files is visible for topic creator and
    support staff only.
    5 Answers
    Avatar: Justin
    Luca Rossi
    Support staff
    September 26, 2025 at 12:06

    Dear @Jonathan,

    Could you please provide temporary wp-admin access? We need to check your settings.

    To grant WP-Admin access, please proceed to create a new user account with an administrator role through your WordPress Dashboard. Once the account is established, you may securely transmit the username and password to us via the Private Content section designated for this purpose.

    Thank you!

    Avatar: Jonathan
    Jonathan
    Participant
    September 26, 2025 at 14:55

    Of course. Here’s the login information. Thank you.

    Please contact administrator
    for this information.
    Avatar: Justin
    Luca Rossi
    Support staff
    September 27, 2025 at 12:41

    Dear @Jonathan,

    After reviewing the source code, we found that there is no existing hook available to add the product image to a grouped product.

    However, you can achieve this by overriding the template file in your child theme. Please copy the following file from the WooCommerce plugin to your child theme, maintaining the same directory structure:

    – Plugin: /wp-content/plugins/woocommerce/templates/single-product/add-to-cart/grouped.php
    – Child theme: /wp-content/themes/xstore-child/woocommerce/single-product/add-to-cart/grouped.php

    Once copied, you can insert the custom code (https://developer.wordpress.org/reference/functions/get_the_post_thumbnail/) around lines 105–107, in the following section:

    
    							$value  = '<label for="product-' . esc_attr( $grouped_product_child->get_id() ) . '">';
    							$value .= $grouped_product_child->is_visible() ? '<a href="' . esc_url( apply_filters( 'woocommerce_grouped_product_list_link', $grouped_product_child->get_permalink(), $grouped_product_child->get_id() ) ) . '">' . $grouped_product_child->get_name() . '</a>' : $grouped_product_child->get_name();
    							$value .= '</label>';
    

    We hope this information is helpful.

    Best regards,
    8Theme Team

    Avatar: Jonathan
    Jonathan
    Participant
    September 27, 2025 at 12:56

    Thank you very much, guys, but I finally managed to get it working after trying in several different ways, using a bit of code in the functions.php file:

    // Añade la miniatura al lado izquierdo del título en la tabla de productos agrupados
    add_filter( 'woocommerce_grouped_product_list_column_label', function ( $label, $product ) {
    
        if ( ! $product || ! is_a( $product, 'WC_Product' ) ) {
            return $label;
        }
    
        $product_id = $product->get_id();
    
        // Miniatura (o placeholder si no hay imagen)
        $thumb_html = get_the_post_thumbnail(
            $product_id,
            'woocommerce_thumbnail',
            [ 'class' => 'grouped-thumb' ]
        );
        if ( ! $thumb_html ) {
            $thumb_html = wc_placeholder_img( 'woocommerce_thumbnail' );
        }
    
        // Enlace a la ficha del producto
        $thumb_linked = sprintf(
            '<a class="grouped-thumb__link" href="%s" aria-label="%s">%s</a>',
            esc_url( get_permalink( $product_id ) ),
            esc_attr( $product->get_name() ),
            $thumb_html
        );
    
        // Estructura: imagen + texto del label
        $new = sprintf(
            '<div class="grouped-label-with-thumb">%s<div class="grouped-label-text">%s</div></div>',
            $thumb_linked,
            $label
        );
    
        return $new;
    }, 10, 2 );

    And here’s the CSS code:

    /* Estilos para la miniatura en la tabla de agrupados */
    .woocommerce .woocommerce-grouped-product-list .grouped-label-with-thumb{
      display:flex; align-items:center; gap:12px;
    }
    .woocommerce .woocommerce-grouped-product-list .grouped-thumb{
      width:48px; height:auto; border-radius:6px; display:block;
    }
    @media (min-width: 768px){
      .woocommerce .woocommerce-grouped-product-list .grouped-thumb{ width:56px; }
    }

    I hope this will be helpful for anyone who might need it in the future.
    Best regards!

    Files is visible for topic creator and
    support staff only.
    Avatar: Jonathan
    Jonathan
    Participant
    September 27, 2025 at 12:56

    Thanks for the support! My topic “Display Individual Product Images in Grouped Product” has been successfully resolved.

  • Viewing 6 results - 1 through 6 (of 6 total)

The issue related to '‘Display Individual Product Images in Grouped Product’' has been successfully resolved, and the topic is now closed for further responses

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.