How to display the name of the categories in the product card structurally?

Question

WordPress

By default, categories are displayed in the card separated by commas.
Categories : Home, Computer, Work , Cat
In the form of a vinaigrette. I have been looking for an answer for a long time how to display it structurally
Work >> Computer
Home>> Cat
I have a lot of the same categories by name
and when it is in the form of a vinaigrette it is not clear where exactly I am going.
Now I have this output code (this is in content-product.php)

<?php
        $product_categories = get_the_terms( $post->ID, 'product_cat' );
        if (!empty($product_categories)) :
          foreach ($product_categories as $key=>$product_category) :
            ?>
          <a href="<?php echo get_term_link($product_category); ?>">
                                         <?php echo esc_attr($product_category->name); ?></a>
            <?php if ($key+1 < count($product_categories)) echo ',';?>
          <?php endforeach; ?>
        <?php endif; ?>

That is, there is a cycle, but as I understand it, it includes all categories and subcategories and is separated by commas.
For a long time I mulled over the basics of deriving my own functions and arguments, but I didn’t really come to anything.
Maybe someone knows from such an implementation? This conclusion is much more convenient.
Thanks in advance.

Answer 1

Yes, the code that you showed, and displays a vinaigrette for you. And this vinaigrette includes all the categories to which your post (product) is connected.
I think that in order to get structure you need to build a hierarchy for each category. Moreover, it may happen that your product is included in the parent category, in the descendant category (3rd generation), but not in the child category. Then it turns out you need to exclude the missing child category from the structure.

For example, you can create a hierarchy like this

/**
* Собирает родословную в строку [предок-родитель-потомок] или
* в массив ([0]=>предок,[1]=>родитель,[2]=>потомок) проверяя наличие id
* @param array $ids - массив типа id=>parent_id, на основании которого
* 						собирается родословная
* @param number $id - для кого строится родостловная, он же потомок
* @param string $divider - символ разделитель, если пусто cобирать в массив
* @return
*/
function create_hierarchical_path($ids, $id, $divider = ''){
  if ('' !== $divider){	//собираем строку
    $result = $id;
    while(isset($ids[$id]) && $ids[$id] != 0){
      $result = $ids[$id].$divider.$result;
      $id = $ids[$id];
    }
  }
  else {					// собираем массив
    $result = array();
    array_push ($result, $id);
    while(isset($ids[$id]) && $ids[$id] != 0){
      $id = $ids[$id];
      array_push ($result, $id);
    }
    $result = array_reverse($result);
  }
  return $result;
}

You can get a list of all categories like this

$args = array(
    'taxonomy'=>'product_cat',
    'hide_empty'=>0,
    'fields'=>'id=>parent'	);
  // получаем список всех категорий
  $ids = get_terms('product_cat', $args);

Now, having a pedigree and a list of all categories, you can create the structure you need