X Buy Features Demo (Cars) Demo (Power Plants) Demo (Map) Showcase Add-ons Docs Changelog


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


Add a button or link with the CSS class of facetwp-flyout-open to trigger the flyout.

<button class="facetwp-flyout-open">Filter</button>

That’s it! Everything below is totally optional.

JS functions

FWP.flyout.open(); // open the flyout
FWP.flyout.close(); // close it

JS hooks

(function($) {

    /* change the facet display order */
    FWP.hooks.addFilter('facetwp/flyout/facets', function(facets) {
        return ['facet3', 'facet1', 'facet2'];

    /* modify each facet's wrapper HTML */
    FWP.hooks.addFilter('facetwp/flyout/facet_html', function(facet_html) {
        return facet_html;

    /* modify the flyout wrapper HTML */
    FWP.hooks.addFilter('facetwp/flyout/flyout_html', function(flyout_html) {
        return flyout_html;

    //* flyout opened */
    FWP.hooks.addAction('facetwp/flyout/open', function() {
        // do something

    /* flyout closed */
    FWP.hooks.addAction('facetwp/flyout/close', function() {
        // do something


HTML defaults

The flyout wrapper HTML (modify via the facetwp/flyout/flyout_html JS hook):

<div class="facetwp-flyout">
    <div class="facetwp-flyout-close">x</div>
    <div class="facetwp-flyout-wrap">
        <div class="facetwp-flyout-content">{content}</div>

The HTML for each facet (modify via the facetwp/flyout/facet_html JS hook):

<div class="facetwp-flyout-facet">
    <div class="flyout-facet-{name}"></div>