Skip to main content

Filter products by keyword search

Goal​

Let customers search products by keyword on a custom shop page and combine that search with other AJAX filters such as category and price.

Prerequisites​

  • WooCommerce with a reasonable product catalog
  • Archive Loop and Filter Posts on a page (see Filter products by category)
  • WPEnhanced Ajax Filter Blocks installed and active

Step 1: Add a Search filter item​

  1. Edit your shop page in the block editor.
  2. Inside Filter Posts, add a Filter Posts Item block.
  3. Set Filter source to Search (product search / keyword).
  4. Set Label to Search products or Find a product.
  5. Add a Placeholder such as Search by name or SKU…

Step 2: Configure search behavior​

In the filter item and Filter Posts settings:

  • Update on change: For search, use a short debounce delay (e.g. 300–500 ms) so the loop does not request on every keystroke, or require Enter / an Apply button.
  • Minimum characters: If available, require 2–3 characters before searching to reduce noise.
  • Search scope: Confirm search applies to product titles, content, and SKUs as configured in your loop query.

See Live search for global search behavior options.

Step 3: Place the search field​

Common layouts:

LayoutWhen to use
Search at top of filter panelDefault faceted shop
Search above the product gridProminent catalog search
Search + category side by sideWide desktop layouts

Use block editor columns or a container block to position Filter Posts and the search item.

Step 4: Combine with category and price​

  1. Keep Product category and Price filter items in the same Filter Posts block.
  2. Test flow: search for "shirt", then narrow by category Clothing, then adjust Price.
  3. Each change should refine the same Archive Loop via AJAX.

Step 5: URL sync and reset​

  • Enable URL sync so search terms appear in the query string—useful for support and shared links.
  • Enable a Reset filters control so customers can clear search and facets in one action.

Step 6: Test edge cases​

  • No results: Confirm the loop shows a friendly empty state.
  • Special characters: Test quotes and hyphens in product names.
  • Clear search: Removing text should restore the unfiltered catalog (or other active facets only).
Auto Suggest (Pro)

For search-as-you-type suggestions before applying the filter, see Auto Suggest in WPEnhanced Ajax Filter Blocks Pro.

What's next​