Search code examples
phpwordpresswoocommercetagswordpress-theming

Woocommerce how to display relevant tags under category title


I want to display meta tags under each category title. I can see there is this code to display product tag lists for each product, but what I really want is product tags for each category and then display it under the category title in the page.

<?php

global $product;

?>

<div class="product-tags">

<?php 

echo wc_get_product_tag_list( $product->get_id(), ', ' ); 

?>

</div>

Example screenshot:

enter image description here


Solution

  • Well, you already know/have the category name (i.e 'Coffee Equipment'), so you could use that to get the relevant tags, but in order to do so, we'll create a function in the functions.php of your active theme, like so:

    The following code goes to your functions.php file of your active theme:

    function your_theme_get_tags_based_on_cat($cat_name)
    {
    
      $cat_id = get_cat_ID($cat_name);
    
      $tag_query = new WP_Query(array(
        'post_type'      => 'product',
        'posts_per_page' => -1,
        'post_status'    => 'publish',
        'tax_query'      => array(
          array(
              'taxonomy'      => 'product_cat',
              'field'         => 'term_id', 
              'terms'         => $cat_id,
              'operator'      => 'IN' 
            )
          )
      ));
    
      $all_tags = array();
    
      while ($tag_query->have_posts()) {
        $tag_query->the_post();
        $producttags = get_the_tags();
        if ($producttags) {
          foreach ((array)$producttags as $tag_obj) {
            $all_tags[] = $tag_obj->term_id . '-' . $tag_obj->name;
          }
        }
      };
    
      $tags_array = array_unique($all_tags);
    
      $new_array = array_map(function ($val) {
        return explode("-", $val);
      }, $tags_array);
    
      return new_array;
    }
    

    The function above will return an associative array containing tag id and tag name of the corresponding tags of your PRODUCT category.

    Side Note:
    if you need to use it for the blog posts of your wordpress site, then you could change/modify the query by swapping 'post_type' => 'product' argument with 'post_type' => 'posts'. So your query for blog posts would be something like this:

    $blog_tag_query = new WP_Query(array('post_type'=>'post','post_status' =>'publish','cat'=>$cat_id,'posts_per_page'=>-1));

    If you decide to use it for your blog posts, also remember to change the get_term_link((int)$tag[0], 'product_tag') with get_term_link((int)$tag[0], 'post_tag') in your template.

    Now you have a magical function :) that you can use anywhere that you need a list of tags for a specific category!

    So let's use our function in your page template to populate the corresponding tags for the current category, like so:

    $cat_name = 'Coffee Equipment';
    
    $tags_array = your_theme_get_tags_based_on_cat($cat_name);
    
    foreach ($tags_array as $tag) 
    {
    echo '<a class="item" href="' . get_term_link((int)$tag[0], 'product_tag') . '">' . $tag[1] . '</a>';
    };
    

    Just tested and it works seamlessly fine! Feel free to customize it as needed on your html template/markup.