WooCommerce: How to Display Subcategories in a Dropdown Menu

Displaying your product categories in a collapsible or dropdown style is a much cleaner and more user-friendly way to display product categories, especially when you have a big list.

If using the built-in WooCommerce Category Widget with Dropdown does not suffice, I recommend the following method:

WooCommerce: Display Subcategories in Dropdown

First, install the Code Snippets plugin.

Add a new PHP snippet:

add_shortcode('custom_product_categories', 'custom_product_categories_shortcode_cssonly');
function custom_product_categories_shortcode_cssonly() {
    $terms = get_terms([
        'taxonomy'   => 'product_cat',
        'hide_empty' => false,
        'parent'     => 0
    ]);

    $output = '<div class="css-cat-list">';
    foreach ($terms as $term) {
        $children = get_terms([
            'taxonomy'   => 'product_cat',
            'hide_empty' => false,
            'parent'     => $term->term_id
        ]);

        $output .= '<div class="cat-parent">';
        if (!empty($children)) {
            $output .= '
                <input type="checkbox" id="cat-' . $term->term_id . '">
                <label for="cat-' . $term->term_id . '">' . esc_html($term->name) . '</label>
                <ul>';
            foreach ($children as $child) {
                $output .= '<li><a href="' . get_term_link($child) . '">' . esc_html($child->name) . '</a></li>';
            }
            $output .= '</ul>';
        } else {
            $output .= '<span class="no-children"><a href="' . get_term_link($term) . '">' . esc_html($term->name) . '</a></span>';
        }
        $output .= '</div>';
    }
    $output .= '</div>';
    return $output;
}

Call it “Custom Product Categories Shortcode”, set it to “Run snippet everywhere” and save. This creates the following shortcode:

 [custom_product_categories]

You can use it in any page, widget, or sidebar block. I am using it as a sidebar widget. I added a “Text” widget and added the shortcode.

Now, let’s add some CSS to make it look better:

/* Container styling */
.css-cat-list {
    font-family: sans-serif;
    font-size: 16px;
}

/* Parent categories (main) */
.css-cat-list label {
    display: block;
    font-weight: bold;
    background-color: #d4f7d4;
    padding: 8px 12px;
    border-radius: 6px;
    margin-bottom: 4px;
    cursor: pointer;
    position: relative;
    color: #2d662d;
}

/* Hide checkbox */
.css-cat-list input[type="checkbox"] {
    display: none;
}

/* Arrow icon for parent toggle */
.css-cat-list label::after {
    content: "▼";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8em;
    color: #2d662d;
}

/* Arrow when open */
.css-cat-list input[type="checkbox"]:checked + label::after {
    content: "▲";
}

/* Subcategories */
.css-cat-list ul {
    display: none;
    margin: 0;
    padding-left: 1em;
    background-color: #eefaf0;
    border-left: 3px solid #b6e7b6;
    margin-top: 4px;
    border-radius: 4px;
}

/* Show subcategories when checked */
.css-cat-list input[type="checkbox"]:checked + label + ul {
    display: block;
}

/* Subcategory list items */
.css-cat-list ul li {
    padding: 6px 12px;
    list-style-type: none;
}

.css-cat-list ul li a {
    text-decoration: none;
    color: #2d662d;
}

.css-cat-list ul li a:hover {
    text-decoration: underline;
}

/* Non-parent category link */
.css-cat-list .no-children a {
    display: block;
    padding: 8px 12px;
    background-color: #d4f7d4;
    border-radius: 6px;
    color: #2d662d;
    text-decoration: none;
    margin-bottom: 4px;
}

.css-cat-list .no-children a:hover {
    background-color: #b6e7b6;
}

Don’t forget to edit the CSS to your liking, of course.

Example:

• #d4f7d4 → color for main categories
• #eefaf0 → color for subcategories
• #2d662d → text color
• Want rounder corners? Change border-radius

WooCommerce: Add Product Count to Categories

If you wish to add the number of products behind each category, you can replace the PHP snippet with this code:

add_shortcode('custom_product_categories', 'custom_product_categories_shortcode_with_count');
function custom_product_categories_shortcode_with_count() {
    $terms = get_terms([
        'taxonomy'   => 'product_cat',
        'hide_empty' => false,
        'parent'     => 0
    ]);

    $output = '<div class="css-cat-list">';
    foreach ($terms as $term) {
        $children = get_terms([
            'taxonomy'   => 'product_cat',
            'hide_empty' => false,
            'parent'     => $term->term_id
        ]);

        // Get product count for the main category
        $product_count = $term->count;

        $output .= '<div class="cat-parent">';
        if (!empty($children)) {
            $output .= '
                <input type="checkbox" id="cat-' . $term->term_id . '">
                <label for="cat-' . $term->term_id . '">' . esc_html($term->name) . ' (' . $product_count . ' products)</label>
                <ul>';
            foreach ($children as $child) {
                $child_count = $child->count; // Get product count for each subcategory
                $output .= '<li><a href="' . get_term_link($child) . '">' . esc_html($child->name) . ' (' . $child_count . ' products)</a></li>';
            }
            $output .= '</ul>';
        } else {
            $output .= '<span class="no-children"><a href="' . get_term_link($term) . '">' . esc_html($term->name) . ' (' . $product_count . ' products)</a></span>';
        }
        $output .= '</div>';
    }
    $output .= '</div>';
    return $output;
}

Using this code, for each parent category and subcategory, the number of products will appear in parentheses next to the category name. You can remove the word ‘products’ to only show a number, like I did.

A small sample of what your Product Categories menu with dropdown list will look like can be seen in the image above this blog post. Thank you very much for checking out my guide. I hope it is of use to you!