FacetWP Flyout

This is EXACTLY the same product as distributed by the developer. Sales Page

Core Functionality

• Automatic Facet Detection: By default, it automatically pulls all facets currently active on the page (except for Pager, Map, and User Selection facets) and displays them in the flyout.

• Responsive Display: It is typically configured via CSS to only appear on mobile/tablet screen sizes (e.g., < 780px), while keeping standard sidebar filters visible on desktop.

• AJAX Integration: Like the core FacetWP plugin, all filtering within the flyout happens instantly without a page refresh.

Technical Requirements

Implementation & Customization

To use the flyout, you must trigger it using a specific CSS class.

1. The Trigger Button:

You can add a button anywhere in your theme or page builder using this class:

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

2. Elementor Integration:

If you use the FacetWP Elementor add-on, a “FacetWP Button” widget is available. You simply select “Flyout button” from the dropdown settings.

3. Developer Hooks:

The flyout is highly customizable via PHP and JavaScript hooks:

• facetwp/flyout/facets (JS Filter): Change the order of facets or exclude specific ones from the flyout.

• facetwp/flyout/facet_html (JS Filter): Modify the HTML wrapper of each facet (e.g., changing <h3> labels to <h4>).

• FWP.flyout.open() / FWP.flyout.close(): Manually trigger the flyout via custom JavaScript.

Key Limitations

• Excluded Facet Types: The flyout does not natively include the Pager (pagination), Map, or User Selections facets by default, though these can sometimes be added via custom templates.

• Single Instance: You generally cannot have multiple different flyout menus on a single page; it is designed as a global filter container for that specific view.