Range List
Create a list of custom ranges

A facet type for creating a list of filterable number ranges. It can be used for prices, weights, square meters, or any other numerical value.
The facet can be displayed in several UI types like checkboxes, radio buttons, a dropdown, or as an fSelect facet type.
Available options
Name | Description |
---|---|
Data source | Where the value lives (taxonomy, custom field, post attribute). The facet expects a numeric value. |
Ranges | To set up this facet type, create a number of ranges with min and max values. Each range will correspond to a facet choice. See the explanation below. |
UI type | The UI type of this facet:
|
Default label | This setting is only visible for UI types “Radio”, “fSelect”, and “Dropdown”. It sets the text of the “Any” choice:
Note: this label is translatable with the facetwp_i18n hook. |
Multi-select | This setting is only visible for UI type “fSelect”. If enabled, the facet will accept multiple selections, and will display a checkbox-style UI. |
Facet logic | This setting is only visible for UI types “fSelect” and “Checkboxes”. For the “fSelect” type it is only relevant if it is set to multi-select. The setting determines the logic used between choices within the facet. Assume a facet with the choices “Apple”, “Banana”, and “Pear”:
|
Show ghosts | This setting is only visible for UI types “Radio”, “fSelect”, and “Checkboxes”. If enabled, facet choices created in your ranges that would return zero results are still shown, but dimmed and not clickable. If disabled, choices that have has no associated posts will be hidden.
Note: this is slightly different than the show ghosts option for other facets without the ui-type option. |
Create ranges
To set up this facet type, use the Ranges setting to create a number of ranges with min and max values. Each range will correspond to a facet choice. For each choice, enter a custom label:


The final output of the above settings will look like the image on the right.
As shown in the above gif, if you leave the “Min” value blank in a row, the min value of that field is set to the “Max” value of the previous row. Leaving “Min” blank on the first row sets that min value to 0
. And leaving the “Max” value blank in the last row will be interpreted as there being no max value, meaning “and up”.
Note that “Max” values are interpreted as “up to and including” and “Min” values as “from and including”. So in above example, a post with a value of 10000
will be included in both the first and the second facet choice.
Here is a video walkthrough of setting up a Range List facet:
Hide counts
How to hide the counts for the Range List facet, depends on the UI type setting:
UI type set to “None”, “Radio” or “Checkboxes”
Add the following CSS into your theme’s style.css
. Be aware that this also hides the counts for all facets of type Checkboxes, Radio and Hierarchy.
How to use custom CSS?
CSS code can be placed in your (child) theme's style.css file. Alternatively, you can add it manually between
<style>
tags in the<head>
section, in your (child) theme's header.php file. You can also load it with a hook in your (child) theme's functions.php file, or in the Custom Hooks add-on. To load the code only on pages with facets, use thefacetwp_scripts
hook. To load it on all pages, usewp_head
orwp_footer
. Or you can use a code snippets plugin. More info.facetwp-counter { display: none; }
If you need to be specific about which (type of) facet to hide the counts for, use any of the following styles:
How to use custom CSS?
CSS code can be placed in your (child) theme's style.css file. Alternatively, you can add it manually between
<style>
tags in the<head>
section, in your (child) theme's header.php file. You can also load it with a hook in your (child) theme's functions.php file, or in the Custom Hooks add-on. To load the code only on pages with facets, use thefacetwp_scripts
hook. To load it on all pages, usewp_head
orwp_footer
. Or you can use a code snippets plugin. More info/* Hide counts in all facets with a radio UI (Range List facet in UI modes "None" or "Radio", Radio facet) */ .facetwp-radio .facetwp-counter { display: none; } /* Hide counts in all facets with a checkboxes UI (Range List facet in UI mode "Checkboxes", Checkboxes facet) */ .facetwp-checkbox .facetwp-counter { display: none; } /* Hide counts in all Range List facets in UI mode "None", "Radio" or "Checkboxes" */ [data-type="range_list"] .facetwp-counter { display: none; } /* Hide counts in a specific Range List facet in UI mode "None", "Radio" or "Checkboxes" */ .facetwp-facet-yourfacetname .facetwp-counter { display: none; }
UI type set to “Dropdown” or “fSelect”
To hide counts from all facets of a type that use a dropdown UI (all Range List facets in dropdown or fSelect UI mode, Dropdown facets, fSelect facets, and Hierarchy Select facets), add the following to your theme’s functions.php:
How to use custom PHP code?
PHP code can be added to your (child) theme's functions.php file. Alternatively, you can use the Custom Hooks add-on, or a code snippets plugin. More info
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:
How to use custom PHP code?
PHP code can be added to your (child) theme's functions.php file. Alternatively, you can use the Custom Hooks add-on, or a code snippets plugin. More info
add_filter( 'facetwp_facet_dropdown_show_counts', function( $return, $params ) { if ( 'your_facet_name' == $params['facet']['name'] ) { $return = false; } return $return; }, 10, 2 );
Translate range labels
To translate range labels, you can use the facetwp_facet_display_value hook. This example is for when you are using WPML (use line 7 instead of line 4 for Polylang):
How to use custom PHP code?
PHP code can be added to your (child) theme's functions.php file. Alternatively, you can use the Custom Hooks add-on, or a code snippets plugin. More info
add_filter( 'facetwp_facet_display_value', function( $label, $params ) { // Get current language for WPML: $lang = ( !empty( FWP()->facet->http_params['lang'] ) ) ? FWP()->facet->http_params['lang'] : apply_filters( 'wpml_current_language', null ); // Get current language for Polylang: // $lang = ( !empty( FWP()->facet->http_params['lang'] ) ) ? FWP()->facet->http_params['lang'] : pll_current_language(); switch ( $lang ) { case 'nl' : if ( '€ 100 and up' == $label ) { $label = '€ 100 en hoger'; } break; case 'fr': if ('€ 100 and up' == $label) { $label = '€ 100 et plus'; } break; } return $label; }, 20, 2 );
Alternatively, you can change facet choices into translatable strings with the facetwp_facet_render_args hook.
Changelog
0.8
- New requires FacetWP 4.2.5+
- New added `ui_ghosts` setting (ghosts support)
- Improved set "radio" as the default ui_type
0.7.2
- Fixed PHP8 deprecation notice
0.7.1
- Fixed issue with range comparison when 0
0.7
- New support UI switching (requires FacetWP 3.9+)
- Improved improved styling, nicer "remove" button
0.6.1
- Improved removed jQuery dependency
0.6
- Fixed refactored code to better support for the Fetch API
0.5
- Fixed prevent from overwriting user-defined range labels