[woocommerce_product_filter_price] shortcode shows a live Product Price Filter, it displays two input fields and a slider that the customer can use to limit the price range. While sliding or typing in the input fields, the product selection will adjust to the matching subset.
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 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.
- Use the fields attribute to show or hide the minimum and maximum price input fields.
- Use the slider attribute to show or hide the interactive sliding control.
To show input fields only:
To display the slider only:
You can use the shortcode attributes outlined below to customize the shortcode. For example:
- 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.
- delay – The time in milliseconds to wait after the visitor stops typing to submit the request to filter, the default is “500” for half a second.
- fields – Whether to show the minimum and maximum price input fields, “yes” or “no”, defaults to “yes”.
- filter – Whether live filtering should be enabled, “yes” or “no”.
- min_placeholder – The placeholder text for the minimum field, the default is “Min”.
- max_placeholder – The placeholder text for the maximum field, the default is “Max”.
- show_currency_symbol – Whether to display the currency symbol, “yes” or “no”.
- show_clear – Whether to display a clickable action element that is used to clear the contents of the price fields and reset the filter, “yes” or “no”.
- slider – Whether to display the slider control that allows to adjust the price filtering range, “yes” or “no”, defaults to “yes”.
- submit_button – Whether to show a Submit button along with the filter, “yes” or “no”.
- submit_button_label – Sets the text displayed on the Submit button, the default is “Go”.
The advanced attributes should be left at their defaults unless there is the need to approach a specific case with this filter.
- container_class – The class applied to the HTML container that holds the price filter.
- container_id – The id of the HTML container that holds the price filter.
- heading_id – This sets the ID of the heading element.
- heading_class – This sets the class of the heading element.
- heading_element – Sets which HTML tag is used as the heading element.