SpeedSearch documentation

Installation

Initial setup #

1. After installing and activating the plugin, you can find it in the “WooCommerce” menu:

1. After you open the plugin page, you will see plugin activation screen:

1. Enter your license key and press “Activate”;
2. Then you will see plugin Authorization screen:

1. Press “Auth” button, and you will be redirect to authorization screen:

1. Press the “Approve” button, and then you will be redirected to the plugin settings page. Before fully enabling SpeedSearch on your site, we have to sync your products in our database. No changes will be made to your shop page until this sync is completed. You can check the progress in the progress bar.

1. In the meantime, you can view the docs, follow the wizard for further guidance or force replace the current search&filter setup with SpeedSearch.

Blocks #

Shortcodes #

Shortcode example	Description	Attributes	Frontent view
[speedsearch hide_search=”0″]	Main block – container holding all the sections rendered by the plugin.	hide_search – Controls whether to hide the search bar. 0 = false (display search bar) 1 = true (hide search bar) Default value: 0 html_id – defines the ID of the HTML element Syntax example: [speedsearch html_id=”speedsearch-main-block”]	See “Main block” in “Blocks” section
[speedsearch_search small_size=”1″ align=”center” search_in_results=”0″]	Search block – contains the search bar only.	small_size – Controls whether the size of the search bar. 0 = regular size search bar 1 = small search bar Default: 0. align – Alignment. center = align to center left = align to the left right = align to the right Default value: right. search_in_results – Controls if the main block search bar will limit search results to the collection of results from the header search bar. 0 = main block search bar acts as generic search bar 1 = main block search bar searches within the results of the header search bar Defaul value: 0. html_id – defines the ID of the HTML element Syntax example: [speedsearch html_id=”speedsearch-main-block”]	See “Search block” in “Blocks” section
[speedsearch_part_categories]	Categories block – contains the list of all categories, with their children (subcategories).	html_id – defines the ID of the HTML element Syntax example: [speedsearch html_id=”speedsearch-main-block”]	See “Categories” block in “Blocks” section
[speedsearch_part_filters]	Filters Block – contains all the available filters as selected from the WP settings, including Toggles (because toggles are filters).	html_id – defines the ID of the HTML element Syntax example: [speedsearch html_id=”speedsearch-main-block”]	See “Filters” block in “Blocks” section
[speedsearch_part_tags]	Tags block – contains all the available tags as selected from the WP settings.	html_id – defines the ID of the HTML element Syntax example: [speedsearch html_id=”speedsearch-main-block”]	See “Tags” block in “Blocks” section
[speedsearch_part_posts]	Posts block – contains the list of products. Will display a message when the search or filters applied do not yield any results.	html_id – defines the ID of the HTML element Syntax example: [speedsearch html_id=”speedsearch-main-block”]	See “Posts” block in “Blocks” section
[speedsearch_part_filter name=”price”]	Single “Price” filter – to be used when wanting to separate other filters from the price one.	html_id – defines the ID of the HTML element Syntax example: [speedsearch html_id=”speedsearch-main-block”]
[speedsearch_part_active_filters]	Active filters block – displays all currently applied filters.	html_id – defines the ID of the HTML element Syntax example: [speedsearch html_id=”speedsearch-main-block”]	See “Active filters” block in “Blocks” section
[speedsearch_part_toggle name=”reviews_allowed”]	Single toggle. To get the toggle name, hover over it in the admin menu and wait for 2 seconds (“title” attribute). For example, the toggle “Reviews Allowed” will be “reviews_allowed”. Important: If the toggle is not active (in general or at least for one filter), it will not be shown.	html_id – defines the ID of the HTML element Syntax example: [speedsearch html_id=”speedsearch-main-block”]	Example for “On Sale” toggle
[speedsearch_recently_viewed_products show_limit=”3″]	List of recently viewed products.	show_limit – The maximum number of recently viewed products to show. Can’t be more than 10. Min value = Max value = 10 Default value: html_id – defines the ID of the HTML element Syntax example: [speedsearch html_id=”speedsearch-main-block”]

Export / Import the Plugin Settings #

