This add-on lets you display facets alongside a range of Elementor listing widgets. These widgets are available when using Elementor Pro, or one of the mentioned Elementor plugins.

With this add-on installed, FacetWP also adds three widgets of its own, for adding facets, Listing Builder listings, and FacetWP-related buttons. These widgets also work with the free version of Elementor.

Supported widgets

The following widgets are supported and can be used to create FacetWP compatible listings:

Plugin Widget name
Elementor Pro Loop Grid
Posts
Archive Posts
Products (with WooCommerce)
Archive Products (with WooCommerce)
Ultimate Addons for Elementor Posts
Woo – Products (with WooCommerce)
Premium Addons for Elementor Blog
Woo – Products (with WooCommerce)
PowerPack for Elementor Advanced Posts
Woo – Products (with WooCommerce)
JetEngine Listing Grid
AnyWhere Elementor Pro Post Blocks
Post Blocks Adv

FacetWP does not support AEP directly. The integration is built into AEP.

Note: to disable the scroll on page load, see the instructions below.

FacetWP adds the following widgets:

Plugin Widget name
FacetWP FacetWP Facet
FacetWP Listing
FacetWP Button

Usage

How to enable FacetWP in a supported Elementor listing widget.
How to enable FacetWP in a supported Elementor listing widget.

After installation and activation, there is no further configuration needed for this add-on plugin.

When it is active, supported Elementor listing widgets will display an extra “Enable FacetWP” setting. If this setting is enabled, FacetWP will use this listing as the one to dynamically filter with facets.

The Archive Posts and WooCommerce Archive Products widgets are meant to be used on WP archive pages. Other widgets, like the Posts widget or the Query Loop widget, can be used both on normal pages and on WP archive templates (if you set the Query Source setting to use the “Current Query”).

FacetWP’s own built-in widgets can be used to add facets, listings and FacetWP-related buttons:

FacetWP Elementor widgets

Built-in FacetWP Elementor widgets.
Built-in FacetWP Elementor widgets.

Since v1.8, the FacetWP Elementor add-on comes with three built-in Elementor widgets:

  1. FacetWP Facet – adds a facet.
  2. FacetWP Listing – adds a Listing Builder listing.
  3. FacetWP Button – adds an Apply button, a Flyout button or a Submit button.

The FacetWP Facet widget

The FacetWP Elementor Facet widget settings.
The FacetWP Elementor Facet widget settings.

With a “FacetWP Facet” widget you can add an existing facet to your Elementor page. The widget is a convenient alternative to adding facet shortcodes in a “Shortcode” or “HTML” widget.

After adding the widget to your page, use the “Facet” setting dropdown to select one of your existing facets. The dropdown will show all previously created facets, including the User Selections facet (which does not appear in the back-end facet overview).

Optionally, add a facet heading by entering a text in the “Header” field and selecting the HTML tag to use for it. If you want to hide empty facets, including their heading, you can use this code snippet.

The FacetWP Elementor Facet widget editor placeholder.
The FacetWP Elementor Facet widget editor placeholder.

Note that facets will not display in the Elementor editor: a placeholder is shown instead. Check your front-end page to see if your facets are functioning correctly. If they are not appearing, make sure you also have added a listing to the page. This can be a supported Elementor widget, a Listing Builder listing (added with a Listing widget), or any other supported listing template type.

The FacetWP Listing widget

The FacetWP Elementor Listing widget settings.
The FacetWP Elementor Listing widget settings.

With a “FacetWP Listing” widget you can add an existing Listing Builder listing template to your Elementor page. It is a convenient alternative to adding listing shortcodes in a “Shortcode” or “HTML” widget.

After adding the widget to your page, use the “Listing” setting dropdown to select one of your previously created Listing Builder listings.

Unlike the Facet widget, the Listing widget will show your listing, including its full layout, in the Elementor editor.

The FacetWP Button widget

The FacetWP Elementor Button widget settings.
The FacetWP Elementor Button widget settings.

With a “FacetWP Button” widget you can add three types of buttons to your Elementor page:

  1. An Apply button – disables auto-refresh and applies facet selections on button click.
  2. A Flyout button – opens the Mobile Flyout panel.
  3. A Submit button – redirects facet selections to a separate results page.

Use the “Choose Type” setting to select the desired button type. Then change the button text and styling settings as needed.

Add an “Apply” button

When you add an “Apply” button to your page, it will disable FacetWP’s auto-refresh function and apply facet selections only when the button is clicked.

