Hierarchy Select

This add-on lets you create guided dropdowns based on a hierarchical taxonomy.

Adding the facet

• Create a new facet, and set the Facet type to Hierarchy select.
• Click the “Add label” button once for each depth level. If you want to show two dropdowns, then you need two labels.
• Add the facet to your listing page(s).

Available options

Name	Description
Data Source	The taxonomy to pull values from. The Hierarchy Select facet expects a hierarchical taxonomy as data source.
Sort by	Sort facet choices by: Highest count – sorts by the total number of results with that value. Display value – sorts alphabetically according to the label you see on the facet choices. Raw value – sorts by the value that tracks the facet choices. For example in a dropdown, this is the option value rather than the option label. You can see the raw values in the url after making facet selections. Term order – sorts by taxonomy term order. This option uses term_order which is only available when using a plugin that sets an explicit order for taxonomy terms. FacetWP supports: WooCommerce product categories order Category Order and Taxonomy Terms Order Advanced Taxonomy Terms Order Intuitive Custom Post Order (which needs some additional code to work) Custom Taxonomy Order (which needs some additional code to work)
Show depth levels	Set custom dropdown labels, and determine which dropdown level appears. Default label: “Any”. Click the “Add Label” button to add (labels for) more levels. Notes: Setting a depth label for a level determines if the dropdown for that level appears. By default, the facet shows only one level. If your taxonomy for example has three levels, and you want them all to appear, you need to set three depth labels. The depth labels are translatable with the facetwp_i18n hook.

Indexing of term hierarchies

FacetWP automatically indexes both explicit and implicit term hierarchies.

If your taxonomy includes Europe > France and a post has only the France term selected, then Europe will get indexed too for that post.

On the front-end this means that if you have a post that has only the Paris term selected, but not its parent terms (France or Europe), the post will still be displayed in the results if you filter by “Europe”, or “France” in the facet.

Hide counts

To hide counts from all facets of a type that use a dropdown UI (all Hierarchy Select facets facets, Dropdown facets, and fSelect facets, and Range List facets (in dropdown or fSelect UI mode)), add the following to your theme’s functions.php:

add_filter( 'facetwp_facet_dropdown_show_counts', '__return_false' );

If you want to hide counts from specific facets with a dropdown UI, then use this instead:

add_filter( 'facetwp_facet_dropdown_show_counts', function( $return, $params ) {
    if ( 'your_facet_name' == $params['facet']['name'] ) {
        $return = false;
    }
    return $return;
}, 10, 2 );

Hide disabled child dropdowns

Child dropdowns in the facet’s hierarchy will have the class is-disabled as long as their parent dropdown does not have a choice selected yet. If you want to hide these “disabled” dropdowns until they become populated, you can use this CSS:

.facetwp-hierarchy_select.is-disabled {
    display: none;
}

Hide empty child dropdowns

Child dropdowns in the hierarchy will have the class is-empty if their parent choice causes them to have no options. This situation can happen in hierarchies where some parent terms have more child levels than other parent terms.

By default, the Hierarchy Select facet will always show all levels of the taxonomy, also if you select a parent choice that has fewer levels than others. This could cause confusion for users, especially if you have named the depth labels according to the levels’ content and there are no options in a level’s dropdown. With this CSS you can hide these empty dropdowns:

.facetwp-hierarchy_select.is-empty {
    display: none;
}

Use fSelect dropdowns in Hierarchy Select facets

It is possible to use fSelect type dropdowns instead of the normal default dropdowns in the Hierarchy Select facet. You can see this in action in the “Categories” facet of the Recipes Demo.

Note that the fSelect dropdown will be in single-select mode (so without checkboxes). Multi-select does not make sense when using Hierarchy Select facets because they are used to “drill down” by parent-child relationships of the hierarchical taxonomy terms.

To use fSelect type dropdowns in your Hierarchy Select facets, add the following code to your (child) theme’s functions.php:

add_action( 'wp_footer', function() {
?>
<link href="/wp-content/plugins/facetwp/assets/vendor/fSelect/fSelect.css" rel="stylesheet" type="text/css">
<script src="/wp-content/plugins/facetwp/assets/vendor/fSelect/fSelect.js"></script>
<script>
document.addEventListener('facetwp-loaded', function() {
    fUtil('.facetwp-hierarchy_select.is-disabled').addClass('fs-hidden');
    fUtil('.facetwp-hierarchy_select:not(.fs-hidden').fSelect();
});
</script>
<?php
}, 100 );

Note: If you already have an actual fSelect facet on the page, you don’t need to include the links to the fSelect CSS and JavaScript files.

See also

• The Hierarchy facet type
• The fSelect facet type
• Using the facetwp_i18n hook to translate facet labels and strings