Settings can be exported and imported when store owners wish to try out new configurations without losing the current setup. Store owners can therefore export their settings, make the changes they wish to make and revert back to the old setup simply by importing back the settings.

Export Settings #

1. Go to your WordPress dashboard > WooCommerce > SpeedSearch > General Settings.
2. Scroll down to the bottom of the General Settings page.
3. Click on “Export Settings”.
4. Click “yes” or “no” depending if you want to bundle the images to the export file – when you answer no, the images will be downloaded by their URLs upon import; answer yes if the site is not reachable via the internet, or if you want to export the settings as a backup.
5. Select location where to save settings.

Import Settings #

1. Go to your WordPress dashboard > WooCommerce > SpeedSearch > General Settings.
2. Scroll down to the bottom of the General Settings page.
3. Click on “Import Settings”.
4. Select exported settings file.
5. Wait while the settings are imported (you can close the page or popup if you want, the import happens in the background).

Filters / Toggles Reordering #

You can change the order of filters and toggles by using drag-and-drop functionality in the WP dashboard. Once saved, the changes will be visible in the “Filter Demo” section (under toggle settings) and on the shop page.

1. Go to your WordPress dashboard > WooCommerce > SpeedSearch > Filters.
2. Use drag-and-drop to reorder filters and toggles (just press the left mouse button on the filter or toggle you want to reorder, move the mouse to the position where you want the element to be, and then release the mouse button).
3. Press the “Save” button.

Settings guide

The plugin settings are split in multiple categories navigable through the settings tabs. The following explains each category with its settings.

General settings #

Show advanced settings #

Note: if you’re not a developer. Leave this setting disabled.

By default, the plugin doesn’t display a set of advanced settings. The default values for those settings are carefully chosen to ensure a seamless experience. They address caching flush intervals, sync & webhooks pausing, attributes prefixes for URL paramsand parameters for analytics aging.

In most cases, the advanced settings values don’t need to be changed. For the special cases in which these more technical attributes have to be tweaked, the settings can be made visible by enabling the “Show advanced settings” checkbox.

When enabled, 2 more sub-menus will appear in the settings navigation bar and a 3rd general setting will be appended to the list.

Display mode for empty categories, and attributes (with no products) #

SpeesSearch keeps track of what attributes and categories can stil be applied to the product list without leading to an empty search result. Based on the already selected categories and attributes (color, price, brand, size, etc.), the list of filters that don’t lead to an empty result will automatically narrow down. There is an option to display the filters & categories that don’t contain matching products, to display them in a disabled state (greyed out, unclickable), or hide them altogether.

This is particularly relevant when designing the user experience of the filtering process.

Setting value: Show

When the setting is set to “Show”, we can observe that once we start selecting filters, our filtering options stay the same (observe category list, and color list options). This can mean that by selecting another available filter, we could display an empty product list, if the filter we selected has no products in common with the currently selected filter.

Default state

Once a filter has been applied

Setting value: Show disabled

When the setting is set to “Show disabled”, we can observe that once we start selecting filters, our filtering options are limited by disabling the filters that would lead to an empty search result (observe category list, and color list options). This is useful when we want users to know that the filters do exist, but are not available for the products subset that they are currently viewing.

Default state

Once a filter has been applied

Setting value: Hide

When the setting is set to “Hide”, we can observe that once we start selecting filters, our filtering options are narrowed down (observe category list, and color list options). The attributes that do not belong to any of the products in the newly filtered list are hidden.

Default state

Once a filter has been applied

Autocomplete #

The autocomplete settings are split in 3 sections:

• general – concerning generic autocomplete behavior,
• left panel – concerning the autocomplete left panel behavior
• right panel – concerning the autocomplete right panel behavior.

Display the currently selected autocomplete recommendation as highlighted text in the search bar #

When enabled, the autocomplete recommendation in the left panel is shown as a highlighted menu-item to the currently typed in word in the search bar. In the screenshot below with a light grey background.

Display a second search bar on the shop page for searching within search results #

When enabled, the shop will have 2 search bars – one in the header and one in the body of the products list page. The second search bar can be used by itself or in combination with the header search bar. When used in combination, the second search bar will only show results that also match the search terms entered in the header search bar.

