Step 1: Create the Shortcode
Add the following code to your theme’s functions.php
file or a custom plugin:
// Function to display WooCommerce categories list with parent-child hierarchy
function display_woocommerce_categories_hierarchy_shortcode($atts) {
// Extract shortcode attributes
$atts = shortcode_atts(array(
'orderby' => 'name', // Order by name
'order' => 'ASC', // Ascending order
'hide_empty' => 1, // Hide empty categories
'show_count' => 0, // Show product count
), $atts, 'woocommerce_categories_hierarchy');
// Get the WooCommerce categories
$args = array(
'taxonomy' => 'product_cat',
'orderby' => $atts['orderby'],
'order' => $atts['order'],
'hide_empty' => $atts['hide_empty'],
'parent' => 0 // Only get parent categories
);
$categories = get_terms($args);
// Initialize output
$output = '<ul class="woocommerce-categories-hierarchy">';
// Function to display child categories recursively
function display_child_categories($parent_id, $atts) {
$args = array(
'taxonomy' => 'product_cat',
'orderby' => $atts['orderby'],
'order' => $atts['order'],
'hide_empty' => $atts['hide_empty'],
'parent' => $parent_id
);
$child_categories = get_terms($args);
if ($child_categories) {
$output = '<ul class="child-categories">';
foreach ($child_categories as $child_category) {
$output .= '<li>';
$output .= '<a href="' . esc_url(get_term_link($child_category)) . '">' . esc_html($child_category->name) . '</a>';
if ($atts['show_count']) {
$output .= ' (' . $child_category->count . ')';
}
$output .= display_child_categories($child_category->term_id, $atts); // Recursive call
$output .= '</li>';
}
$output .= '</ul>';
return $output;
}
return '';
}
// Loop through parent categories and generate list items
foreach ($categories as $category) {
$output .= '<li>';
$output .= '<a href="' . esc_url(get_term_link($category)) . '">' . esc_html($category->name) . '</a>';
if ($atts['show_count']) {
$output .= ' (' . $category->count . ')';
}
$output .= display_child_categories($category->term_id, $atts);
$output .= '</li>';
}
// Close the list
$output .= '</ul>';
// Return the output
return $output;
}
add_shortcode('woocommerce_categories_hierarchy', 'display_woocommerce_categories_hierarchy_shortcode');
Step 2: Usage of Shortcode
[woocommerce_categories_hierarchy]
[woocommerce_categories_hierarchy orderby="count" order="DESC" show_count="1"]
[woocommerce_categories_hierarchy hide_empty="0"]
Step 3: Style the Categories List (Optional)
.woocommerce-categories-hierarchy {
list-style-type: none;
padding: 0;
margin: 0;
}
.woocommerce-categories-hierarchy > li {
margin: 5px 0;
}
.woocommerce-categories-hierarchy li a {
text-decoration: none;
color: #0073aa;
}
.woocommerce-categories-hierarchy li a:hover {
text-decoration: underline;
color: #005177;
}
.child-categories {
list-style-type: none;
padding-left: 20px;
margin: 0;
}