The Search & Filter – Beaver Builder Extension allows for seamless integration between Beaver Builder and Search & Filter.
With this extension, Search & Filter will now be able to directly integrate and filter the following Beaver Builder Modules:
- Posts Module – including layout options Columns, Masonry, Gallery and List.
- Posts Slider
- Posts Carousel
- WooCommerce
This includes support for Beaver Themer and archive locations.
Install + activate the extension
To get started first we need to enable the integration in our integrations screen.
Ensure you have Beaver Builder enabled.
Then from the Integrations screen, click install extension.
The extension plugin will be automatically downloaded in the background and then enabled.
If there are any issues downloading the extension, you can download it from your account and install it manually.
Create a query
Head to Queries in the main navigation, then press Add New to create a new query.
Ensure that location is set to dynamic and then choose Beaver Builder Module from the dropdown:
Give your query a name, hit save and your query is good to go.
There are a lot of settings to fine tune your results.
Create a field
After saving your query, you’ll find your connected fields below. There won’t be any initially – press Add New to create one.
From here you can create as many fields as you need and connect them to the same query.
When creating fields for queries, ensure the query integration option is set to the correct query.
Adding fields to your site
Once you’ve created some fields, you can add them to your Beaver Builder powered site using the Search & Filter Field Module.
Note: using shortcodes to place fields can lead to unexpected behaviour, it’s always best to use the Field Module.
Once you’ve added the module to your page you can choose the field you created earlier from the dropdown:
Filtering the Loop Module (new), Posts, Posts Slider & Posts Carousel Modules
To integrate with Beaver Builders Loop Module or one of the Posts Modules, first ensure that you’ve set the Beaver Builder Module option in your query as described above.
The next step is to connect your Loop/Posts Module to your Search & Filter query:
- Head to the Content panel
- Under Source, choose Search & Filter
- Then choose your query from the dropdown
Once connected Search & Filter is now ready to work with the Posts Module.
Filtering the WooCommerce Module
To integrate with any of the WooCommerce Module, first ensure that you’ve set the Beaver Builder Module option in your query as described above.
The next step is to connect your WooCommerce Module to your Search & Filter query:
- From the layout dropdown, choose Multiple Products
- Under Products Source, choose Search & Filter
- Then choose your Search & Filter Query from the dropdown
Note: you can also use the Posts Module to display WooCommerce Products, once you connect a query that uses WooCommerce Products, additional layout & styling options will be available.
Beaver Themer
Search & Filter will automatically integrate with archives built with Beaver Themer.
Usually for an Archive location you’ll want to use the Posts Module.
It’s recommended to set to set the Content -> Source to use the Main Query:
When setting up an archive using the Main Query, the Search & Filter query must also be configured to use the archive query:
