CP Live Search – Full Guide

CP Live Search Overview

CP Live Search is the best live search & filter result form for WordPress.

CP Live Search combine AJAX Search & Filter with the Smart Search Algorithm (SSA). The perfect combination will turn query to money.

This plugin allows you to advanced search & filter result for WordPress and Woo-Commerce, E-Commerce by  posts types, custom fields, taxonomies and more.
CP Live Search

Was this helpful? Yes No Suggest edit
0 of 0 users found this section helpful

Search Form: Understand, Create and Usage

Was this helpful? Yes No Suggest edit
0 of 0 users found this section helpful

How to create vertical search form

Search form with fields searches vertically is often used by e-commerce websites, with the ability for customers to find products quickly and conveniently.

And you want to create a search form with fields searches in vertically but do not know how.

Just look at an example below. You can create the search form with fields searches vertically with many factors like categories, price, size, brand, color and so on just a few minutes.

create a custom search form with search fields vertically 08

How can I do that?

First of all, you need to install CP Live Search.

CP Live Search is one of the best WordPress plugins that help you create the search form in just a few minutes. You can create your own great search form templates in order to bring your customers a better experience and value on your website.

Before you see the documentation to create the search form with the search field vertically, make sure you have the CP Live search plugin installed.

After installing and running the CP Live search plugin, it’s easy to create the search form with the search field vertically.

Let’s get started!

Step 1: Add new a custom search form.

  • In the administration interface, hover over the CP Live Search plugin, choose “Form Templates” to select the search templates available or click “Add new” to create a new custom search form template.create a custom search form with search fields vertically 01
  • Click “Edit with KingComposer”.create a custom search result form 01

Step 2: Create a custom search form.

  • Click “Element”create a custom search result form 02
  • Choose tab “CPLS Form” and then click “Form search” to build a custom search form template.create a custom search form by cp live search 01
  • After click “Form search”, hover over the “Form search” element and click “edit this element” to set “post type result” to search by page/post with the post title, post date, post status, post author, attachment, product, custom fields, and so on.create a custom search form with search fields vertically 05
  • Click “Add element” and select the appropriate elements with elements such as input textbox, radio, checkbox, select box, slide range, date picker, color picker, image select, rate, and button.create a custom search form with search fields vertically 03
  • Beside basic fields, CP Live Search is crafted the advanced one to maximize the compatibility to your current business.create a custom search form by cp live search 02

Step 3: Add element “Button” to search form can search for information.

  • After adding the elements that match your search form template, remember to always add element “Button“.  If you DO NOT add element “Button”, the search form will only show in the frontend but not searchable.create a custom search form by cp live search 3

Step 4: Click “Publish” to finish.

Save the search form template. Just by one click, you can use the search form template anytime and anywhere on your website.

You can create as many search form templates as possible. It depends on your customers’ demand.

Your customers will experience a good emotion when surfing your website.

You can see demo “Build search form template with search fields vertically” here for your search form templates.

 

Was this helpful? Yes No Suggest edit
0 of 0 users found this section helpful

How to create horizontal search form

You are surfing on many websites and realize that they have a convenient search form which allows users search information or product easily?

You greatly want to update your website with an advanced search form like that. The search form can align horizontally

In addition, the search form should combine advanced features such as calculations, auto-suggest, save search history and more.

create a custom search form with search fields horizontally 01

 

You think it may require a lot of effort. But wait, all you need to create a custom search form with search field horizontally is CP Live Search.

CP Live Search is one among best WordPress plugins that help you to make your own search form just a few minutes. This plugin can bring your customers a better experience and value on your website.

create a custom search form with search fields horizontally 02

Before you see the documentation for creating the search form with the search fields horizontally, make sure you have the CP Live search plugin installed.

After installing and running the CP Live search plugin, it’s easy to create the search form with the search fields horizontally.

Step 1: Add new a custom search form.

  • In the administration interface, hover over the CP Live Search plugin, choose “Form Templates” to select the search templates available or click “Add new” to create a custom search form template.create a custom search form with search fields vertically 01
  • Click “Edit with KingComposer”.create a custom search result form 01

Step 2: Setting horizontal page layout

