Back to contents

JetWooBuilder: How to Create a Search Page Template

From this tutorial, you will find out how to create a Search results template using JetWooBuilder plugin which is a must-have addon for product pages.

JetWooBuilder plugin helps you create WooCommerce templates using loads of special widgets, and create truly stylish page layouts.

It is easy to create the needed page structure for the WooCommerce product or Archive page without digging into the code.

How to create a Search results template for products

Step 1 — First, select the WooCommerce > Jet Woo Templates tab in the WordPress Dashboard sidebar.

jetwoobuilder wp dashboard

Pay attention, that you have to create a different product archive template in order to set it as a template for the search results.

Step 2 — In order to create an archive to showcase search results, click the Add New Template option and select the Archive template type.

You are able to select one of the existing layouts from the Start from Layout section.

archive template creating

Step 3 — Then, click the Create Template button and you will be redirected to the Elementor page builder. You can style, customize and design the template here.

Please, note, that now you’re designing the looks of the one product that will be shown either in a grid or in the form of a listing among the other search results.

Step 4 — After the customization is done, click the Publish button and navigate to the WooCommerce > Settings tab.

jetwoobuilder settings

Step 5 — Switch to the Jet Woo Builder tab where you can set a search page template.

Step 6 — Scroll down to the Search Page Template section. You have an opportunity to select the newly created shop page to use it as a global cross search page template there.

Step 7 — Afterwards, click the Save changes to save progress.

Step 8 — Now let’s add a product search to the website’s header or any other page to enable the visitors’ search for the products. Open the header template for editing (either in JetThemeCore > My Library or in Elementor Pro). After that, drop the Search widget to the section where you need to add it.

search widget for elementor

Step 9 — Enable Is Product Search option and change the placeholder text to enable the product search. Then save the changes.

That’s fine! Now you can type in the search request matching several of the product titles and you’ll see the search results shown in the form of a template you’ve set for them.