Stand with Ukraine. Fight for freedom and democracy

Back to contents

JetWooBuilder: How to Create a Search Page Template

From this tutorial, you will find out how to create a Search Page template using JetWooBuilder plugin.

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.

1 Step — Create a template

Open your WP dashboard and go to the JetPlugins > Jet Woo Templates tab.

add new woo template

You have to create a product archive template in order to set it as a template for the search results page. Click the “Add New Template” button, select the “Archive” option in This template for drop-down, and define the title. Besides that, you can select one of the existing layouts from the Start from Layout section.

archive template creating

Click the “Create Template” button and you will be redirected to the Elementor page builder. You can style, customize, and design the template here.

knowledge base information iconNOTE. Be aware, that you’re building the layout and design of a single item. Those items will be gathered to a listing or a grid and shown when the customer use the serach bar.

After the customization is done, click the “Publish” button.

2 Step — Assign the template to the page

Navigate to the WooCommerce > Settings tab. Switch to the Jet Woo Builder tab and scroll down to the Search Page Template section. Select the newly created search page in the Search Page Template drop-down menu.

assigning the archive templates

Afterward, click the “Save changes” button to save progress.

3 Step — Add a search bar

Let’s add a product search to the website’s header. Go to JetPlugins > Theme Builder and open the header template for editing (this will need an active JetThemeCore plugin). After that, drop the Search widget to the section where you need to add it.

search widget for elementor

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

That’s all! 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.