To show the search result in horizontal page layout, you need to split the search results into two columns.

  • Click “Add element”create a custom search form with search fields vertically 03
  • Choose tab “CPLS Form” and click “Form search” to build a custom search form template.
  • create a custom search form by cp live search 01
  • After click “Form search”, hover over the “Form search” element and click “edit this element” to setting “post type result” to search by page/post with the post title, post date, post status, post author or attachment or product or custom fields, etc.create a custom search form with search fields vertically 05
  • Click tab “All”, then select “Row Inter”, after that setting row layout with 2 or 3 or 4 or 5 or 6 columns.create a custom search form with search fields horizontally 07
  • Setting Row layoutscreate a custom search form with search fields horizontally 03
  • It had better select from 4 to 6 columns for custom fields. You can see a demo for setting row layouts with 4 columns.create a custom search form with search fields horizontally 04
  • Click “Add element” and select the appropriate elements with elements such as input textbox, radio, check box, select box, slide range, date picker, color picker, image select, rate, button.create a custom search form with search fields vertically 03
  • Beside basic fields, CP Live Search crafted the advanced one to maximize the compatibility to your current business.create a custom search form by cp live search 02
  • You can adjust the size of the form search and form result, just drag & drop the line between the two elements.create a custom search form with search fields horizontally 05

Step 3: Add element “Button” to search form can search for information.

  • After adding the elements that match your search form template, remember to always add element “Button“, if you DON’T add element “Button”, the search form will show in the frontend not be searchable.create a custom search form by cp live search 3

Step 4: Click “Publish” to finish and save the search form template. Just by one click you can use search form template anytime and anywhere on your website.

Create as many search form templates as your customer search demands, improving the search experience for your customers with CP Live Search.

You can see demo “Build search form template with search fields vertically” here for your search form templates.

 

Was this helpful? Yes No Suggest edit
0 of 0 users found this section helpful

Result Template: Understand, Create & Usage

Was this helpful? Yes No Suggest edit
0 of 0 users found this section helpful

How to create result template with vertically display

You have full control of your website. But if you can’t use right, it will become terrible.

How about attracting your audience by showing the exact and beautiful results with an image and description are arranged vertically?

Just like this example?

create a custom search result form with the result page in horizontally 01

Are you interested in?

If yes, read the article below to be able to make a search results page effectively and beautifully for your website.

Before you see the documentation for creating a custom search result form with the result in vertically, make sure you purchased and installed the CP Live Search plugin.

After installing and running the CP Live search plugin, it is very easy for you to create a custom search result form with the result in vertically by 3 steps. Let’s get started

Step 1: Add new a custom search result template

In the administration interface, hover over the CP Live Search plugin, click “Result template” and click “Add new” to create a custom search result form template.

Create a new search result page with the result in horizontally 01

Click “Edit with KingComposer”.

create a custom search result form 01

Step 2: Create a custom search result form.

Click “Element”

create a custom search result form 02

Choose tab “CPLS Result” and select the appropriate elements such as image w/float element, image element, text, link button and wrap Woocommerce.

Create a new search result page with the result in horizontally 02

  • Image w/float element: An image with border and margins that floats to the right in a paragraph. An example for image w/float element.

image with float element

You can see the documentation for how to use Image w/float element here

  • Image element: Here is an example of image element

image elementYou can see documentation for how to use image element here

  • Text Element: An example for text element

text element

You can see the documentation for how to use text element here

  • Link button: a button that has an action like a link. An example for link button.

link buttonPlease read the documentation for how to use Link button here

  • Wrap Woo-commerce: Use when you display results related to WooCommerce such as Woo product with Woo title product, Woo flash sale, Woo product price, Woo rating, Woo product thumbnail. An example for wrap Woocommerce

Wrap woocommerce

Refer the documentation for how to use Wrap Woocommerce here.

Step 3: Click “Publish” to finish build the custom search result form template with the result in vertically.

It’s not difficult to create and archive the search result templates with the result in vertically and you can use templates whenever you want with just a few clicks.

You can see demo “Build search result with the result page in vertically” here for your search result form templates.

Was this helpful? Yes No Suggest edit
0 of 0 users found this section helpful

How to create result template with horizontally display

For a website, besides design, content, searching and showing results play an important role.

Just imagine that your website has many good contents, beautiful template. However, when users find any information or product, the result shows slowly and incorrectly. For sure, the users will leave your website immediately.

Would you like your customers to find it easy to search for your products and posts comfortably?

There are various ways to layout your result after searching.

How about creating horizontal search results page like this one? The image and information will be aligned horizontally

