Related products

There is no related-products component, on purpose: the grid is an Etch loop with your own card — the one your catalogue already uses, if you want the two to match. What the plugin adds is the list: {this.fecommerce.related_ids}, WooCommerce's related products for the product being viewed — same categories or tags, visible, and in stock when the shop hides what is not —, up to eight.

1. A loop that takes the ids. Add a WP Query loop with these arguments:

{
  "post_type": "product",
  "post_status": "publish",
  "post__in": "$ids",
  "orderby": "post__in",
  "posts_per_page": "$count ?? 4",
  "ignore_sticky_posts": true
}

$ids has to be the whole argument, as above: Etch hands a list over as a list only then. Written inside a longer text it arrives as text, and post__in cannot use it.

2. In the product template, place the loop and give its $ids the value this.fecommerce.related_ids. Call the loop's item this and a card built for the catalogue works inside it unchanged: its components already read {this.fecommerce.*}.

3. Wrap the section in a condition on this.fecommerce.related_ids. A product with no related products has an empty list, and WordPress reads an empty post__in as «any product» — the condition hides the heading and the grid instead.

The list is only worked out for the product being viewed: inside a loop of cards it is empty, so a listing never pays for a query no card shows. In the builder it is there too, so the section can be styled.

A «View all» link belongs to the product's own category, which is where related products come from. Etch lists every category a product has; which one is the category — «Tshirts», not «Clothing» — is published for every product:

Field	Example
{this.fecommerce.category_name}	Tshirts
{this.fecommerce.category_url}	The category's page
{this.fecommerce.category_id}	34

It is the category the breadcrumb ends in, picked the way WooCommerce picks it — a child before its parent — and woocommerce_breadcrumb_main_term changes both at once.

Hand-picked instead of worked out? {this.fecommerce.upsell_ids} is WooCommerce's «Upsells» — the products the shop chose itself under Product data → Linked products —, already filtered to the ones a shopper can reach. Same loop, same card.