Most of websites have search and result form. No matter search or result, there are 2 popular ways to customize them. They are horizontal and vertical arrangements.
CP Live Search is one of WordPress plugins that allows you to create both search and result form.
Using CP Live Search to create a new page for search & filter result form, you have to follow 5 steps below:
Step 1: Add a new page.
- Click “Add New Page”, then click “Edit with KingComposer”
Step 2: Select the horizontal or vertical page layout
To show the page with search & filter result form in vertically page layout, just do the steps in step 2. In contrast, you would like your page in horizontally, please dismiss this step and move to step 3
- Click “Element”
- Click tab “All”, then select “Row Inter”. Then setting row layout with 2 columns.
- Click “Add Element” to add search form and result form.
- You can adjust the size of the form search and form result, just drag & drop the line between the two elements.
Step 3: Select the search form template
- Click “Element”.
- Choose tab “CPLS Form”, then you can create a new search form or choose an existing search form template (the one that you created and saved before). It had better choose the search form template as it will help you save a lot of time. You can find a guide to creating a search form template here.
- Choose your search form template and click “Save”
Step 4: Select the result form template
- Click icon “+” below “Form template” to add a new element.
- Choose tab “CPLS Result”, then you can create a new result form or choose an existing result form template (the one that you created and saved before). Like step 3, you should choose the existing result form
- After that, you can choose result template and determine the styling your result page with many tabs such as General, Styling wrap, styling item.
- Tab General: Choose result and setting show result.
With tab “Styling wrap” you can set the number of items per line on your laptop, tablet or mobile interface.
Example 1: We will install an item per line for the desktop.
The results displayed outside the frontend will look like this.
Example 2: And now we will set up 3 items per line for the desktop.
The results displayed outside the frontend will be as shown below
- Tab Styling wrap with styling for item per line (Desktop, tablet, mobile) and background color, advanced, border, border radius, display, padding, margins.
- Tab Styling item indicates background color, advanced, border, border radius, display, padding, margins
Step 5: Click “Publish” and finish.
There is no difficulty to create a new page with the search & filter result. Bring a great search experience to customers on your website. Regardless of what areas from blog to Woo-commerce and E-commerce.