create a custom search result form with the result page in vertically 01

Before you see the documentation for creating a custom search result form with the result in horizontally, make sure you purchased and installed the CP Live Search plugin.

You can click here to have CP Live Search.

After installing and running the CP Live search plugin, it is super easy to create a custom search result form with the result in horizontally by 4 steps. Let’s begin!

Step 1: Add new a custom search result template

  • In the administration interface, hover over the CP Live Search plugin, click “Result template” and click “Add new” to to create a custom search result form template.Create a new search result page with the result in horizontally 01
  • Click “Edit with KingComposer”.create a custom search result form 01

Step 2: Setting horizontal page layout

To show the search result in horizontal page layout, you need to split the search results into two columns.

  • Click “Element”create a custom search result form 02
  • Click tab “All”, then select “Row Inter”, after that setting row layout with 2 columns.Create a new page with search filter result form template by cp live search 11Create a new page with search filter result form template by cp live search 12
  • Click “Add Element” to add search form and result form.Create a new page with search filter result form template by cp live search 13
  • You can adjust the size of the form search and form result, just drag & drop the line between the two elements.custom search result page with result in vertically

Step 3: Create a custom search result form.

  • Choose tab “CPLS Result” and select the appropriate elements such as image w/float element, image element, text, link button and wrap Woocommerce.Create a new search result page with the result in horizontally 02
  • Image w/float element: An image with border and margins that floats to the right in a paragraph. An example for image w/float element.image with float element

You can read the documentation for how to use Image w/float element here

  • Image element: An example for the mage element.

image elementYou can see the documentation for how to use image element here

  • Text Element: An example for a text element

text element

You can check the documentation for how to use text element here

  • Link button: button that acts like a link.  Here is an example for link button.

link buttonYou can refer the documentation for how to use Link button here

  • Wrap Woo-commerce: Use when you display results related to WooCommerce such as Woo product with Woo title product, Woo flash sale, Woo product price, Woo rating, Woo product thumbnail. An example for wrap Woocommerce.

Wrap woocommerce

You can see the documentation for how to use Wrap Woocommerce here.

Step 4: Click “Publish” to finish build the custom search result form template with the result page in horizontally.

It’s easy to create and archive the search result templates with the result page in horizontally and you can use templates whenever you want with just a few clicks.

You can see demo “Build search result with the result page in horizontally” here for your search result form templates.

Was this helpful? Yes No Suggest edit
0 of 0 users found this section helpful

Final: Embed Search & Filter on Pages - Posts

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”Create a new page with search filter result form template by cp live search 01

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”Create a new page with search filter result form template by cp live search 02
  • Click tab “All”, then select “Row Inter”. Then setting row layout with 2 columns.Create a new page with search filter result form template by cp live search 11Create a new page with search filter result form template by cp live search 12
  • Click “Add Element” to add search form and result form.Create a new page with search filter result form template by cp live search 13Create a new page with search filter result form template by cp live search 14
  • You can adjust the size of the form search and form result, just drag & drop the line between the two elements.Create a new page with search filter result form template by cp live search 15

Step 3: Select the search form template

  • Click “Element”.  Create a new page with search filter result form template by cp live search 02
  • 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.Create a new page with search filter result form template by cp live search 03
  • Choose your search form template and click “Save”Create a new page with search filter result form template by cp live search 04

Step 4: Select the result form template

  • Click icon “+” below “Form template” to add a new element.Create a new page with search filter result form template by cp live search 05
  • 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 formCreate a new page with search filter result form template by cp live search 06
  • 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.Create a new page with search filter result form template by cp live search 07Create a new page with search filter result form template by cp live search 08

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.Create a new page with search filter result form template by cp live search 21
Example 2: And now we will set up 3 items per line for the desktop.Create a new page with search filter result form template by cp live search 18

The results displayed outside the frontend will be as shown belowcreate a custom search form with search fields vertically 08

    • Tab Styling wrap with styling for item per line (Desktop, tablet, mobile) and background color, advanced, border,  border radius, display, padding, margins.Create a new page with search filter result form template by cp live search 09
    • Tab Styling item indicates background color, advanced, border,  border radius, display, padding, marginsCreate a new page with search filter result form template by cp live search 10

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.

Was this helpful? Yes No Suggest edit
0 of 0 users found this section helpful
Suggest Edit
Send a Message