[woocommerce_product_filter_category]

The [woocommerce_product_filter_category] shortcode shows a live Product Category Filter.

This live filter displays the product categories. Used within appropriate context, the customer can click a category (term) and the page will show the products that belong to it.

This shortcode must be used within appropriate context, i.e. where products are displayed, as for example on a shop page. As with all live product filters that this extension provides, this filter field is used to refine the selection of products and reduce it to a set that contains only those that match what the customer is looking for.

Use this filter shortcode on a shop page or in conjunction with the [woocommerce_product_filter_products] shortcode on any page. The [woocommerce_product_filter_products] shortcode displays the products as if you were on the shop page and in combination with the filter shortcode, it updates them dynamically when the customer clicks on any of the categories.

Shortcode Attributes ↑ Back to top

You can use the shortcode attributes outlined below to customize the shortcode. For example:

[woocommerce_product_filter_category include="clothing,shoes,jackets,shirts,shorts" show_thumbnails="yes"]

Heading ↑ Back to top

  • show_heading – Whether to display the heading for this filter. “yes” or “no”
  • heading – You can provide a customized heading here or omit it to use the default. The heading will be displayed when there are terms to show, it will be hidden when there are none.
  • heading_no_results – You can provide the text of an alternative heading to be displayed when there are no results.

Display ↑ Back to top

  • style – How to display the terms, "list" or "inline" or "select" or "dropdown".
  • size – Applies with style="select" and determines the size of the control that is displayed.
  • show_thumbnails – Whether to show thumbnails for the terms, "yes" or "no".
  • show_selected_thumbnails – Available when "dropdown" is used as style. Enabled by default or using "yes", displays thumbnails also for the selected terms. Using "no" disables it.
  • show_names – Whether to show the names of the terms, "yes" or "no".
  • show_count – Whether the number of related products per term will be shown, "yes" or "no".
  • hide_empty – Whether to automatically hide terms that have no related products.
  • number – If a number is provided through this attribute, it limits the number of terms shown. If omitted, all applicable terms are shown.
  • height – Used with style="dropdown". If left empty, the choices of the dropdown are shown below when the field gains focus. If a plain number is input, e.g. 5, the Dropdown will adopt a fixed height to show the indicated number of entries. If a number with a CSS unit* is used, e.g. 120px, the Dropdown will adopt a fixed height as per the indicated unit. *Allowed CSS units: px, mm, cm, in, pt, pc, em , ex, ch, rem, vw and vh.
  • toggle – Hide the filter component when it has no options, "yes" (by default) or "no".
  • toggle_widget – Hide the widget when the component has no options, "yes" (by default) or "no".

The following parameters allow to control the navigation experience through product categories further. Some are only effective with particular styles.

  • auto_expand – Expandable categories will reveal their children automatically when hovering over it. When this is turned off, one needs to click (or tap) the expander to unfold the subcategories. Allowed values are "yes" (default) and "no". This parameter is used when style="list".
  • auto_retract – When you move outside the area where the categories are shown, the children will automatically be hidden. This is enabled by default or indicating "yes" and can be turned off using "no". This parameter is used when style="list".
  • expandable_from_depth – The level from which categories in the hierarchy are expandable. Defaults to 0, meaning that categories from the root are expandable. This parameter is used when style="list".
  • expander – Whether to show expanders or not. Enabled with "yes" (default), disabled using "no". This parameter is used when style="list".
  • show_ancestors – This determines whether the ancestor hierarchy based on the current context is shown. Enabled with “yes”, disabled with “no”.
  • show_parent_navigation – If enabled, additional links for ancestors are shown which allow to navigate back in the hierarchy. Enabled with "yes", disabled using "no" (default).
  • show_parent_names – Whether to show parent names. Used when show_parent_navigation is enabled.
  • show_parent_thumbnails – Whether to show parent thumbnails. Used when show_parent_navigation is enabled.
  • taxonomy – Experimental feature which allows to indicate a different taxonomy than the default "product_cat".

Order ↑ Back to top

  • orderby – Used to determine the order in which the terms are shown, “count”, “id”, “term_order” (default), “name”, “slug” or “description”.
  • order – Sets ascending or descending order, “asc” (default) or “desc”.

Terms ↑ Back to top

  • depth – This allows to limit the depth within the term hierarchy by indicating a number. The default is 0, imposing no limit.
  • filter – Whether live filtering should be enabled, “yes” or “no”.
  • hierarchical – Whether the terms should be displayed as a hierarchy.
  • multiple – Whether to let visitors select more than one term, “yes” or “no”.
  • show – This will determine whether all terms are shown (with “all”) or only those that are within the context of the selected term (with “set”).
  • include – You can indicate the terms that should be included here. If left empty, all terms are displayed. Indicate terms by ID, slug or name and separated by comma.
  • exclude – Indicate the terms that should be excluded here by ID, slug or name and separated by comma. If include is provided, it overrides this shortcode attribute completely – use either of them but not both.
  • child_of – This will limit the terms displayed to children of the one indicated. The token {current} can be used to limit it to children of the current term.
  • none_selected – The text displayed when no term is selected. Used with style="select" and style="dropdown".

Advanced Attributes ↑ Back to top

The advanced attributes should be left at their defaults unless there is the need to approach a specific case with this filter.

  • heading_id – This sets the ID of the heading element.
  • heading_class – This sets the class of the heading element.
  • heading_element – Used to determine which HTML tag is used as the heading element.
  • container_id – This sets the ID of the filter’s main div container element.
  • container_class – This adds to the class of the filter’s main div container element.

WooCommerce - the most customizable eCommerce platform for building your online business.

Back to the top