Custom related products on shop page

• YorlinqNL

• June 25, 2022 at 3:47 am

I have a WooCommerce shop and want to be able to display custom related products, for each product, on the shop/catalog page.

My setup
I have created a field group with a RELATION field called: product_relations

For each product I have selected several ‘custom related products’ via the product_relations field option on the product page in the backend.

I then created a shortcode to be visible on the shop/catalog page.

I do see output only not the output I would like.

The current output
I only see the LATEST PRODUCT ITSELF instead of its relations (times the number of custom related products I have selected) >> See screenshot

Here’s my code I have so far:

function yl_product_relations_shortcode() {
    global $product;

	$product_relations = get_field('product_relations');

	if ($product_relations) {

		$output .= '<ul class="uk-thumbnav uk-margin-bottom">';

		foreach ($product_relations as $product_relation) {
			$title	= get_the_title($product_relation->ID);
			$image	= get_the_post_thumbnail_url($product_relation->ID);
			$url	= get_the_permalink($product_relation->ID);

			$output .= '<li><a href="' . $url . '" uk-tooltip="' . $title . '"><img src="' . $image . '" class="uk-border-rounded" width="40"></a></li>';
		}

		$output .= '</ul>';

	}

	return $output;

}

add_shortcode('yl_product_relations','yl_product_relations_shortcode');

• YorlinqNL

• June 25, 2022 at 11:49 pm

I removed ->ID and that was a step in the right direction. I now do see the relations but STILL ONLY from the LATEST PRODUCT (see screeny 2).

• YorlinqNL

• June 29, 2022 at 9:24 am

Nobody?

I use the WordPress Cusomizer and I’m using a shortcode to collect te data.

[yl_product_relations]

• hamzakan1

• August 6, 2022 at 9:38 pm

WordPress will set related products to that main product automatically based on tags , category etc. But if you want to add custom related products then this guide have shown a method on how to do it.
Once you open this article scroll down below and there you will see change/add related products. So follow the steps mentioned in this method and in this way you can add custom related products