Enhance User Experience with Advanced Search Filters
Keep your users in one place while they sort through your inventory
By default, it’s possible to include Inventory Items in your website search results, but this comes with some inherent problems. It takes your users away from the main page and mixes in other website results, all while being somewhat unclear on what can or can’t be searched for. Enter the Advanced Search Filter add-on. This handy enhancement allows your users access to a customizable list of filters to make searching through your inventory quick and easy. You can either utilize the instructions below, or follow along with this video tutorial:
- Purchase and Download the Advanced Search Filter add-on.
- Install the add-on through your WordPress dashboard by navigating to the “Plugins” tab.
- After browsing and uploading the ZIP file, activate the plugin.
- Enter your license key on the settings page.
Customizing the Available Fields
Once the plugin is installed, you can configure the Search Filter by navigating to the Advanced Search menu item, where you will see a set of fields like the image below:
Any field that is checked will be available for your users to filter by. The fields will display in top-to-bottom order, and can be changed by dragging and dropping the fields.
By clicking the green folder icon on the right, you can open up another field to configure the options for each field specifically. Like the main fields, these will display in order, and the order can be changed by dragging and dropping fields. You can also add a “More Separator,” which will hide the option below the separator inside of a dropdown on the frontend. The following configuration will result in a display on the front end like the image below:
Please note that a label will not appear in the Search Filters on the front end if you do not have anything set. For example, if you are using AIM and create a custom field for the number of strings on a guitar, but don’t set that option within any items, then it will not show in the front end as a filter. If the field does not have a value, then it will not be added to the Search Filters.
Displaying the Search Filters
There are two options to display your Search Filters on the front end – either the Advanced Search Filter widget, or the new Advanced Search Filter shortcode. If you do not select at least one field for users to search by, the widget or shortcode will return an error that no fields are selected.
The Advanced Search Filter can be inserted onto any page using the shortcode:
[wpinventory_advanced_search]. This shortcode comes with several parameters you can customize to meet your needs:
title– The title shown at the top of the search filters on the front end. The default is an empty string.
more_text– The text for the More Separator dropdown. The default is “See More”.
less_text– The text for the Less Separator dropdown. The default is “See Less”.
search_button_text– The text for the filter button to initiate a search. The default is “Search”.
clear_search_text– The text for the button to clear the search criteria. The default is “Clear Search”.
form_redirect– Optionally link the search button to a new page. Any chosen filters will apply to the display shortcode and Advanced Search shortcode on the destination page. Default is an empty string.
display_as– A choice between filter options being displayed as checkboxes (with the value “checkboxes”) or dropdowns (with the value “dropdown”). Defaults to checkboxes.
disable_ajax– Toggle the option to update the available search filters dynamically when a user chooses an option with AJAX. Setting this to “1” turns on the option to disable ajax, but the default is 0 with the option to disable ajax turned off.
include_text_search– Toggle whether or not to allow a user to type in their own text search query. Defaults to 0, which is off. Enable by setting the value to “1”, “yes”, or “true”.
Here is an example of the shortcode using every available parameter:
[wpinventory_advanced_search title="Search the Inventory" more_text="Show More" less_text="Show Less" search_button_text="Go!" clear_search_text="Start Over" form_redirect="/custom-search-page/" display_as="dropdown" disable_ajax="0" include_text_search="true"]
First, in your WordPress menu, navigate to Appearance > Widgets. Here, you can drop the WP Inventory Advanced Search widget into any widgetized area. The widget itself can also be configured to suit your needs:
- Title – Optionally set a title for the Advanced Search Widget.
- More Text – Allows you to change the text of the More Separator dropdown. Defaults to “See More.”
- Less Text – Allows you to change the text of the button to close the More Separator dropdown. Defaults to “See Less.”
- Search Button Text – Allows you to change the text of the filter button. Defaults to “Search.”
- Clear Button Text – Allows you to change the text of the button to clear the chosen filters. Defaults to “Clear.”
- Display Options as – Changes whether filter options are displayed as checkboxes or a dropdown field. Please note that the More Separator does not apply to the dropdown display option.
- Disable AJAX – Toggle the option to update the available search filters dynamically when a user chooses an option with AJAX. Setting this to “1” turns on the option to disable ajax, but the default is 0 with the option to disable ajax turned off.
- Hide Widget on pages that do not display WP Inventory – When enabled, this option will hide the Advanced Search widget on any page that does not have the WP Inventory display shortcode.
- Include Text Search Input – When enabled, this option adds a freeform text field to the top of the Search Filters that allows your users to type in their own search queries.
- Suppress CSS Styles – When enabled, this option disables the default CSS styles for the Advanced Search widget, allowing you to customize the widget with your own custom CSS.
Advanced Search Filter Settings
There is one setting you can use to configure the add-on, found on the Advanced Search tab in the WP Inventory settings page.
- Minimum Role to Admin Advanced Search – Sets the minimum user role required to configure the Advanced Search Filter add-on.