---
title: "How to Add Ajax Search for WooCommerce Products in WordPress?"
url: https://nexterwp.com/docs/add-ajax-search-for-woocommerce-products-in-wordpress/
date: 2024-12-02
modified: 2026-04-14
author: "Aditya Sharma"
description: "You can boost the shopping experience on your WooCommerce store by implementing Ajax search. It lets users find products instantly without the need to refresh the page or wait for..."
image: https://nexterwp.com/wp-content/uploads/2024/12/add-ajax-search-for-woocommerce-products-in-wordpress-1024x519.jpg
word_count: 261
---

# How to Add Ajax Search for WooCommerce Products in WordPress?

## Key Takeaways

- Nexter Blocks Search Bar block adds Ajax search for WooCommerce products, so users find products instantly without refreshing the page or waiting for results to load.
- Search Bar block uses Post as the Source and Products in the Select Post dropdown, then shows a dropdown beside the search bar.
- AJAX Search toggle in the Extra Option tab enables product search results, and users click any item to go directly to the product page.

You can boost the shopping experience on your WooCommerce store by implementing Ajax search. It lets users find products instantly without the need to refresh the page or wait for results to load, making the process faster and smoother.

With the Search Bar block from the Nexter Blocks, you can easily add an Ajax search for WooCommerce products.

*To check the complete feature overview documentation of the Nexter Blocks Navigation Menu block, [click here](https://nexterwp.com/docs/add-a-search-bar-in-wordpress/).*

***Requirement  - This block is a part of the Nexter Blocks, make sure it's installed & activated to enjoy all its powers.***

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/builder/wordpress-ajax-search-bar/)

To do this, make sure you’ve added some products to your WooCommerce store.

Then, add the Search Bar block on 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, select **Products**.

![](https://nexterwp.com/wp-content/uploads/2024/12/searchbar-select-product-1.png)

Now, you should be able to see a dropdown beside the search bar.

In the **Label** field, you can add a label name for the select dropdown.

In the **Placeholder** field, you can add a placeholder text for the select dropdown. 

From the **Show Count** toggle, you can show the number of products the item has in numbers.

3. Now go to **Extra Option** tab and enable the **AJAX Search** toggle.

![](https://nexterwp.com/wp-content/uploads/2024/12/searchbar-ajax-search-8.png)

Now you can select a product from the dropdown to show all the products in the search result or you can directly search for products as well.

You can click on any item to go to the product page directly.

![](https://nexterwp.com/wp-content/uploads/2024/12/searchbar-select-product-demo-1.gif)