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.
To show Woocommerce products on the search results:
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.
If you want the Search forms to only show Woocommerce Products and not use any search forms to search through any pages or posts of your site.
To achieve this, we will need to continue from the previous steps above but instead of using Blog module, you can use Woo Product module.
Go to the Search result template > Body template.
Delete the old Blog module which are used to show pages and posts for result and use Woo Product module instead:
Important Step:
It's very important to enable "Use Current Page" option in the Woo Product module:
Enabling "Use Current Page" option will make sure that the relevant products are shown in the Woo product module when a search is performed.
Additionally, you can enable the "Show Pagination" option in the Woo Product module.Go to WordPress Dashboard > Divi > Theme Options > Integration > <head> and add this code there:
<script>
jQuery(document).ready(function(){
jQuery('.et_pb_module.et_pb_search form input[type="hidden"]').remove();
});
</script>This code will make sure if any Divi builder Search module is used on the site, it will search the products according to it.
Save the Theme Options and you have your search result page ready with showing only products.
(❗Rare case❗) If you have multiple/separate Search forms in the website. The default header Search form to show Pages and Posts on the search result and a separate form for products search for Woocommerce Products using Search Module in Divi Builder.
To achieve this, we will need to use both Blog module (to show results of Pages and Posts) and Woo Product Module (to show product results) in the search result page with some conditions.
Important: Using this method will show the following result:
the default header search form will show the results of Pages and Posts
Using a separate Search Module Form to show search results of the Products.
To get started, follow the steps below:
We will start with the previous layout like this:
Having the Blog module on the second row only.
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.
Now go to any page where you have used the Search Module to search for the products only.
Go to the Search module settings > Advance > look for CSS Class field and define this CSS Class to that search module: "myproduct_search"
Save the Search module.Go to WordPress Dashboard > Divi > Theme Options > Integration > <head>, add this script there:
<script>
jQuery(document).ready(function(){
jQuery('.myproduct_search form input[type="hidden"]').remove();
jQuery('<input type="hidden" value="product" name="post_type">').insertAfter(".myproduct_search form .et_pb_s");
});
</script>Save the Theme Options.
Here's the expected result:
* The default header search form will search only pages and posts showing Blog module in the Search result.
* The custom Search Module using from Divi Builder will only search through Products and will show Woo Product Module in the search result.