Having a setup with a header search bar that appears on all pages is beneficial for e-commerce stores as it enables visitors to start searching for products from any page of the site. Once that first search is performed, we want to offer site visitors an easy, fully integrated searching and filtering experience. This can be achieved by having a second search bar on the shop page. The second search bar has several benefits:

• For shops with many large collections, this setup can streamline the search process. For example, if the user searches for “clothing”, he is directed to the shop page with all the clothing items available. The 2nd search bar will automatically search for products that also match “clothing”, resulting in products that are relevant to the user.
• Being in the proximity of the categories and filters sections, it’s it’s more visible and handy for visitors to use, instead of searching through the header.

This setting controls the display of a second search bar on the shop page containing the products list. To enable this on other pages, you can use the argument “search_in_results” for “speedsearch” shortcode: [speedsearch search_in_results=”1″].

Double search bar setup example – Laybout

Double search bar setup example – Search bars used together

• Visitor searches for “hoodie”

• Using the 2nd search bar, the visitor narrows down the results

Apply automatic filtering based on search terms, tags, categories #

SpeedSearch automatically identifies when a search term matches an existing tag, category or attribute. By enabling this feature, if a search term matches an existing filter (cattegory, attribute, tag), the filter will be recognized and applied automatically.

Example when enabled: when searching for “blue beanie”, “blue” is recognised as a color and the result lists is filtered by color: blue.

Automatically preselect the first autocomplete recommendation #

If enabled, when the user presses “Enter” to search for the typed in search string, the first autocomplete recommendation will be the final search string that will be used. In certain cases, this mean that the search string will be modified, and therefore different than the user input.

By default, the autocomplete recommendations can be selected using the arrow down key. If the automatic selection is disabled, the arrow down functionality can be used to navigate the recommendations list..

Example Enabled: When enabled, if the user searches for “mus”, the first autocomplete recommendation “music” is the final search string applied.

Example Disabled: When disabled, if the user searches for “mus”, this is the final search string. In this case, the result list will show products matching the word “massa”, the closest term in the database to “mus”.

On filter select, preserve the currently selected filters (instead of resetting them): #

This setting is relevant when the 2nd search bar display is enabled. In this 2nd search bar, autocomplete recognizes and suggests attributes as autocomplete recommendations. When selected, they act as filters on the resulting product list (see example below).

Example: when searching for “blue beanie”, “blue” is recognised as a color and the result lists is filtered by color: blue.

If enabled, this property allows for multiple filter selections from the autocomplete recommendations. When disabled, only the last filter will be applied.

Example Enabled: In this example, we can see both “Accessories” (category) and “Yellow” (color) are recognised in the search bar and applied as filters

Use predefined ordering of the autocomplete recommendations blocks (Words, Categories, Tags, Attributes) #

By default, the autocomplete recommendations will be grouped into several blocks: Words, Categories, Tags, and Attributes; based on the recommendation type. By enabling this setting, the blocks will always have the same order in the recommendations list.

Mix autocomplete recommendations types #

If enabled, recommendations will be mixed, instead of being displayed in grouped blocks. The recommendation type will be displayed as a label under the main text.

Display the tabs from the Autocomplete Right Panel in the product overview #

The Autocomplete Right Panel contains tabs specific to each shop (e.g. Products, Pages, Artists, Themes, etc.) that makes it easier for users to navigate the recommendations list. By enabling this feature, the tabbed view will also be applied to the product overview which is displayed once the search is performed.

This setting is particularly useful when we have a shop with a large number of products and multiple relevant search metrics. For example, a digital art gallery with tens of thousands of pictures, all of them with a corresponding theme and artist. This setting enables site visitors to view, in one search, matching pictures, themes and artists, by toggling between the tabs.

Open products in the new tab #

When the user clicks on a product recommendation from the right autocomplete panel, open the product page in a new tab.

Categories #

Allow multiple categories selection #

When enabled, more than 1 category can be selected by the user at the same time.

Display categories based on their predefined order, instead of alphabetically #

When enabled, categories are displayed alphabetically. When disabled, they are shown based on their pre-defined order in WooCommerce.

Allow current category deselection on click #

