Home Forums Front-end Issues Custom related products on shop page


Custom related products on shop page

  • 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

    Current output

    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;
  • 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).

    Current view

  • Nobody?

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


  • 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

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.