Beaver Builder

Use FacetWP alongside Beaver Builder and (optionally) Beaver Themer.

Supported modules

1. Posts
2. WooCommerce
3. Advanced Posts (requires the UABB plugin)
4. Woo Products (requires the UABB plugin) ^NEW!
5. Content Grid (requires the PowerPack plugin)
6. Product Grid (requires WooPack)

Usage

If you’re using a supported listing module (see above), you’ll see a new “FacetWP” setting on the module’s edit screen.

Set it to “Enabled” for FacetWP to use the listing for filtering.

Next, add some facets to the page. When editing the page via Beaver Builder’s visual mode, click the blue “+” to display available modules. Within that area, you’ll see a new “FacetWP” section.

Select the “Facet” option, then choose an existing facet:

Other FacetWP features (Sort, Selections, etc.) are available as modules too.

Pagination

In most cases, FacetWP will automatically detect Beaver Builder’s numbered pagination. However, you can optionally set the module’s pagination to “None” and use a Pager facet instead.

Archive pages

Beaver Themer allows you to design layouts for Archive pages (blog posts archive, taxonomy archives, etc).

You will need to set the Content > Source in your posts module for the archive to Main Query. This ensures the WordPress archive query is used for both Beaver Builder and FacetWP.

Customizing a Posts module query

If you need to adapt or override the query of a Posts module, you can use Beaver Builder’s fl_builder_loop_query_args hook. For example if you want to display only specific custom post types, change the order, or use a meta query.

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 the front page 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_args ) {
  if ( is_front_page() ) {
    $query_args['orderby'] = array(
      'date'  => 'DESC', // Primary sort: by post date
      'title' => 'ASC'   // Secondary, fallback sort: by post title
    );
  }
  return $query_args;
}
add_filter( 'fl_builder_loop_query_args', 'my_query_order' );

For more examples of how to use this hook, including how to apply it only to a specific module, see this Beaver Builder tutorial.

For an overview of all available Beaver Builder hooks, see this page.

See also

• How to customize WordPress archive queries
• Using FacetWP with Elementor