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>

If you want to hide the button for desktop users, add this into your style.css:

@media (min-width: 780px) {
    .facetwp-flyout-open {
        display: none;

That’s it! Everything below is totally optional.

JS functions

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

JS hooks

(function($) {

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

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

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


Adding extra content

To add extra flyout content, add a .facetwp-flyout-tpl HTML element on the page. It will automatically get hidden with CSS.

Within this element, add a {content} placeholder to automatically output the facets. Then add additional content above or below this placeholder. Here’s a full example:

<div class="facetwp-flyout-tpl">
  This text appears above the facets!
  This text goes below the facets.



* Added support for custom flyout content (see the “Adding extra content” section in the docs)

* Modified CSS classes to allow for better style targeting