Divi Builder
Learn about plugin search form module build for Divi builder and about other built-in integration features.
Learn about plugin search form module build for Divi builder and about other built-in integration features.
Divi Builder is the visual page builder plugin that gives the option to quickly create high quality website pages without any coding skills.
Advanced Woo Search ( AWS ) has a built-in search form module for Divi Builder plugin. By using this module it is possible to place AWS plugin search form at any place on your site when using visual page builder.
When using Divi Builder just find the Advanced Woo Search module from the list of available modules and drag & drop it to any section of the current page.
Search form module for Divi page builder
Once a search form module is added to the page Divi Builder will show a preview of this search form. You can add as many such search forms on your page as you want.
Adding search form via Divi page builder
Search form module has some additional content settings:
Placeholder - Option to set text that will be visible for empty search form and
Form ID - PRO plugin version only. Gives option to specify search form ID that must be displayed. Use it if you have several search form instances.
Search form content settings
It is also possible to add plugin search forms to the site by using standard Divi builder search module and then enable Seamless Integration option from the plugin settings page. This option will replace all standard search forms with the plugin ones. Use this option if you just need to replace all search forms at once.
Standard Divi builde search form module
Seamless integration option
Divi Builder has a feature to customize theme default products search results page. AWS plugin will use this new page layout for showing its WooCommerce products search results.
1. Create a new blank theme template. Navigate to Divi -> Theme Builder page. Click Add New Template and choose Search Results.
On appearing block click on Add Custom Body -> Build Custom Body. Then choose Build From Scratch option to start building your new search results page.
Divi search results template creation
2. Build page template. Find and drag & drop to the page Shop module.
Divi shop module
Open this module settings pop-up and turn on Use Current Page option. Here you can also set some additional options like total products count or number of columns.
Shop module settings
3. Publish the template. Shop module is required for the search results template. Other ones are not necessary but you can add some additional ones if needed.
After all is done just click the Save button and exit from the visual page builder.
Divi custom search results template
Additionally it is possible to create a custom header and footer for this template. But it is not necessary and won't reflect on search results output.
4. Finish! Now all is set. Just check your new search results template by searching something via plugin search form and hit enter key of View all button.
Plugin search form
New template for product search results