The Search & Filter – Divi Extension allows for seamless integration between Divi 5 and Divi 4, with Search & Filter.
With this extension, Search & Filter can directly integrate and filter the following Divi Modules:
- Loop Element – Modules which support the Loop Element feature such as the row, column, and group modules – almost all modules support the Loop Element.
*Divi 5 Only. - Blog Module. Divi 5 & Divi 4.
- Shop (WooCommerce) Module. Divi 5 & Divi 4.
- Portfolio Modules. Divi 5 & Divi 4.
- Archive Queries. Divi 5 & Divi 4.
- Supports both the Divi Theme and Divi Builder plugin.
Install + Activate the Extension
Head to wp-admin -> Search & Filter -> Integrations and enable the Divi integration. This will automatically download and enable our Divi extension in the background.
Manual Installation
Alternatively you can download the extension plugin and install it on your WordPress website via the extension page in your account.
- Ensure you have the Divi 5 or Divi 4 theme or builder plugin enabled.
- Upload the extension plugin and activate it.
Supported Versions
Our extension plugin supports both Divi 4 and Divi 5, and works with both Search & Filter v2 and v3 (Divi 5 support is only available with Search & Filter v3).
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 or Archive and then choose Divi Module from the query 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 in the Fields tab. 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 Divi site using the Search & Filter Field Module.
Once you’ve added the element to your page you can choose the field you created earlier from the dropdown:
Filtering Modules + Loop Element
Divi 5 allows you to create loops out virtually all modules including layout modules like rows and columns, and much more.
Using our Divi integration, you’ll now see a new option when you enable the Loop Element option -> Search & Filter Query.
Enabling this overrides the default query settings and allows you to connect the query to the Search & Filter Query you created earlier.
Once you’ve connected the query you should be good to go.
Note: to use Search & Filter’s Live Search feature, you need to ensure your module with the loop element enabled inside a wrapper container (ie, a row, column or div) which we’ll use as the container that gets reloaded via ajax live search.
Filtering Blog, Products & Portfolio Modules
Enable the Search & Filter Query option to connect with your Blog, Porfolio and Woo Products elements.
Once that’s done, you’re good to go, all features such as Live Search are automatically supported.
Filtering Archives
Creating Archives in Divi is handled via the Templates system.
Head to Divi -> Theme Builder -> Add New Template.
Once you’ve chosen the Build New Template or Add From Library option you’ll be presented with the settings popover where you can define which archive to use your new template on.
Once you’ve configured your template you can setup your modules the same way as before, using the Use Search & Filter setting.
This applies to all modules:
- Blog
- Woo Products
- Portfolio
- Modules with the Loop Feature enabled
Set Your Search & Filter Query to Archive
Once you’ve connected your module to a Search & Filter Query, you’ll need to make sure your Search & Filter Query is also setup to use Archives.
Location should be set to Archive.
Archive Type should be set to Posts or Taxonomies.
Query should be set to Divi Module.
Pagination
For the Divi modules that support it pagination is automatically supported including via live search with ajax.