This add-on lets you display facets alongside Elementor Pro listings.

Supported widgets

Widget Plugin
Loop Grid Elementor Pro
Posts Elementor Pro
Ultimate Addons for Elementor
PowerPack for Elementor
Premium Addons for Elementor (Blog widget)
Archive Posts Elementor Pro
WooCommerce Products Elementor Pro
Ultimate Addons for Elementor
PowerPack for Elementor
Premium Addons for Elementor
WooCommerce Archive Products Elementor Pro
Listing Grid JetEngine
Post Blocks AnyWhere Elementor Pro (integration built into AEP)
Post Blocks Adv AnyWhere Elementor Pro (integration built into AEP). More info on the integration with FacetWP can be found on this AEP page.
Note: to disable the scroll on page load, see the instructions below.

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.

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.

Shortcodes for facets, listing templates and other features can easily 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.

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.

Using a Loop Grid widget on a WP archive template

Using an Elementor Loop Grid on a WP archive page.
Using an Elementor Loop Grid on a WP archive page.

If you are using an Elementor Loop Grid widget on a WP archive page, make sure to set the “Source” setting to “Current Query”: the native archive query already running on the page.

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.)

You can also choose to not use Elementor’s pagination and instead add a Pager facet, which offers several pager types, among which 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.

Customizing the Elementor Pro Posts widget query

If you are using Elementor Pro with a Posts widget, and you need more control over the query, you can use Elementor’s Custom Query Filter hook.

This hook works similar 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.

The following example adds a fallback sorting method by overriding the original orderby query argument, on category archive pages only:

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

function my_query_order( $query ) { if ( $query->is_category() && $query->is_main_query() ) { $query->set( 'orderby', [ 'date' => 'DESC', // Primary sort: by post date 'title' => 'ASC' // Secondary, fallback sort: by post title ] ); } } add_action( 'elementor/query/{$query_id}', 'my_query_order' );

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 add it with a wp_head hook in your (child) theme's functions.php file or in the Custom Hooks add-on. 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.

Changelog

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