In this article, you will learn how to build a custom layout for the products search results page.
Table of Contents
What is this page?
The search results page is not a real page that you can find under the admin dashboard -> Pages. By default, WooCommerce uses the same template of the shop page for the search results page. It displays products that match the search term used by the user.
Our WooCommerce Builder plugin comes with a products search module, you can add this module anywhere on your website to add a search form. When your client uses this search form looking for a specific product, a page with the search results will open, this is the page we are talking about here.
Divi comes with a search form on the top header, our plugin does not affect that search form or its page.
Before you start
For this page to work you must have a shop page set correctly. When you install WooCommerce for the first time, WooCommerce creates that page under the admin dashboard -> Pages. ou don’t have a shop page, create one.
Next, make sure you have the following:
1- The shop page has no content at all and don’t even activate Divi Builder on it in the back-end, keep the WordPress default editor active whether it is the classic editor or Gutenberg.
2- Select that page as the “Shop page” under WooCommerce -> Products tab -> Shop page.
Now, you are ready to build a layout for this page.
Remember! Keep the shop page empty on the back-end and don’t even activate Divi builder on the page because this will hide all the products. Divi Library is the place to build a layout for the shop & the search pages.
This is just how WooCommerce works with Divi.
Build the layout
Get started
1- Go to your admin dashboard -> Divi -> Divi Library.
2- At the very top, click “Add new,” a new layout popup will open. Here you can set the layout name and the layout type.
You can name the layout whatever you want but make sure you select “Layout” as the layout type. And then, click the “Submit” button.
3- Divi Builder will open, you can use the back-end builder or the front-end build, it’s completely up to you.
But for the search results products be displayed on the front-end, you will need to add some of our custom modules.
The search results modules
Here we use the same modules as the shop, categories, and tags. All of these pages are archive pages.
This is a list of the most important modules you need to use:
1- Woo Notices
This is a very important module to add to every WooCommerce layout you build using the WooCommerce Builder plugin. This module displays a variety of messages from WooCommerce like when a product is added to the cart or there is no enough stock of a specific product and so on.
You can place this module anywhere you want but it is recommended to add it to the top of the layout so it’s very obvious for your clients.
2- Woo Page Title
This module will display the page title, in case of the search results page, it is usually “search results for ‘the search term'”. You don’t have to use this module, you can use a text module and add a custom title to your page.
3- Woo Breadcrumb
The breadcrumb module indicates the current page’s location, usually, it’ll be something like that “Home / Current Page”, this module is not required.
4- Woo Archive Products
The module is responsible for displaying the search results.
5- Woo Products Search
The module adds a search box to your page to search for products, it’s very helpful if you have a lot of products and want to make it easy for your clients to get what they want. It is not required to use this module but it is a nice feature to have.
Apply the layout to the search page
After finishing the layout, you will need to apply the layout. To do that, go to your WordPress admin dashboard -> Wc Builder -> Shop & Archive tab -> Search Page Layout.
Select the layout you just created from the drop-down menu and save the changes.