Want to make it easier for customers to find your products on your WooCommerce store? By default, WordPress search returns pages, posts, and products all in one set of results, making it harder for shoppers to find what they came to buy.
The Search Bar block is a block in Nexter Blocks for the WordPress block editor (Gutenberg) that lets you restrict searches to WooCommerce products only. Unlike dedicated plugins such as Advanced Woo Search or SearchWP, the Search Bar block is built into the block editor, so no separate plugin is needed.
To check the complete feature overview documentation of the Nexter Blocks Search Bar block, click here.
Best Used For:
- WooCommerce stores with large product catalogs where customers need to locate items quickly
- Online shops where blog posts and pages appear in default search results and obscure products
- Stores using the WordPress block editor that want product-specific search without adding a separate plugin
Requirement – This block is a part of Nexter Blocks, make sure it is installed & activated to enjoy all its powers.
To set up a WooCommerce product search bar in WordPress, make sure you have added some products to your WooCommerce store first.
Then, add the Search Bar block to the page or template and follow the steps:
1. Open the item under Search Bar and select Post from the Source section.
2. From the Select Post dropdown, choose Products. This tells the Search Bar block to search WooCommerce products only instead of all content on your WordPress site.
A dropdown will now appear beside the search field on the frontend.
In the Label field, enter a name for the category dropdown that appears beside the search input, such as “All Categories”. This label helps customers understand what the dropdown is filtering.
In the Placeholder field, enter the text that shows inside the search box before a customer types, such as “Search products…”, to guide them on what to enter.
Toggle on Show Count to display the number of products in each category next to the dropdown option. Use this when your store has several product categories and you want customers to see how many items each category contains before selecting one.
3. Go to the Extra Option tab and toggle on AJAX Search. With AJAX Search active, matching products appear in real time as customers type, without a full page reload. Use this for stores with more than 20 products, since instant results reduce the time shoppers spend waiting and increase the chance they find and click through to a product.
Now you can select a product from the dropdown to show all products in the search results, or search for specific products directly.
Search results land on the default WordPress search results page. To control how WooCommerce products appear on that results page, you can build a custom layout with Nexter Builder. See How to Create a Product Archive Template in WordPress for Free? for the setup steps.
To show a curated product grid alongside the search bar on the same page, the Product Listing Block For WordPress lets you display WooCommerce products in a filterable listing below your search block.
