How to add categories under Product Name on Shop Page

[tuanphan]

To add categories under Product Name on Shop Page, like this.

#1. First, use this code to Custom CSS

a.product-category-link {
    border: 1px solid #000;
    padding: 10px 20px;
    margin-right: 10px;
    border-radius: 50px;
    font-size: 14px;
}

#2. Next, use this code to Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function() {
    function fetchAndDisplayCategories() {
        var productItems = $('.product-list-item');
        
        if (productItems.length > 0) {
            processItems(productItems);
        }
        
        function processItems(items) {
            var itemCount = items.length;
            var batchSize = 3;
            var delay = 600;
            
            function processBatch(startIndex) {
                var endIndex = Math.min(startIndex + batchSize, itemCount);
                
                for (var i = startIndex; i < endIndex; i++) {
                    (function(index) {
                        var currentItem = $(items[index]);
                        var link = currentItem.find('a.product-list-item-link');
                        var targetElement = currentItem.find('.product-list-item-title');
                        
                        var href = link.attr('href');
                        
                        if (href && link.length && targetElement.length > 0 && targetElement.next('.product-categories').length === 0) {
                            var cacheParam = '?format=json-pretty&nocache=' + new Date().getTime() + Math.random();
                            
                            $.ajax({
                                url: href + cacheParam,
                                dataType: "json",
                                success: function(data) {
                                    console.log('Got data for:', href);
                                    
                                    const item = data.item;
                                    const nestedCategories = data.nestedCategories;
                                    
                                    if (item && item.categoryIds && nestedCategories && nestedCategories.itemCategories) {
                                        var $categoriesContainer = $('<div class="product-categories"></div>');
                                        
                                        item.categoryIds.forEach(function(categoryId) {
                                            const category = nestedCategories.itemCategories.find(function(cat) {
                                                return cat.id === categoryId;
                                            });
                                            
                                            if (category) {
                                                var $categoryLink = $('<a class="product-category-link"></a>')
                                                    .attr('href', category.fullUrl)
                                                    .text(category.displayName);
                                                
                                                $categoriesContainer.append($categoryLink);
                                            }
                                        });
                                        
                                        if ($categoriesContainer.children().length > 0 && targetElement.next('.product-categories').length === 0) {
                                            targetElement.after($categoriesContainer);
                                            console.log('Categories added for:', href);
                                        }
                                    }
                                },
                                error: function(xhr, status, error) {
                                    console.log('Failed to fetch data from:', href, error);
                                }
                            });
                        }
                    })(i);
                }
                
                if (endIndex < itemCount) {
                    setTimeout(function() {
                        processBatch(endIndex);
                    }, delay);
                }
            }
            
            processBatch(0);
        }
    }
    
    setTimeout(function() {
        fetchAndDisplayCategories();
    }, 1500);
    
    var observer = new MutationObserver(function(mutations) {
        var shouldProcess = false;
        mutations.forEach(function(mutation) {
            if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
                for (var i = 0; i < mutation.addedNodes.length; i++) {
                    var node = mutation.addedNodes[i];
                    if (node.nodeType === 1) {
                        if ($(node).find('.product-list-item').length > 0) {
                            shouldProcess = true;
                            break;
                        }
                    }
                }
            }
        });
        
        if (shouldProcess) {
            setTimeout(function() {
                fetchAndDisplayCategories();
            }, 1000);
        }
    });
    
    observer.observe(document.body, {
        childList: true,
        subtree: true
    });
});
</script>