08Building WooCommerce Product Search with Toolset and no PHP
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.
In this tutorial we will build a simple search consisting of two parts: Search form and 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.
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.
8.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.”
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.
8.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.”
8.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
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.
8.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
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.
8.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:
Post title with a link
Add to cart button – product listing pages
Ensure the option Use a Content Template to group the fields in this View loop is checked.
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.
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.
Margin-top class was added to create a vertical space for each row.
The margin Bootstrap row and col-sm-* classes were added to display the content in two columns.
Margin-top class was added to create a vertical space for each row. The margin-top class comes from the Toolset Starter theme.
A custom CSS rule was added into the CSS editor to enlarge the product price and put in bold
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.