Learn how to build products search layout using Divi Builder, starting from WooCommerce Builder 2.1, you can customize the products search page like never before. The search page is responsible for displaying products – not posts or pages – search results. WooCommerce has its own Products Search widget to be used in the sidebar but it looks ugly! And the search page itself is very basic without any touch of elegance.
Before we get started, there is a very important note to keep in mind; the shop page – according to WooCommerce Docs – “is a placeholder for a post type archive for products. It may render differently than other pages in your install.”
Editing this page from the back-end will cause issues especially with the products search results page. So, to save you some time, keep this page empty, don’t add anything to the content area of the shop editing page in the backend.
Divi Library will be the place to build a custom layout for the shop page, – again – not the shop editing page. Read this toturial on how to build the shop page layout.
Use a pre-built layout
1- We provide some free awesome layouts built to save you some time and get you started right away. You can download the free layouts from here.
2- To import the layouts, go to Divi Library -> click Import & Export at the top of the page -> Import tab and select the .json file you download it from the link above.
3- Now, Go to the plugin settings page “Wc Builder” -> Archive & Shop tab -> Search Page Layout and select the layout you want to be used for the search results page.
Done!
Build a custom layout
Building your own layout is very simple just like any other Divi layout if you don’t know how to use Divi Builder, read the official documentation here.
You can build the layout in Divi Library or the Archive Builder. If you want to build it from Divi Library, go to Divi -> Divi Library -> Add New -> Give it the name you want, let’s say “Products Search Layout” and make the type as a layout. You can use the back-end builder or use the visual builder for a better experience.
If you want to build the layout from the Archive Builder, go to Wc Builder -> Archive Builder -> Add New.
Basic elements to add to your search layout:
1- Woo Page title module.
Usually, the search results page title is “Search results:’search term’“, the Woo Page title module will display it as it is. You don’t have to use this module, you can use a text module and add a custom title to your page.
2- Woo Breadcrumb module.
The breadcrumb module indicates the current page’s location, usually, it’ll be something like that “Home / Shop / Search results for “search term””, this module is not required.
3- Woo Notices module.
This is a very important module to include on 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.
4- Woo Archive Products module.
The most important part of this layout is the products list based on the search term used, the Woo Archive module will take care of displaying the products with sorting options, pagination, columns number and more.
5- Woo Products Search module.
It makes sense to add this module to the search page so your clients can search again for products if they didn’t find what they want.
After adding these modules, feel free to use any other Divi built-in module you want depending on your design idea.
Finish building your layout and go to the plugin settings page “Wc Builder” -> Archive & Shop tab -> Search Page Layout and select the layout you just built.
Done!
