Toolset allows you to create a custom search for your WooCommerce products. Your searches can include WooCommerce product fields, such as product categories and price ranges, as well as your custom fields and taxonomies.

Outcome of this tutorial – product search
Outcome of this tutorial – product search
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.

Switch to Layouts
Switch to Layouts
In your free training site:

  1. Add a new page and give it a name: e.g., “Find your perfect shoes.”
  2. Click Save draft.
  3. Click the Content Layout Editor button to begin designing the body of your page with Layouts.

Create your product page using the Layouts Editor
Create your product page using the Layouts Editor
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.

Drawing an 8 column cell
Drawing an 8 column cell
In your layout:

  1. Draw an 8 column cell.
  2. On the screen that opens, locate the View cell and insert it.

Creating a View cell for a product search
Creating a View cell for a product search

  1. In the “Create new View cell” dialog, check the radio button “Display the results as a custom search.”
  2. Click Create.

Creating a search View for products
Creating a search View for products
Now you are creating your search view.

  1. Give your View a name: e.g., “Product Search.”
  2. In the Content Selection, uncheck Posts and choose Products.

Step 3 – Setting up search options

Setting up search options
Setting up search options
Scroll down to the “Custom Search Settings” section.

  1. In the “How do you want to update the results?” subsection, choose “Full page refresh when visitors click on the search button.”
  2. 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

Adding product filters
Adding product filters
In the Filter section:

  1. Position your cursor where you want your filter to appear
  2. Click on the New filter button.

Adding product categories as a filter
Adding product categories as a filter

  1. Click on the Product categories button.

Setting up product categories as a filter
Setting up product categories as a filter
A dialog box appears. We will allow visitors to select more than one category.

  1. From the Type of control dropdown, select Set of checkboxes /li>
  2. 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.

Adding a text search
Adding a text search
To add the text search box to your form:

  1. Position your cursor where you want your search box to appear.
  2. Click on Text search.

Setting up the text search
Setting up the text search
A dialog for the Text search filter opens.

  1. In the Where to search section choose Post content and title
  2. Type Keywords for the Label for the search box
  3. Insert shortcode

Adding a Submit button

 Adding a Submit button
Adding a Submit button
Visitors use a Submit button to run the search.

  1. Position your cursor after your last filter.
  2. Click the Submit button.

Setting up the search button
Setting up the search button
In the pop-up that opens:

  1. Change the element label to “Search.”
  2. From the Element HTML tag dropdown, choose button
  3. In the Buttom classnames field type in btn-primary – this is a Bootstrap class that will style your Search button.
  4. Click Insert shortcode.
  5. Click the Save and Close this view and return to the layout button.

Step 5 – Previewing your search form on the front-end

Our product search on the front-end
Our product search 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

  1. 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

Design search results using the Loop Wizard
Design search results using the Loop Wizard

  1. Click on your View : Product Search cell to open it for editing.
  2. Scroll down to the “Loop Output Editor” section. Here, you define the appearance of the “Search results.”
  3. In the Loop Output section, click the Loop Wizard button.
  4. In the “How do you want the View to display?” pop-up, choose Unformatted.

Choose the product fields to output
Choose the product fields to output
On the next screen, choose the fields to output.

  1. 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
  2. Ensure the option Use a Content Template to group the fields in this View loop is checked.
  3. Click Finish.

 Template with product shortcodes
Template with product shortcodes

  1. 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.
  2. 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.

Product search before styling
Product search before styling
Product search after styling
Product search after styling

You can style your search page any way you wish by applying custom styling both to your filter search form and search results.

  1. Open your View for editing.
  2. Add HTML and CSS to style your search page.

The table summarizes the changes we did in our Product Search View.

Editor Changes done
Filter Editor
Changes in Filter editor
Changes in Filter editor
Bootstrap row and col-sm-* classes were added to display the filters in 2 columns.
Loop Output Editor
Loop Output Editor
 The search results h2 heading was added.
Templates for this View
Templates for this View
Bootstrap row and col-sm-* classes were added to display the content in two columns.

  1. Margin-top class was added to create a vertical space for each row.
  2. The margin Bootstrap row and col-sm-* classes were added to display the content in two columns.
  3. Margin-top class was added to create a vertical space for each row. The margin-top class comes from the Toolset Starter theme.
  4. A custom CSS rule was added into the CSS editor to enlarge the product price and put in bold

Summary

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.