Adding this button type does exactly the same as explained in our tutorial on how to disable facet auto-refresh and add a submit button. It will also automatically add the mentioned JavaScript snippet that disables auto-refresh to your page. As described in this tutorial, this button will disable auto-refresh for all facet types, except for Pager facets and Reset facets. If needed you can re-enable auto-refresh for individual facets or facet types with FWP.refresh(), for example when using a Sort facet.

Add a “Flyout” button

When you add a “Flyout” button to your page, and you have the Mobile Flyout add-on installed, the button will open the Flyout panel, as described here.

Add a “Submit” button

The FacetWP Elementor Button widget Listing Page redirect setting.
The FacetWP Elementor Button widget Listing Page redirect setting.

When you add a “Submit” button to your page, and you have the Submit Button add-on installed, the button will redirect to the page specified in the “Listing Page” field. When facets have selections, they will be included in the redirect.

The Submit button widget is a convenient alternative to adding the Submit button manually or with a shortcode.

Add FacetWP shortcodes with a Shortcode widget

How to use an Elementor Shortcode widget to add facets or listings.
How to use an Elementor Shortcode widget to add facets or listings.

Instead of using FacetWP wigets, shortcodes for facets, listing templates and other features can also be added with an Elementor Shortcode widget.

Just copy the shortcode from the FacetWP overview page or facet/listing settings page, and paste them into the widget.

As an alternative to a Shortcode widget, you can also use an HTML widget.

FacetWP on WP archive templates

Elementor archive widgets.
Elementor archive widgets.

FacetWP can also be enabled on WP archive templates created with the Elementor Theme builder.

The Archive posts widget (for posts, pages, and custom post types) and the Archive products widget (for Woocommerce product archives) can be enabled in their settings for FacetWP in the same way as the above widgets, while automatically using the archive query for the results.

To change or set any query arguments (like posts_per_page) of an Archive Posts or Archive Products query, you can use a pre_get_posts hook.

Using a Posts, Loop Grid, or Woo Products widget WP archive template

To use an Elementor Posts or Loop Grid widget, or an UAE Posts or Woo Products widget on a WP archive page, set the 'Query' setting to use the 'Current Query' or 'Main Wuery'.
To use an Elementor Posts or Loop Grid widget, or an UAE Posts or Woo Products widget on a WP archive page, set the “Query” setting to use the “Current Query” or “Main Query”.

If you are using one of the following widgets on a WP archive page page, make sure to set it to use the native archive query that is already running on the page:

Depending on the widget the native archive query can be set in Query > Source (or Query Type) > Current Query (or Main Query).

To change or set any query arguments (like posts_per_page) of an Elementor Posts or Loop Grid query, you can use Elementor’s Custom Query Filter hook.

Using a JetEngine Listing Grid Widget on a WP archive template

Using JetEngine Listing Grid Widget on a WP archive page.
Using JetEngine Listing Grid Widget on a WP archive page.

If you are using a JetEngine Listing Grid Widget on a WP archive page, make sure to enable the setting “Use as Archive Template”.

This setting works similar to the “Source > Current Query” setting in native Elementor widgets. If enabled, the widget’s query settings will be ignored, and the native WP archive query that is already running on the page will be used instead.

Using Elementor pagination

Elementor Posts or Archive Posts widget pagination settings.
Elementor Posts or Archive Posts widget pagination settings.

If you are using Elementor’s pagination (which you can set in Posts, Archive Posts or Loop Grid widgets), FacetWP will detect this pagination and convert it for use with AJAX filtering.

However, this will only work for the pagination options that have numbered pagination. FacetWP will not work with the “Load on Click” or “Infinite Scroll” pagination types. (Side note: FacetWP will not work with any type of “Infinite load” pagination.)

If the integration with Elementor pagination is not working correctly, you can also use a Pager facet, which offers several pager types, like numbered pagination and a “Load more” type.

Block FacetWP from using the wrong post widget query

Add a block_facet Query ID in Elementor
Add a block_facet Query ID in Elementor

If FacetWP is identifying the wrong query in Elementor, you can use the query_id setting to block FacetWP from using a post widget query that it shouldn’t.

Give the ‘Query ID’ setting in the Elementor widget a value of block_facet, and add this code to your (child) theme’s functions.php:

How to use custom PHP code?

PHP code can be added to your (child) theme's functions.php file. Alternatively, you can use the Custom Hooks add-on, or a code snippets plugin. More info

