FacetWP Elementor Addon v1.9.4

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.

Warning:In version 3.22.0, Elementor introduced a new Element Caching feature. Element Caching is incompatible with FacetWP. If your facets are not showing (or disappearing after use), or if you see a “FacetWP was unable to auto-detect the post listing” error, make sure to disable Element Caching globally or in every FacetWP-related widget. Supported widgets The following widgets are supported and can be used to create FacetWP compatible listings.

Note that all widgets need to be enabled for FacetWP to be filterable by facets. Plugin Widget name Elementor Pro Loop Grid Loop Carousel 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. The FacetWP Elementor add-on 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. 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”).

Important:Make sure there is only one FacetWP-enabled listing widget on a page. Using multiple FacetWP-enabled listing widgets per page is not supported. After enabling your widget, add one or more facets to the page. You can use facet shortcodes in a Shortcode widget, or use the FacetWP Facet widget. The Elementor add-on adds widgets to add facets, listings, and FacetWP-related buttons: FacetWP Elementor widgets Built-in FacetWP Elementor widgets.

Since v1.8, the FacetWP Elementor add-on comes with three built-in Elementor widgets: FacetWP Facet – adds a facet. FacetWP Listing – adds a Listing Builder listing. FacetWP Button – adds an Apply button, a Flyout button or a Submit button. The FacetWP Facet widget The FacetWP Elementor Facet widget settings. With a “FacetWP Facet” widget you can add an existing facet to your Elementor page.

It is the recommended alternative to adding facet shortcodes with 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 facet overview screen of FacetWP’s settings).

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 (facets with no choices left), including their heading, you can use this code snippet. 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.

With a “FacetWP Listing” widget you can add an existing Listing Builder listing template to your Elementor page. It is the recommended alternative to adding listing shortcodes with 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. Important:There should be only one filterable (non-static) FacetWP listing widget on a page. FacetWP does not support multiple filterable Listing Builder listings on a page. If you do add more than one on a page, even though they will appear to work in the Elementor edit screen, they will not work in the front-end.

If you want to use multiple listings, the only way is to add them as “static” (non-filterable) listings. Use a FacetWP Listing widget on a WP archive template Generally, on archive templates, it would be better not to use a Listing widget, because by default, FacetWP uses the archive’s query, not the Listing widget’s custom query. Using a Listing widget in this case will cause a mismatch between your facets and the posts displayed in the listing.

The recommended setup is to choose a widget that uses the template’s native archive query, like an Archive Posts or Archive Products widget, or a widget that can have its query set to use the “Current Query”, like a Posts, Loop Grid, or Woo Products widget. However, if you don’t want or cannot change the way things are set up, and want to keep using a Listing widget on a WP archive template, you have to tell FacetWP explicitly which query (not) to use. Two ways to do this are described here (option 1 and 2).

Add a static listing Add a static listing with the FacetWP Elementor Listing widget. Since version 1.9.3 of the add-on, it is possible to add static Listing Builder listings with the FacetWP Listing widget. A “static” listing is a listing that does not react to facets. You can even add multiple static listings to a page, also to a page that already has a “normal” filterable (non-static) listing.

But there should be only one filterable (non-static) listing on a page. Note that static Listing Builder listings can also be added with a shortcode or PHP. When using a shortcode, you can add them with a Shortcode widget. The FacetWP Button widget The FacetWP Elementor Button widget settings. With a “FacetWP Button” widget you can add three types of buttons to your Elementor page: An Apply button – disables auto-refresh and applies facet selections on button click.

A Flyout button – opens the Mobile Flyout panel. This option is only available with the Mobile Flyout add-on installed. A Submit button – redirects facet selections to a separate results page. This option is only available with the Submit button add-on installed. 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 an apply/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 To be able to create a Flyout button, first install the Mobile Flyout add-on.

When you then add a “Flyout” button to your page, the button will open the Flyout panel, as described here. Add a “Submit” button The FacetWP Elementor Button widget Listing Page redirect setting. To be able to create a Submit button, first install the Submit button add-on. The Submit button widget is a convenient alternative to adding the Submit button manually or with a shortcode, as described in the Submit button add-on’s setup instructions.

After following the setup instructions and adding the Submit button widget, clicking the button will redirect the page to the URL specified in the “Listing Page” setting field of the widget. When facets on the page have selections, they will be included in the redirect. Add FacetWP shortcodes with a Shortcode widget 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 it into the widget. As an alternative to a Shortcode widget, you can also use an HTML widget. Using FacetWP on WP archive templates 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 other supported widgets, while automatically using the archive query for the results. Note that in archive templates, facets may work even without enabling the “Enable FacetWP” setting on the widget, because of FacetWP’s query autodetection.

