Number Range

Allow users to filter content based on a numerical field value. This facet might consist of three elements: “max” and “min” input boxes, a slider, and a range presented as a “radio” button. In the settings, you can decide what elements will be displayed.

The number range filter type will be selected automatically if you pick “price” as the filter source.

The range filter type will be able to select only if the filter data source consists of numeric values. FiboFilters will first analyze this data, and then allow filter selection that corresponds with the data.

Available options

Option name	Description
Data source	The Number Range filter type is only available for data sources that have numerical values. FiboFilters automatically analyzes the data sources to hide filter types that do not match certain criteria. Read more about data sources.
When to show	Always – a filter will always be displayed Auto – a filter will be visible conditionally. Read more about content-aware filters. This option will be hidden when “Price” is the source. Prices are always displayed.
Display radio ranges	It shows or hides the “Radio ranges” element. These are automatically calculated numerical ranges that will vary depending on the available products for filtering.
Display “Min/Max” inputs	Displays or hides the “Max” and “Min” input boxes.
Display sliders	Displays or hides the “Slider” element, with which users can narrow down the search results to the set numerical range.
Display the filter name in applied filters	If the user sets a number range, it will also be displayed above the products in a special section called “Applied filters”. With this option enabled, the “Filter name”, “Min. value” and “Max. value” will be displayed as shown in the screenshot below. Inversely, when the option is disabled, only the “Min. value” and “Max. value” will be shown.

Number format

The price format is set automatically, according to WooCommerce settings → General → Currency Options.

For values different from price, the thousands separator and decimal point are taken from the global variable $wp_locale. They can be overridden using a PHP snippet:

add_filter( 'fibofilters/config/number_format', function ( $number_format ) {
    return [
       'thousands_sep' => ' ',
       'decimal_point' => ',',
    ];
} );

Depending on the filter’s purpose, you might want to display numeric values with a prefix, for example, ~50 (approximately 50), a suffix 70dB (70 decibels), or with a number precision 15.00 (two digits after decimal).

These values can also be changed with a PHP snippet. For example, you can change the number format to ~12.0”, meaning: approximately 12 inches with 1 number precision.

add_filter( 'fibofilters/filter/get_data', function ( $data, $context ) {
    if ( $context !== 'frontend-filtering' ) {
       return $data;
    }

    if ( $data['url_slug'] === 'caps-size' && $data['type'] === 'range' ) {
       $data['number_prefix']    = '~';
       $data['number_suffix']    = '"';
       $data['number_precision'] = 1;
    }

    return $data;
}, 10, 2 );

The result looks like that:

Changing currency settings

FiboFilters use the same currency settings as WooCommerce. To change the settings, go to WooCommerce → Settings → General (tab) → Currency options section.

To change these settings only for the filters, a PHP filter is available. The snippet below changes the number of decimal places from two to zero. Additional settings, like ‘symbol’ or ‘symbolPosition’, are also adjustable with this snippet.

add_filter( 'fibofilters/config/currency', function ( $currency ) {
	// All available options:
	//	$currency = [
	//		'code'              => 'USD',
	//		'precision'         => 2,
	//		'symbol'            => '$',
	//		'symbolPosition'    => 'left',
	//		'decimalSeparator'  => ',',
	//		'thousandSeparator' => ' ',
	//		'priceFormat'       => '%1$s%2$s'
	//	];
	$currency['precision'] = 0;
	return $currency;
} );