When enabled, selected categories can be deselected on click. When disabled, the active categories can be deselected via the “Active Filters” block, by clicking the category name or resetting all filters.

Enabled

Options for deselecting active category – via click on any of the highlighted areas

Disabled

Options for deselecting active category – via click on any of the highlighted areas

Categories URL structure #

From here we can choose which URL structure to use when the user selects a subcategory. The first option offers a shorter URL via the shop page, while the second is a longer option containing the category with all its parents.

! Only one structure can be selected. To change the current structure, deselect the current selection, check the box for the desired option, and click “Save”. If “Save” is clicked with both options checked, no change will occur.

Example – category Accessories (daughter category of “Clothing”)

Using the “Last” URL option: https://saffywp-sta.speedsearch.io/shop/accessories

Using “Full” URL uption: saffywp-sta.speedsearch.io/product-category/clothing/accessories

Filters #

From this settings menu, we can control the display of filters and toggles. Examples of customization that can be done here:

• Re-ordering the way filters are displayed by dragging and dropping blocks.
• Adding swatches for color filters or associate images to brand names.
• Enabling/disabling toggles

The best way of exploring this part of the plugin is by using the Filters demo and tweaking the settings to obtain the desired results.

Post blocks settings #

SpeedSearch has several theme integrations, but they are optional. When enabled, the styling for the product list is the one offered by default by the theme. When disabled, the store owner has full control over what data is displayed in the Product post block.

Example for a store on Flatsome4

With Flatsome4 integration enabled

Without integration

Tags #

Display tags #

You have the option to display tags in the filters section, or not. When enabled, tags will be displayed underneath the filters lists.

Hide unavailable tags #

Based on product availability and current search & filter settings, some tags are sometimes not available (not linked to a product OR not linked to a product matching the current search & filter setup of the site visitor). You can choose to display them in a disabled state (not clickable) or hide them.

Display:

Hide:

Enable multiple tags selection #

When enabled, multiple tags can be selected at the same time.

Pagination #

Enable Infinite scroll #

When enabled, no pagination will be applied and products will be loaded as the user scrolls through the list of products.

When disabled, the products will be paginated.

Posts per page #

Relevant when infinite scroll is disabled. When using pagination, products will be loaded in navigable pages with the number of products per page specified. You can change the number of products per page in the theme customizer.

Ordering options #

The settings in this table control the behavior of the “Sort by” option on the products list page.

There are 2 types of ordering/sorting option: standard (available on plugin installation) and custom (created by the store owner).

For the standard settings, they can be enabled/disabled, which affects their appearance in the ordering dropdown on the products list. From here we can also select which sorting option should be applied on the products list by default and we can reorder the sorting options by dragging and dropping the corresponding rows in the right position.

Ordering options setting

Settings reflected in the sorting dropdown on the product list:

In addition to customizing pre-existing ordering options, store owners can also add custom options via the “Add new” button. For new ordering options, the name and sorting rules are added by the store owner. Each sorting rule can be dependent on product property, tags, or statistics and sorting direction – asc/desc. The sorting rules are taken into consideration in the order that they are added.

Unlike default sorting options, custom options can be deleted.

Adding a custom sorting option – via the “Add new” button

An empty rules row appears at the bottom of the sorting table.

The sorting option name and sorting metrics have to be selected.

A custom sorting option can have multiple sorting metrics. For each metric, the sorting direction has to be mentioned.

Analytics #

SpeedSearch offers search analytics for site-wide searches and for individual products. Depending on their type, the data can be found in the admin panel or on the product page as described below.

Analytics tab #

The Analytics tab in the admin panel contains information about site-wide analytics which covers 4 metrics:

1. Most searched words
2. Most searched sentences
3. Search words without results
4. Most viewed products

Each table is automatically sorted descending based on the number of searches for each entry. The table entries can be sorted ascending or descending based on any table column via the arrows in the table header.

The Analytics functionality will be expanded in the future, with more metrics and more display options (charts, graphs, etc.).

Individual product analytics #

In addition to the general analytics, we also added a SpeedSearch analytics section on the product page. This shows what search words resulted in displaying the product and how many hits each search word had.