add_action( 'elementor/query/block_facet', function( $query ) { $query->set( 'facetwp', false ); } );

Force FacetWP to use a specific post widget query

Add a use_facet Query ID in Elementor
Add a use_facet Query ID in Elementor

You can force FacetWP to use a specific Elementor query ID. Give the ‘Query ID’ setting in the Elementor widget a value of use_facet, and add this code to your (child) theme’s functions.php:

How to use custom PHP code?

PHP code can be added to your (child) theme's functions.php file. Alternatively, you can use the Custom Hooks add-on, or a code snippets plugin. More info

add_action( 'elementor/query/use_facet', function( $query ) { $query->set( 'facetwp', true ); } ); add_filter( 'facetwp_is_main_query', function( $is_main_query, $query ) { if ( true !== $query->get( 'facetwp', false ) ) { return false; } return $is_main_query; }, 10, 2 );

Prevent page scroll with the AEP “Post Blocks Adv” widget

Prevent scrolling on page load with the AnyWhere Elementor Pro Post Blocks Adv widget.
Prevent scrolling on page load with the AnyWhere Elementor Pro Post Blocks Adv widget.

If you are using the AnyWhere Elementor Pro “Post Blocks Adv” widget (which has FacetWP integration), you may see the page scroll to the top of the results after interacting with facets.

This scroll on (AJAX) page load can be disabled by the “Disable Scroll to Top on Load” option, located under the “Pagination” section of the Post Blocks Adv widget.

Be aware that this Pagination section can be hidden if you happen to have the “Infinite Scroll” option enabled in the “Layout” section. If that is the case, disable the Infinite Scroll option, then go to the Pagination section and enable the “Disable Scroll to Top on Load” option.

It’s best to then keep the Infinite Scroll option disabled because FacetWP does not support any form of infinite scroll. The closest thing is the Pager facet, which has a pager type that generates a “load more” button, working similar to infinite scroll.

Customize the Elementor Posts or Loop Grid widget query

If you are using Elementor Pro with a Posts widget or a Loop Grid widget, and you need to adjust the query, you can use Elementor’s Custom Query Filter hook.

If you are using a Posts widgets or Loop Grid widgets on a WP archive template, the Query > Source setting must be set to “Current Query” to make these widgets work correctly. However, in this case, the widget will not display any query settings anymore, and the “Posts per Page” setting (under Layout) will have no effect. In this situation, this hook is the best way to change or set any query arguments, like posts_per_page.

This hook works similarly to WP’s pre_get_posts hook. It exposes the WP_Query object and allows you to customize the query in any way you want.

How to give your widget's query a unique Query ID.
How to give your widget’s query a unique Query ID.

In the following example, we add a fallback sorting method by overriding the original orderby query argument, and we change the default posts_per_page to 12. We also add an extra (optional) condition to let the hook run on category archive pages only.

Make sure to replace my_query_id with the unique Query ID you have set in the “Query ID” setting of the widget:

How to use custom PHP code?

PHP code can be added to your (child) theme's functions.php file. Alternatively, you can use the Custom Hooks add-on, or a code snippets plugin. More info

