To display WooCommerce product categoriesTo display WooCommerce product categories, organized by parent and child categories, you can create a custom shortcodeTo display WooCommerce product categories

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;
}