Category Text between Product Name – Image (Using Tag)

In this guide, I will guide you how to add Category Text above Product Name, and when clicking these text >> it will open product category page.

Category Text Above Product Name01 Min

There are two options to achieve this: Use Tag – Use Product URL.

In this guide, I will use Tag.

By default, Category does not appear in the Page Source Code, so there is no way to target it, so we need to use Tag.

#1. Suppose you have 3 categories: Test category1, Test category2, Test category 3 with URL

  • shop/test-category2
  • shop/test-category3
  • shop/test-category1

#2. We will create 3 tags with name: Tag1, Tag2, Tag3 and assign them for products

Category Text Above Product Name02 Min

Category Text Above Product Name03 Min

Note: If you know HTML/or Inspect the code, when we added this, Tag will appear in Page Source Code. If you don’t know HTML/Inspect code, you can ignore this note.

Category Text Above Product Name04 Min

#3. Use this code to Code Injection – Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('<a href="/shop/test-category1">Test category1</a>').insertBefore('div.grid-item.tag-tag1 .grid-title');
    $('<a href="/shop/test-category2">Test category2</a>').insertBefore('div.grid-item.tag-tag2 .grid-title');
    $('<a href="/shop/test-category3">Test category3</a>').insertBefore('div.grid-item.tag-tag3 .grid-title');
});
</script>

Category Text Above Product Name05 Min

You can repeat the code for other items.

Result

Category Text Above Product Name06 Min