Skip to main content

Woo Taxonomy List

Found in the Elementor panel under Dotjuice → Woo Taxonomy List.

Note: despite the "Woo" name, this widget works with any public taxonomy on your site — product categories, blog categories, tags, or a custom taxonomy — not just WooCommerce. It currently only appears in the widgets panel when WooCommerce is active; if you'd like to use it purely for blog categories on a site without WooCommerce, get in touch with support.

Two display modes

Flat mode lists every term in the chosen taxonomy in one simple list — good for a straightforward "browse all categories" block.

Hierarchical mode (the default) lets you choose specific parent terms, and displays each one with its child terms nested beneath — good for a "Shop by Category" style block where you want to group related subcategories under their parent.

Content settings — Widget Heading

SettingWhat it does
Heading TextAn optional title shown above the list.
Heading URLIf set (and Heading Text is filled in), makes the heading a clickable link.
Heading TagThe HTML tag used for the heading (H2–H6, or a plain div), for correct document structure.

Content settings — List Settings

SettingDefaultWhat it does
TaxonomyProduct categoriesWhich taxonomy to pull terms from — every public taxonomy registered on your site is available here.
Show All Terms (Flat)OffSwitches to flat mode (see above).
Parent TermsHierarchical mode only. Choose which parent term(s) to display, each with its children listed beneath.
Show Parent TermOnHierarchical mode only. Shows the parent term itself as a clickable heading above its children.
Max Depth1 levelHierarchical mode only. How many levels of nested children to show beneath each parent — 1, 2, 3, or all levels.
Hide Empty TermsOnExcludes terms with no posts or products assigned to them.
Order ByNameName, Count, Slug, or Term ID.
OrderAscendingAscending or descending.

Content settings — Display

SettingWhat it does
Show Term CountAdds a post/product count in brackets after each term name.
List IconAn optional icon (as a CSS icon class, e.g. from Font Awesome) shown before each term link.

Styling

Extensive styling is available, organised into: Heading (typography, colour, spacing), List Container (padding, background, border, shadow), Parent Items and Parent Link Text (hierarchical mode only), List Items (marker style — none, disc, circle, square, numbers, or letters — spacing, indentation, background, and hover background), Link Text (typography, colour, hover underline), and List Icon (size, colour, spacing) if you've set one.

Setting it up

For a flat list (e.g. "all blog categories"):

  1. Choose your Taxonomy.
  2. Turn on Show All Terms (Flat).
  3. Style as needed.

For a grouped list (e.g. "Shop by Category" with subcategories):

  1. Choose your Taxonomy.
  2. Leave Flat mode off, and select your parent term(s) in Parent Terms.
  3. Set Max Depth to however many levels of children you want shown.
  4. Style as needed.

Good to know

  • If your configuration doesn't resolve to any terms (for example, hierarchical mode with no parent terms selected yet), the widget shows a helpful explanatory message while you're editing in Elementor — but shows nothing at all on the live front end. Always double-check your configuration is complete before publishing.
  • The Parent Terms picker updates automatically to show terms from whichever taxonomy you've selected, but this live update only works while you're inside the Elementor editor.