Product table search box
Search box above the table
By default, WooCommerce Product Tables are displayed with a search box above the table (top-right). This allows your users to instantly filter the table to products with a specific keyword or search term. The search is instant and uses AJAX.
In this example, the user has typed the term "t-shirt" in the search box, which has filtered the table to the 4 products which match that term:
How does the search work?
The logic of the search box works differently depending on whether or not you are using the lazy load option:
- Lazy load disabled (the default) The search looks at the data in all the columns of the table. Depending on your columns, users can search by price, stock, etc.
- Lazy load enabled The search looks at the product name, the full description, and the SKU field - regardless of whether these are present as columns in the table.
The search is exact match, so it looks for results that match the keyword that the customer has entered. It is not case sensitive.
If you require more advanced search logic, or would like to control what information is searchable, then you can use the SearchWP plugin to power the search box.
Search term option
You can choose to filter the products in the table when it is first displayed. You can do this by selecting 'Search term' when you choose your table columns and entering the term that you want to pre-filter the table for.
For example, if you enter "T-shirt" then the table will only display products which match this search term.
There are a couple of notes and caveats with this option:
- When using lazy load, the Search term option will only search the product name and description - the other columns will not be searched.
- The search is case insensitive.
- As with the main WordPress search, the search is done by keyword, not individual words. So if you use
search_term="product1"
, then it will match products with the name "product1", "product12", "Product12 - Large", etc.
Can I load a pre-filtered table and then allow customers to expand the selection to view all products?
Some people like to use the Search term option to create a pre-filtered table, while giving their customers the option to remove the search term and view a wider selection of products that don't match this keyword.
Use the search term option to filter the table by a specific keyword, as described above. Your users can then delete the keyword from the search box. The table will re-load with all possible products, including those that don't match that keyword.
How to hide or move the search box
WooCommerce Product Table also contains options which you can use to hide or reposition the search box.
How to add a standalone product search box
WooCommerce Product Table only adds a search box above the product table. This means that customers can only search the table after the products have already loaded.
If you prefer, then you can use the Product Search that comes with WooCommerce itself and display the results in a table. This is how to do it:
- Create a product table via Products → Product Tables → Add New and select the "Display on a shop page (e.g. main storefront, category page, etc.)" option.
- On the next page, choose for the table to appear on product search results pages.
- Add the 'Product Search' widget or Gutenberg block anywhere on your site, e.g. the homepage or a sidebar.
Customers will enter a keyword in the search box, and the results will appear in the product table layout.