Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

list of the children of a Woocommerce Grouped product ( with the Product picture,name and price ) WordPress

  • SOLVED

I'm trying to create a simple list of the children of a Woocommerce Grouped product with the prices, the product picture and the name next to the Grouped product picture on the shop page. ( like in the screenshot in the description ).

Image url: https://ibb.co/FssN7J7

Answers (3)

2021-07-12

woomatrix answers:

looks like there's some issue with image attachment on this site. can you share screenshot url ?


User184764 comments:

OF course here: https://ibb.co/FssN7J7


woomatrix comments:

Try this code

add_action('woocommerce_after_shop_loop_item_title', 'custom_add_text_on_shop_page');

function custom_add_text_on_shop_page() {
global $product;

$product_type = $product->get_type();
$product_id = $product->get_id();

?>
<table>

<?php

if ( $product_type == "grouped") {
$child_products = $product->get_children();
foreach ($child_products as $pid) {
$_product = wc_get_product($pid);
$price = $_product->get_price();
?>
<tr>

<td>
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $pid ), 'thumbnail' );?>

<img style="height:50px; width:50px;" src="<?php echo $image[0]; ?>" data-id="<?php echo $loop->post->ID; ?>">
</td>

<td>
<?php echo get_the_title( $pid ); ?><br>
<?php echo wc_price($price); ?>
</td>
</tr>

<?php
}
}
?>
</table>
<?php
}


You may use https://wordpress.org/plugins/code-snippets/ plugin to inject any extra php code.


woomatrix comments:

in place of woocommerce_after_shop_loop_item_title hook you can also use below given hooks

woocommerce_before_shop_loop_item_title
woocommerce_after_shop_loop_item


woomatrix comments:

please remove data-id="<?php echo $loop->post->ID; ?>" from above code . it will give debug error. instead use data-id="<?php echo $pid; ?>"


User184764 comments:

thanks works amazing

2021-07-12

Arnav Joy answers:

I also can't see the attached screenshot.


User184764 comments:

Here is the image url:https://ibb.co/FssN7J7

2021-07-12

Monit Jadhav answers:

Cant see the attachment