Add search suggestions to a Search facet.
Add search suggestions below a Search facet.

To add search suggestions (or “popular searches”) below a Search facet, add the following HTML directly below your Search facet.

You can remove or add links with suggested keywords as needed, but make sure to give them the same suggestion class:

[search-suggestions]

Next, add the following snippet to your (child) theme’s functions.php. It adds a click event to the .suggestion links, so that when a user clicks a suggestion, its text is entered as a keyword in the Search facet’s input field, and the facet will immediately start filtering.

[search-facet-suggestions]

Next, (this is optional) add the following CSS. It will make the suggestions look like small buttons, like in the gif above. Depending on your theme’s CSS, you may need to tweak it a bit.

[search-suggestions-css]

The above code can be combined with the code in the “Clear button” tutorial.