add_action('elementor/query/my_query_id', function($query) { // Replace "my_query_id" with your unique Query ID if ($query->is_category() && $query->is_main_query()) { // Optional conditions $query->set( 'posts_per_page', 12 ); $query->set('orderby', [ 'date' => 'DESC', // Primary sort: by post date, descending (from new to old) 'title' => 'ASC' // Secondary, fallback sort: by post title, alphabetically (from A-Z) ]); } });

Add a custom “No results” message for Posts or Loop Grid widgets

To add a custom “No results” message when a Posts or Loop Grid widget does not return any results, add the following snippet to your (child) theme’s functions.php:

How to use custom PHP code?

PHP code can be added to your (child) theme's functions.php file. Alternatively, you can use the Custom Hooks add-on, or a code snippets plugin. More info

add_action('elementor/query/query_results', function($query) { $total = $query->found_posts; if ($total == 0) { echo '<h2>No results found.</h2>'; } });

For more elaborate ways to do this, check out the answers in this forum thread, or consider using this plugin.

Fix issues caused by Elementor’s Motion Effects options

There are several known incompatibilities with the following Advanced > Motion Effects pane options of Elementor sections/widgets:

Do not use Elementor Pro’s “Sticky” option

Do not use Elementor Pro's Sticky or Entrance Animation options.
Do not use Elementor Pro’s “Sticky” or “Entrance Animation” options.

If you have Elementor Pro installed, Elementor sections/widgets will have a “Sticky” option in their Advanced > Motion Effects options pane. The option creates a “sticky scrolling” effect.

This “Sticky” option is incompatible with FacetWP when used on sections/widgets containing facets or listings.

If this option is enabled, Elementor’s JavaScript will dynamically duplicate the section/widget in the code (invisibly) when the page is scrolled. This causes the facets or listings within the section/widget to be duplicated too, resulting in several issues with FacetWP.

One noticeable effect will be duplicate facets in the Mobile Flyout, if you are using that.

If you need a “sticky” effect on certain page elements, use a script that does not duplicate elements. Or better yet, create the effect by using the position:sticky property in CSS:

How to use custom CSS?

CSS code can be placed in your (child) theme's style.css file. Alternatively, you can add it manually between <style> tags in the <head> section, in your (child) theme's header.php file. You can also load it with a hook in your (child) theme's functions.php file, or in the Custom Hooks add-on. To load the code only on pages with facets, use the facetwp_scripts hook. To load it on all pages, use wp_head or wp_footer. Or you can use a code snippets plugin. More info

.myelement { position: sticky; top: 20px; }

This solution is also used on this Help Center page for the sticky right sidebar.

Do not use Elementor’s “Entrance Animation” option

All Elementor sections/widgets have an “Entrance Animation” option in their Advanced > Motion Effects options pane. When enabled, this option sets the section/widget to be invisible and lets it appear with an entrance animation when you scroll down the page.

Entrance Animations are incompatible with FacetWP when used on widgets containing facets or listings. Enabling this option will lead to issues like posts not showing up after filtering.

Do not use facets in Elementor popups

We regularly see users trying to get facets working within Elementor popups. Unfortunately, Elementor popups are incompatible with FacetWP.

The closest alternative is the Mobile Flyout add-on which was built specifically for mobile support.

Fix the Elementor JSON error

If you are using Elementor 3.17 – 3.19.4, you will likely encounter an issue with facets not working. The cause is a JSON error occurring in the AJAX refresh data returned to FacetWP, which in turn causes FacetWP to be unable to process the response.

This error is caused by an incompatibility with a new feature of Elementor called “Optimize Image Loading”, which seems to be enabled by default. We are trying to get Elementor to solve the cause of the issue.

Currently, there are three ways to fix this issue:

  1. You can disable the “Optimize Image Loading” setting in the Elementor settings here:
    Elementor > Settings > Features > Optimize Image Loading.
Disable Elementor's 'Optimize Image Loading' setting to prevent a JSON error.
Disable Elementor’s ‘Optimize Image Loading’ setting to prevent a JSON error.
  1. Or, you can install or update our Elementor integration addon. Version 1.9+ contains a fix.
  2. Or, you can add the following snippet to your (child) theme’s functions.php:​

How to use custom PHP code?

PHP code can be added to your (child) theme's functions.php file. Alternatively, you can use the Custom Hooks add-on, or a code snippets plugin. More info

add_action( 'shutdown', function() { if ( FWP()->request->is_refresh ) { $buffer = ob_get_status(); if ( 'Elementor\Modules\ImageLoadingOptimization\Module::handle_buffer_content' == $buffer['name'] ) { ob_end_flush(); } } }, - 1 );

Changelog

1.9

  • Fixed Removed Elementor Pro requirement
  • Fixed JSON issue caused by the experimental Elementor 'Optimize Image Loading' setting

1.8.1

  • Improved minor label and styling tweaks

1.8

  • New added Elementor widget to easily add FacetWP shortcodes

1.7

1.6.7

  • New added support for "Premium Addons for Elementor" [Posts] and [WooCommerce] widgets

1.6.6

  • Fixed refined the JS refresh handler to (hopefully) account for edge cases

1.6.5

  • Fixed better compatibility with Elementor toggles and other dynamic elements

1.6.4

  • Fixed Elementor no longer runs a separate "theme builder template" query, so we're adjusting our logic accordingly

1.6.3

  • Improved removed jQuery dependency

1.6.2

  • Fixed prevent error when FacetWP is disabled

1.6.1

  • Fixed issue with WC Products widget not detecting the right query

1.6.0

  • Important this version requires FacetWP 3.6.0 or above
  • Improved compatibility with FacetWP 3.6.0+ and Elementor 3.0+

See also