Skip Navigation

Creating a Page with a Custom WooCommerce Product Search

Toolset lets you create a custom search for products. It can include filters for product fields and categories but also custom fields, taxonomies, and more.

Custom Search for WooCommerce Products created with Toolset
Custom Search for WooCommerce Products created with Toolset

Setting up a page with the search View

  1. Add a new page.
  2. Insert the Toolset View block.
  3. In the View-creation wizard, enable the Search option.
  4. Choose Products as the type of content this View will display.

Creating the product search form

In the upper part of your View’s editing area you add filters.

  1. Click on the Add Search Field button to add filters.
Adding filters to your product search
Adding filters to your product search
  1. Use the Add Search Button to add the submit button which will trigger the searching.
  2. Insert the Toolset Grid block and drag-and-drop your filters into it to arrange your filters into columns.

Creating search results

In the bottom part of your View’s editing area you design your search results.

  1. Insert blocks into the WordPress Archive Loop area to design a single item of your View loop.
  2. Use the Toolset Heading and Single Field blocks with dynamic sources to display your product title, excerpt, custom fields, and taxonomies.
  3. Use blocks from the Toolset WooCommerce section to insert WooCommerce elements such as the Add to Cart Button, Product Price, and more. You will notice that all Toolset WooCommerce blocks allow you to select a custom or native output type.

You can enhance your search by:

  • styling your filters
  • adding pagination
  • making results update on-the-fly using AJAX
  • setting up the View search and results side by side:
Setting search filers and search results side by side
Setting search filers and search results side by side

Visit the Creating a Custom Search lesson to learn more.

For video instructions and more information visit the lesson about creating a custom search.

Main Toolset Block Used in this Lesson

Create custom lists of posts