However, to prevent issues with pagination, make sure to always enable the “Enable FacetWP” setting, also in archive templates. Important:If your post listing is a WP archive template, use an Archive Posts widget or an Archive Products widget, and not a “normal” Posts widget. Otherwise, FacetWP will detect and use the native archive query for filtering, causing a mismatch between your facets and the posts displayed in the listing.

If you do use a normal Posts widget or a Loop Grid widget on your WP archive template, it is important to set the query to use the native archive query. If you intend to customize the query arguments (e.g. posts_per_page or using meta_query) of an Archive Posts or Archive Products query, or a widget set to use the “Current Query”, check the tutorial on how to customize WordPress archive queries. Using a Posts, Loop Grid, or Woo Products widget on a 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 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: Elementor Posts widget Elementor Loop Grid widget Ultimate Add-ons for Elementor Posts widget Ultimate Add-ons for Elementor Woo-Products widget Depending on the widget, the native archive query can be set in Query > Source (or Query Type) > Current Query (or Main Query). Important: Using “Current Query” (or “Main Query”) as Source in archive templates with FacetWP enabled is required. Don’t use any other query source in archive templates, as this will make FacetWP detect and use the wrong query for filtering, causing a mismatch between your facets and the posts displayed in the listing.

If you intend to customize the query arguments (e.g. posts_per_page or using meta_query) of an Elementor Posts or Loop Grid with its query set to use the “Current Query” (or “Main Query”), you need to use the pre_get_posts hook, and not Elementor’s Custom Query Filter hook. Check the tutorial on how to customize WordPress archive queries for examples. Using a JetEngine Listing Grid Widget on a WP archive template 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 similarly 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 a FacetWP Listing widget on a WP archive template This is not recommended. See the explanation above. Using Elementor pagination 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 does not work with the “Load on Click” or “Infinite Scroll” pagination types. Choosing “Infinite Scroll” will also lead to JS errors in the Console. (Side note: FacetWP will not work with any type of “Infinite load” pagination). If you are using a Loop Grid with pagination, choose “Page Reload” in its Pagination > Load Type setting.

The “AJAX” option will not work with FacetWP. Additionally, Loop Grid widgets have a “Load Type” setting in their Pagination setting. Make sure to choose “Page Reload”. The “AJAX” option will not work with FacetWP. FacetWP will detect Elementor pagination clicks and will use it to trigger AJAX loading itself. 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 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 infoadd_action( 'elementor/query/block_facet', function( $query ) { if ( 0 !== strpos( $query->get( 'post_type'), 'acf' ) ) { // Prevent issues with this hook influencing ACF field based facets. $query->set( 'facetwp', false ); } } ); Note:The extra check in line 2 is to prevent issues with this hook influencing the order of ACF field based facets. You can remove this check if you don’t use Advanced Custom Fields.

Force FacetWP to use a specific post widget query 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 infoadd_action( 'elementor/query/use_facet', function( $query ) { if ( 0 !== strpos( $query->get( 'post_type'), 'acf' ) ) { // Prevent issues with this hook influencing ACF field based facets. $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 ); Note:The extra check in line 2 is to prevent issues with this hook influencing the order of ACF field based facets. You can remove this check if you don’t use Advanced Custom Fields.

Prevent page scroll with the AEP “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. Important:If you are using a Posts widgets or Loop Grid widgets on a WP archive template, with the Query > Source setting set to “Current Query”, don’t use this hook, as it will not work correctly.

Use WP’s pre_get_posts hook instead. Check the tutorial on how to customize WordPress archive queries for examples. Elementor’s Custom Query Filter 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. 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 infoadd_action('elementor/query/my_query_id', function($query) { // Replace "my_query_id" with your unique Query ID if ( 0 !== strpos( $query->get( 'post_type'), 'acf' ) ) { // Prevent issues with this hook influencing ACF field based facets. 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) ] ); } } }); Note:This specific example of adding a fallback sorting method can be useful if you are trying to fix duplicate results in your listing. Note:The extra check in line 2 is to prevent issues with this hook influencing the order of ACF field based facets. You can remove this check if you don’t use Advanced Custom Fields.

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 infoadd_action('elementor/query/query_results', function($query) { $total = $query->found_posts; if ($total == 0) { echo '

No results found.

'; } }); 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. 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