[shortcodeglut_category_tree]
WooCommerce Category Tree Shortcode
Complete Documentation for [shortcodeglut_category_tree] — Plugin Version 1.5.5
Table of Contents
Overview
The Category Tree shortcode renders WooCommerce product categories in a hierarchical, collapsible tree view. Categories are nested recursively with parent-child relationships, optional product counts, and click-to-expand functionality for browsing the full category structure of your store.
- Hierarchical collapsible tree of WooCommerce product categories with unlimited depth
- Recursive parent-child nesting — all subcategory levels rendered automatically
- Product counts displayed next to each category name
- Configurable auto-expand depth on page load (0 = collapsed, 1 = first level, etc.)
- Optional product listing inside expandable categories (name, price, image, add to cart)
- Two icon styles: classic Font Awesome folder icons or modern colored gradient icons
- Include or exclude categories by ID or slug
- Configurable container width (pixels, percentage, or auto)
Basic Usage
[shortcodeglut_category_tree]
No parameters are required. The shortcode will display all root product categories in a collapsible tree with product counts, Font Awesome folder icons, and a 500px container. All categories start collapsed.
[shortcodeglut_category_tree title="Shop Categories" expanded_depth="1" icon_style="gradient"]
Displays a category tree with a section heading, the first level of subcategories auto-expanded, and modern gradient icons.
Parameters Reference
| Parameter | Type | Default | Description |
|---|---|---|---|
| title | string | “” (empty) | Section heading displayed above the category tree. Leave empty for no heading. |
| show_count | boolean | 1 | Show the product count next to each category name. 1 = show, 0 = hide. |
| expandable | boolean | 1 | Enable expand/collapse functionality for categories with children. 1 = expandable, 0 = always fully expanded. |
| expanded_depth | string | 0 | How many levels deep to auto-expand on page load. 0 = all collapsed, 1 = first level expanded, 2 = first two levels, etc. |
| hide_empty | boolean | 0 | Hide categories that have no products. 1 = hide empty, 0 = show all. |
| parent | string | 0 | Parent category ID or slug to start from. "0" = show all root categories. Use a specific ID or slug to display only that category’s subtree. |
| orderby | string | name | Sort categories by: name, slug, count, id, or none. |
| order | string | ASC | Sort direction: ASC (ascending) or DESC (descending). |
| exclude | string | “” (empty) | Comma-separated category IDs or slugs to exclude. Example: exclude="15,23,uncategorized" |
| include | string | “” (empty) | Comma-separated category IDs or slugs to include — only these categories will be shown. Leave empty to show all. |
| number | string | “” (empty = all) | Maximum number of root-level categories to display. Leave empty to show all categories. |
| show_icon | boolean | 1 | Show category icons. 1 = show icons, 0 = hide icons. |
| icon_style | string | fontawesome | Icon style: "fontawesome" = classic folder icons, "gradient" = modern colored gradient icons. |
| show_breadcrumb | boolean | 0 | Show breadcrumb navigation above the tree. 1 = show, 0 = hide. |
| link_products | boolean | 0 | Enable product listings inside expandable categories. 1 = show products, 0 = categories only. |
| link_target | string | _self | Link target for category and product links: "_self" = same tab, "_blank" = new tab. |
| product_fields | string | name,price | Comma-separated product fields to display when link_products is enabled. Options: name, price, image, add_to_cart. |
| width | string | 500px | Container width. Accepts pixel values ("300px"), percentages ("100%"), or "auto". |
Usage Examples
Example 1: Default Tree (All Categories Collapsed)
[shortcodeglut_category_tree]
Displays all root product categories in a collapsible tree with product counts, Font Awesome folder icons, and a 500px container. All categories start collapsed.
Example 2: Tree with Heading and First Level Expanded
[shortcodeglut_category_tree title="Browse Our Categories" expanded_depth="1"]
Shows a category tree with a section heading and the first level of subcategories automatically expanded on page load. Visitors can click to expand deeper levels.
Example 3: Full-Width Tree with Gradient Icons
[shortcodeglut_category_tree width="100%" icon_style="gradient" expanded_depth="2"]
A full-width category tree using modern gradient icons instead of folder icons. The first two levels of subcategories are auto-expanded for immediate visibility.
Example 4: Subtree Starting from a Specific Parent
[shortcodeglut_category_tree parent="electronics" title="Electronics Subcategories"]
Displays only the subcategories of the “electronics” category using its slug. Useful for dedicated landing pages that focus on one product line.
Example 5: Hide Empty Categories, Sorted by Product Count
[shortcodeglut_category_tree hide_empty="1" orderby="count" order="DESC" show_count="1"]
Categories with no products are hidden. Remaining categories are sorted by product count (highest first), making it easy to highlight your most populated categories.
Example 6: Specific Categories with Products Listed Inside
[shortcodeglut_category_tree include="clothing,shoes,accessories" link_products="1" product_fields="name,price,image"]
Only shows the three specified categories. Because link_products is enabled, each category expands to reveal its products with name, price, and thumbnail image.
Example 7: Fully Expanded Tree with Exclusions
[shortcodeglut_category_tree expandable="0" exclude="15,23" width="100%" show_icon="0"]
Displays the entire category tree fully expanded with no collapse functionality. Categories with IDs 15 and 23 are excluded. Icons are hidden for a clean text-only look.
Example 8: Product Listing with Add to Cart Buttons
[shortcodeglut_category_tree link_products="1" product_fields="name,price,image,add_to_cart" expanded_depth="1" width="100%"]
Each expandable category reveals its products with full details: name, price, thumbnail image, and an add to cart button. The first level is auto-expanded so visitors see products immediately. Full-width layout.
Example 9: Compact Sidebar Tree
[shortcodeglut_category_tree width="300px" show_icon="1" icon_style="fontawesome" show_count="1" expanded_depth="0" hide_empty="1"]
A narrow 300px tree designed for sidebar placement. Shows product counts with folder icons. All categories start collapsed and empty categories are hidden to keep the sidebar compact.
Example 10: Top 5 Categories, Links Open in New Tab
[shortcodeglut_category_tree number="5" link_products="1" link_target="_blank" orderby="count" order="DESC"]
Shows only the top 5 root categories sorted by product count (highest first). Category and product links open in a new browser tab. Products are listed inside each expandable category.
Tips & Best Practices
Use
expanded_depth="0" for a compact initial view. Use expanded_depth="1" to give visitors a preview of subcategories. Avoid values above 2 on large catalogs — a fully expanded tree with hundreds of categories creates a very long page.
Use
width="500px" (default) for sidebars and widget areas. Use width="100%" for full-page category listings. Use width="auto" to let the container size itself to its content.
For large category structures, use
parent="slug-or-id" to display only a specific branch. This is ideal for dedicated landing pages that focus on one product line rather than the entire catalog.
Enable
link_products="1" to turn the tree into a mini catalog. Use product_fields to control which product details appear. The name field is recommended at minimum; add price, image, and add_to_cart as needed.
Use
include for a whitelist approach (show only specific categories). Use exclude for a blacklist approach (hide specific categories from the full tree). Do not use both at the same time — if include is set, it takes priority and exclude is ignored.
The
fontawesome style uses classic folder icons that are familiar and intuitive. The gradient style uses modern colored gradient icons that stand out visually. Choose based on your site’s design aesthetic.
Enable
hide_empty="1" on stores with many unused categories to keep the tree focused and relevant. This is especially useful for sidebar widgets where screen space is limited.
Frequently Asked Questions
Q: What does expanded_depth=”0″ do?
A: A value of 0 means all categories start fully collapsed. Only root-level categories are visible, and visitors must click to expand each one. This keeps the initial view compact and tidy.
Q: Can I use both include and exclude together?
A: No. If the include parameter is set, it takes priority and the exclude parameter is ignored. Use include to whitelist specific categories, or exclude to blacklist specific categories, but not both at the same time.
Q: How do I show products inside the category tree?
A: Set link_products="1" to enable product listings inside each expandable category. Then use the product_fields parameter to control which details are shown. Available fields: name, price, image, and add_to_cart. Example: product_fields="name,price,image,add_to_cart".
Q: How do I display only one category and its children?
A: Use the parent parameter with a category ID or slug. For example, parent="clothing" shows only the “clothing” category and all its subcategories. The default parent="0" shows all root categories.
Q: How is this different from [shortcodeglut_woo_category]?
A: The Category Tree shortcode displays a navigational hierarchy of your categories in a collapsible tree structure. The Category shortcode ([shortcodeglut_woo_category]) displays products from selected categories in grid or list layouts with templates and pagination. Use the Category Tree for browsing and navigation; use the Category shortcode for product displays.
Q: Can I open category links in a new browser tab?
A: Yes. Set link_target="_blank" to open all category and product links in a new tab. The default is link_target="_self", which opens links in the same tab.
Q: Does the tree support unlimited depth?
A: Yes. The tree uses recursive rendering to support unlimited parent-child nesting depth. All subcategory levels are rendered and can be expanded by clicking, regardless of how deep the hierarchy goes.
Q: How do I limit the number of categories shown?
A: Use the number parameter to set a maximum at the root level. For example, number="10" shows only the first 10 root categories. Leave it empty or omit it to show all categories. Child categories within expanded parents are not affected by this limit.
ShortcodeGlut — WooCommerce Product Shortcodes Plugin
Version 1.5.5 | Last Updated: May 2026