Bricks

This add-on lets you add facets to your Bricks Builder “Posts”, “Query Loop“, and archive listings.

Supported elements

The following Bricks elements are supported:

• Posts.
• Query Loop (built into Container, Block, or Div elements).
• Products (with some custom code).

Usage: “Posts” element

1. 

   Within Bricks, add a new “Posts” element to your page.

2. 

   In the element settings, toggle the Use FacetWP checkbox.

3. 

   After creating some facets, paste their shortcode(s) into a Shortcode element.

Usage: “Query Loop” feature

1. Within Bricks, create a new Div element. This will be the wrapper element that FacetWP needs to auto-detect the listing.
2. Next, add a Container, Block, or Div element (this will be our Query Loop).

3. 

   Within this element, toggle the Use query loop checkbox, then toggle the Use FacetWP checkbox after it appears. Adjust the Query as needed by clicking the “∞” icon.

4. 

   To add some example dynamic data, add a new Heading element and set its content to {post_title}.

5. 

   Finally, in the Structure area (right sidebar), nest the elements so that it looks like Div > Query Loop > Heading.

   Note: “Query Loop” is the element from step 2.

Query Loop – setup video

Usage: “Products” element

If you are using Bricks with WooCommerce, it’s also possible to use Bricks’ “Products” element, by setting the "facetwp" => true query argument with Bricks’ own “bricks/posts/query_vars” filter.

This filter can also be used to customize other query arguments. It works for Posts, Products, and Query Loop elements.

Add the following code to your Bricks child theme’s functions.php, and change the value of $element_id to your “Products” element’s unique ID.

This element ID consists of a string of random characters that can be found in the field above the element’s settings, where it is preceded with #brxe-.

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_filter( 'bricks/posts/query_vars', function( $query_vars, $settings, $element_id ) {
  if ( $element_id === 'yjqekk' ) { // change value to your Products element's unique element ID
    $query_vars['facetwp'] = true;
  }

  return $query_vars;
}, 10, 3 );

See also

• Using FacetWP with Elementor
• Using FacetWP with Beaver Builder