This tutorial will assist you to create and customize the Search result page with the Divi Theme Builder.
You can check our Theme Builder Documentation if you want to read more about it:
Creating a Template for the Search Result page in Theme Builder
To get started, navigate to WordPress Dashboard > Divi > Theme Builder, and create a new template for Search Results, then add a New Body for the Search Result template
Once you've created a new Body template for the Search Result page, you have a plain canvas ready using Divi Visual Builder where you can add your choice of images, headers, backgrounds, and colors with section rows as you desire.
To create a Title of the Search Result page
First, add a Heading module in the First section.
Go to the Heading Module settings > Dynamic Content option
Select "Post/Archive Title" for the Dynamic Content.
This heading module is where you will see a Search Result title on the search result page:
Add a Blog Module on the Search Result page
The Blog module is where the Search Results are shown. Therefore, we will need to add a Blog module to the search result page.
Add a new Row or new Section, depending on your design, and add a Blog module in the new Row.
Set the Blog module to Grid layout from the Design tab > Layout settings (preferable) for a better look.
Important Step: Enable the "Post For Current Page" option, in the Blog module. This setting is required for the Blog module to understand that it's a search result page and show results of pages and posts based on the Search query done.
Style your Blog module from the Design tab settings as required.
Save the Theme Builder template. You have created a basic functional search result page.
You can further style the template as you wish, like adding a sidebar in the Row, background images, etc.
If you have Woocommerce Plugin installed on the Website:
If you have a Woocommerce Plugin installed and active on your site, you would want to show the list of products when a product is searched on the website.
To achieve this, we will need to continue from the previous steps above.
Applying condition to the previous Blog module to hide when a product is searched on the website.
Go to previous Blog Module settings > Advanced > Conditions,
Add a new condition 1 with "URL Parameter", set the "A Specific URL Parameter" type in "s" and select "Exist"
Add another condition with "A Specific URL Parameter" type in "post_type" and select "Does not Exist"
Lastly, set the "Display if all conditions are true" as screenshot below:
To display Product results on the Search results page
Now to display Product results on the Search result page, we will need to follow the steps below:
Add a Woo Product Module just below the Blog Module
Important: Enable the "Use Current Page" option in the Woo Product module.
This will make sure that the products shown on the Search Result page will show the products based on the user Search query.
We need to apply similar conditions on the Woo Product module by going into the Advance tab > Conditions > add just one condition with "URL Parameter", set the "A Specific URL Parameter" type in "post_type" and select "Equals" and type in "product"
These conditions are applied to ensure that when a search query is done, if it's a normal search, the result will search through posts and pages and will show in the Blog module
But if the search is done using Woocommerce Product Search form then the result will show Woocommerce Products instead.
Here's a short gif of the Woocommerce Product condition setup:
Save the Theme Builder template and you have a search result page template ready with proper results showing on the search page.