In this tutorial we will build a simple search consisting of two parts:
- Search form
- Search results
This allows you to search your products by categories and with a free text field. Using the same technique, you can include more advanced filters.
Step 1 – Adding a page for the search
First, let us create a new page that will include your search. In your free training site:
- Add a new page and give it a name: e.g., “Find your perfect shoes.”
- Click Save draft.
- Click the Content Layout Editor button to begin designing the body of your page with Layouts.
The Layouts Editor opens. Here you create the body of your page using a convenient drag-and-drop technique.
Step 2 – Creating a custom search View
To create a custom search, you need to add a View cell that will contain a Search View. In your layout:
- Draw an 8 column cell.
- On the screen that opens, locate the View cell and insert it.
- In the “Create new View cell” dialog, check the radio button “Display the results as a custom search.”
- Click Create.
Now you are creating your search view.
- Give your View a name: e.g., “Product Search.”
- In the Content Selection, uncheck Posts and choose Products.
Step 3 – Setting up search options
Scroll down to the “Custom Search Settings” section.
- In the “How do you want to update the results?” subsection, choose “Full page refresh when visitors click on the search button.”
- In the “What do you want to display in this cell?” subsection, choose “The search form and the results.”
Step 4 – Building your search form
Scroll down to the Filter Editor section. Here, you build your search form. Your search form will include:
- filters: the form fields visitors use to specify their search criteria
- the search button
Adding product categories as a filter
In the Filter section:
- Position your cursor where you want your filter to appear
- Click on the New filter button.
- Click on the Product categories button.
A dialog box appears. We will allow visitors to select more than one category.
- From the Type of control dropdown, select Set of checkboxes /li>
- Click Insert shortcode.
Your field has been added as the [wpv-control] shortcode. The “Product categories” label has been wrapped in wpml-string shortcodes in preparation for WooCommerce multilingual stores.
Adding a text search
In the search form, including the classic “Text search” is recommended. This is a “free text” input field that allows visitors to search the contents (in this case, the product description and title) to match specific keywords. To add the text search box to your form:
- Position your cursor where you want your search box to appear.
- Click on Text search.
A dialog for the Text search filter opens.
- In the Where to search section choose Post content and title
- Type Keywords for the Label for the search box
- Insert shortcode
Adding a Submit button
Visitors use a Submit button to run the search.
- Position your cursor after your last filter.
- Click the Submit button.
In the pop-up that opens:
- Change the element label to “Search.”
- From the Element HTML tag dropdown, choose button
- In the Buttom classnames field type in btn-primary – this is a Bootstrap class that will style your Search button.
- Click Insert shortcode.
- Click the Save and Close this view and return to the layout button.
Step 5 – Previewing your search form on the front-end
The cell with your search View has been added. Let’s check the appearance of our custom search on the front-end
- Click Preview.
Our search page looks like the one on the screenshot. The search form includes the filters and the Search button. If you click on the Search button, nothing happens. This is because we have yet to design the display of results.
Step 6: Designing the search results
- Click on your View : Product Search cell to open it for editing.
- Scroll down to the “Loop Output Editor” section. Here, you define the appearance of the “Search results.”
- In the Loop Output section, click the Loop Wizard button.
- In the “How do you want the View to display?” pop-up, choose Unformatted.
On the next screen, choose the fields to output.
- Use the Add a field button to include the following fields:
- Product image
- Post title with a link
- Post excerpt
- Product attributes
- Product price
- Add to cart button – product listing pages
- Ensure the option Use a Content Template to group the fields in this View loop is checked.
- Click Finish.
- Scroll down to the Content template. You will see that your fields have been inserted as shortcodes.
- Add the size=”shop_catalog” attribute to the [wpv-woo-product-image] shortcode
- Wrap the [wpv-post-link] shortcode in h3 HTML tags.
- Wrap the [wpv-post-excerpt] shortcode in p HTML tags.
- Save your View and preview your Layout.
Your search should work now. In the last part, we apply some final touches to tweak its appearance.
Styling and final touches
Your product search works fine now but lacks some styling. We will tweak it a bit using additional HTML and CSS classes.
You can style your search page any way you wish by applying custom styling both to your filter search form and search results.
- Open your View for editing.
- Add HTML and CSS to style your search page.
The table summarizes the changes we did in our Product Search View.
|Filter Editor||Bootstrap row and col-sm-* classes were added to display the filters in 2 columns.|
|The search results h2 heading was added.|
|Bootstrap row and col-sm-* classes were added to display the content in two columns.
In this tutorial, you learned how to build a custom search for your WooCommerce products using Toolset plugins. Remember:
- Use the Views cell to create your search.
- Design your search form with input fields in the Filter Editor section of your View.
- You can use any product fields as filters, as well as your custom fields and taxonomies.
- Design your search results in the Loop Output Editor section.
- You can also add a custom search for your product archive pages.
Questions? Ideas? Suggestions?
If you have any questions on how to create a custom search, add your comments and we’ll get back to you. Toolset clients can also create tickets in our technical support forum, where are support team works 6 days / week, 19 hours / day.