WooCommerce product categories are hierarchical by nature (parent → child → sub-child). However, WooCommerce does not provide a clean tree-style category output by default unless you use widgets or third-party plugins.
In this blog, you’ll learn multiple methods to display WooCommerce product categories in a hierarchical tree format using pure PHP and WordPress functions—no plugin required.
Why Use a Hierarchical Category Tree?
Displaying product categories in a tree structure helps:
- Improve user navigation
- Increase product discoverability
- Enhance SEO internal linking
- Keep layouts clean in sidebars, filters, or menus
Method 1: Using wp_list_categories() (Easiest Way)
WordPress already supports hierarchical taxonomies, and WooCommerce product categories use the product_cat taxonomy.
Basic Hierarchical Category Tree
<?php wp_list_categories( array(
'taxonomy' => 'product_cat',
'title_li' => '',
'hierarchical' => true,
'show_count' => true,
'hide_empty' => true,
) ); ?>
Method 2: Custom Recursive Category Tree (Full Control)
If you want complete control over HTML structure, classes, or styling, use a recursive function.
function display_woocommerce_categories_styled() {
// Helper: Get total count including children
function tp_total_product_count($term_id) {
$taxonomy = 'product_cat';
$children = get_term_children($term_id, $taxonomy);
if (is_wp_error($children)) $children = [];
$all_ids = array_merge([$term_id], $children);
$total = 0;
foreach ($all_ids as $id) {
$term = get_term($id, $taxonomy);
if ($term && !is_wp_error($term)) {
$total += (int) $term->count;
}
}
return $total;
}
// Recursive renderer
function tp_render_cat_tree($parent_id) {
$terms = get_terms([
'taxonomy' => 'product_cat',
'hide_empty' => false,
'parent' => $parent_id,
'orderby' => 'term_order',
'order' => 'ASC',
]);
if (empty($terms) || is_wp_error($terms)) return '';
$html = '<ul class="children">';
$has_visible_items = false;
foreach ($terms as $term) {
$count = tp_total_product_count($term->term_id);
// Skip empty categories
if ($count <= 0) continue;
$has_visible_items = true;
$html .= '<li class="cat-item cat-item-' . esc_attr($term->term_id) . '">';
$html .= '<a href="' . esc_url(get_term_link($term)) . '">' . esc_html($term->name) . '</a> (' . intval($count) . ')';
$html .= tp_render_cat_tree($term->term_id);
$html .= '</li>';
}
$html .= '</ul>';
// Return empty string if NO visible children remain
return $has_visible_items ? $html : '';
}
// Top level terms
$top_terms = get_terms([
'taxonomy' => 'product_cat',
'hide_empty' => false,
'parent' => 0,
'orderby' => 'term_order',
'order' => 'ASC',
]);
if (empty($top_terms) || is_wp_error($top_terms)) return '';
$output = '<div class="wc-cat-wrapper"><ul class="wc-cat-list">';
foreach ($top_terms as $term) {
$count = tp_total_product_count($term->term_id);
// Skip if top-level category also has no products
if ($count <= 0) continue;
$output .= '<li class="cat-item cat-item-' . esc_attr($term->term_id) . '">';
$output .= '<a href="' . esc_url(get_term_link($term)) . '">' . esc_html($term->name) . '</a> (' . intval($count) . ')';
$output .= tp_render_cat_tree($term->term_id);
$output .= '</li>';
}
$output .= '</ul></div>';
return $output;
}
add_shortcode('wc_categories', 'display_woocommerce_categories_styled');
How to Use the Shortcode in Divi, Elementor, or Theme Templates
If you are using Divi or Elementor, simply add a Code widget to your page and paste the following shortcode:
[wc_categories]
If you are using a template-based approach (such as a custom theme file or child theme), place the shortcode directly inside your template using PHP:
<?php echo do_shortcode('[wc_categories]');?>
This will render the WooCommerce product categories in a hierarchical tree format wherever the shortcode is placed.
Final Thoughts
Displaying WooCommerce product categories in a hierarchical tree format without plugins gives you:
- Better performance
- Full design control
- Cleaner HTML
- Improved SEO
Whether you use the built-in WordPress function or a custom recursive solution, both approaches are lightweight and scalable for any WooCommerce store.
Looking to level up your WooCommerce store with advanced customizations?
Our white‑label WordPress development team at TechnoCrackers can build it right—reach out now!
