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”.

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.

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