FacetWP – Flyout

This add-on generates a flyout sidebar which can help with mobile support.

To see it in action, browse to our Cars demo then shrink your browser width until you see the purple “Show filters” button.

By default, the flyout shows all facets that are on the page itself (except Pager facets, Map facets and User Selections), in the same order as they are on the page, including multiple instances of the same facet.

If you want to limit the facets shown in the flyout, or change their order, see the example below. User Selections (and other content or extra elements) can be added to the flyout by adding them to the flyout’s template, as demonstrated in the example below

First, download and install the add-on plugin, and activate it.

Then, add a button or link with the CSS class facetwp-flyout-open to trigger the flyout:

This makes the button text a translatable string that will appear in e.g. WPML string translations or any other translation plugin. The string can also be translated with WP’s gettext filter. The button text can now also be translated with the facetwp_i18n hook.

Hide the flyout button or link on desktop widths

If you want to hide the button/link for desktop users, add the following into your style.css. This hides the flyout button/link on window/device widths above 779px (adjust the width as needed):