Toolset lets you create custom searches for WooCommerce products. The search form can include the standard WooCommerce product field, custom fields and custom taxonmy.

In this interactive tutorial, you will receive a test site, with everything set-up. You will develop your own custom search for WooCommerce products from zero.

We invite you to try Toolset for 30 days and see how easy it can be. If you’re not 100% happy with Toolset, tell us and we will refund your order.

Buy Toolset

Views plugin lets you build a custom search based on different search criteria including product categories, product price range, custom fields, taxonomies etc.

We will build a simple search consisting of two parts:

  • Search form
  • Search results
What we plan to achive

What we plan to achive

Step 1) Creating the Custom Search View for WooCommerce products

A custom search is actually a View, so we start by creating a View for WooCommerce products.

In the WordPress admin of your training site:

  1. Go to Toolset -> Dashboard
  2. Locate the Views column
  3. Click Create View in the Products row
Creating a View from Toolset Dashboard

Creating a View from Toolset Dashboard

A general purpose View has been created. Feel free to change its name.

Now, we need to turn this View into a Custom Search View

  1. Click Screen Opions
  2. In the first dropdown select “Display the results using a custom search
Turning a regular View into a Custom Search View

Turning a regular View into a Custom Search View

Note that the Custom Search Settings and Filter Editor options have been checked.

Step 2) Setting up search options

Scroll down to the Custom Search Settings section. Here, you determine the manner in which your search results are updated.

In this tutorial, we use the default value, “Full page refresh when visitors click on the search button”. You are welcome to test other options.

Parametric Search Settings

Custom Search Settings

Step 3) Building the 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

Let’s add product categories as our first filter.

In the Filter section, click on the New filter button to insert your first search element. A dialog box appears.

From the first dropdown, select “Product Categories.”

We will allow visitors to select more than one category. Therefore, please choose “Checkboxes” as the output.

Insert your field.

Adding product categories as a filter

Adding product categories as a filter

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 search box

In the search form, including the classic “Search box” 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 Search box to your form, click on Content search. Retain the default values offered on the next screen and press Insert. You can precede the shorcode with label, we will use “Keywords”.

Adding a Submit button

Visitors use a Submit button to run the search.

Position your cursor after your last filter and click the Submit button.

Change the button label to “Search”.

In the “Button classname” input field, type button alt, which represent built-in WooCommerce classes.

Choose “Button” in the “button HTML tag” field and insert the field.

Adding a Submit button

Adding a Submit button

After you complete this step, your Filter section should look like the following:

[wpv-filter-start hide="false"]
[wpv-filter-controls]
	[wpml-string context="wpv-views"]Product Categories:[/wpml-string] [wpv-control taxonomy="product_cat" url_param="wpv-product_cat" type="checkboxes"]
	Keywords: [wpv-filter-search-box]
	[wpv-filter-submit name="Search" class="button alt" type="button"]
[/wpv-filter-controls]
[wpv-filter-end]

Step 4) Inserting the View into a page

The search form is ready. We can examine its appearance on your site’s front-end. To do this, we must first insert our View into a page.

  • In your WordPress admin, go to your Pages.
  • Locate the “Search all products” page and open it for editing.
  • Press the Fields and Views button.
  • Scroll to the bottom to the “Post View” section. Locate the Custom search View you created and click it. Retain the default options offered and insert it.
  • Save your page

Your search View has been inserted as a shortcode and your page should look like this:

Inserting shortcode into the page

Page with the Search View – backend
Page with the Search View – front-end

Page with the Search View – front-end

If you press the button, nothing happens. This is because we have yet to design the part that displays the results.

Step 5) Designing the “Search results” output

We will now design the results part of our search page.

Scroll down to the “Loop Output” section. Here, you define the appearance of the “Search results” output and may include:

  • the form in which the results will display, whether as a list, grid, table, etc.
  • the fields that will appear for each product, such as product title, price, etc.
Designing search results

Designing search results
  1. In the Loop Output section click the Loop Wizard button.
  2. In the “How do you want the View to display?” pop-up, choose Table-base grid. Set the number of columns to 3.
  3. 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
    • 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.

  4. Select fields to include in the loop

    Select fields to include in the loop
  5. Scroll down to the Content template. You will see that your fields have been inserted as shortcodes:
    Template for this View

    Template for this View

Hint

To keep this tutorial simple we used the [wpv-woo-product-image] shortcode with its default values (without additional attributes).

Feel free to replace the shortcode with one that includes your custom settings for product images:

  1. Using your mouse select the [wpv-woo-product-image] shortocode in the editor.
  2. Choose Fields and Views.
  3. Locate the “Product image” button and click it.

You will see a pop-up allowing you to set your product image attributes.

Setting up product image attributes

Setting up product image attributes

Step 6) Styling the search form

You can apply custom CSS styling to your search form.

For the purpose of this tutorial we will add simple styling, just to show you the idea. We will hide the dots from the product category list.

Go back to your View and open it for editing again. Scroll down to the Filter Editor section. Below the main editor you will see the CSS editor section. Toggle it to open.

Add the following CSS rule:

ul.categorychecklist {
  list-style: none;
}
Styling the search form

Styling the search form

Checking the results

Save your View and visit your Search page again.
Your search page should now look like this.

Outcome of this tutorial

Outcome of this tutorial

Beyond the basics

In this tutorial we have covered only the basics. Toolset allows you to build more powerful search engines.

You can build a custom search based on different search criteria including a product price range, custom fields, taxonomies etc.

Views supports AJAX updates as well. Instead of refreshing the entire page when performing a search, you can set the View to update only the search results section.

You can even update the search results “on the fly” when inputs change.


A fully-styled reference site

Planning to build custom WooCommerce sites yourself? Check out our Toolset WooCommerce reference site. It’s a fully featured, fully designed reference site, that you can use as the basis of your client projects.

Get inspired by fully designed WooCommerce with Toolset

Get inspired by fully designed WooCommerce with Toolset