Skip Navigation
Buy Now
Home » Course lessons » Creating a Page with a Custom WooCommerce Product Search

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

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

Toolset comes with a big collection of blocks to display dynamic sources (custom fields, WordPress fields, WooCommerce fields, and taxonomies). However, you can also display Dynamic Sources using WordPress core blocks and popular block plugins.

Use the following steps to display a Dynamic Source in any supported block:

  1. Insert or select a block.
  2. In the right sidebar, expand the Dynamic Sources section.
  3. Toggle on the option for any of the supported fields in that block.
  4. Use the dropdowns that appear to select the dynamic source you want this block to display for that field.

Display Dynamic Sources inside all text blocks

Toolset allows you to display Dynamic Sources, like custom fields, inside any text blocks like headings, buttons, and more. This includes WordPress core blocks, Toolset blocks, and popular block plugins.

To display any Dynamic Source inline, insert or select a block with a text input and look for the Inline Fields button. Dropdown menus will appear, allowing you to select a Dynamic Source.

For more information, check out the lesson about displaying Inline Fields.

Add search fields by Price and On-Sale status

You can use various search fields in your custom searches for products.

Toolset allows you to add filters by WooCommerce Price and On-sale Status fields. The price field displays as a range slider while the on-sale status is a simple checkbox.

To insert any of these two fields, click the Add Search Field in the editor and select them using the dialog for selecting a field.

 

Toolset allows you to easily create your custom product search but it also needs to look good. You can easily do this by following some simple rules and guidelines.

Visit the dedicated lesson to learn all about styling custom searches.

Main Toolset Block Used in this Lesson

View

Create custom lists of posts

Dario
Updated
May 18, 2021
Send feedback to our documentation team