--- 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-09-27 lang: en author: "Aditya Sharma" description: "Every extra page load between a shopper and the product they want costs you sales. Live search keeps them on the page they are already on. With AJAX switched on,..." image: https://nexterwp.com/wp-content/uploads/2024/12/add-ajax-search-for-woocommerce-products-in-wordpress-1024x519.jpg word_count: 595 --- # How to Add Ajax Search for WooCommerce Products in WordPress? Every extra page load between a shopper and the product they want costs you sales. Live search keeps them on the page they are already on. With AJAX switched on, the Search Bar shows matching products under the box as the shopper types, with thumbnails and prices attached. *For every Search Bar setting in one place, see the [Search Bar guide](https://nexterwp.com/docs/add-a-search-bar-in-wordpress/).* [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/builder/wordpress-ajax-search-bar/) ## Before You Start - **Edition:** Free. Measured with Nexter Blocks Pro deactivated, the Search Bar renders identically — form, input, dropdowns, suggestions and results all work without Pro.- **Block to enable:** Search Bar, switched on under **Nexter > Blocks** in your WordPress dashboard.- **WooCommerce active, with published products.** Product search is guarded: with WooCommerce inactive the block returns an error rather than an empty list. ## Steps - Select your **Search Bar** block, open **Extra Option**, switch on **Only for specific CPT**, and set **CPT Type** to **Products**. ![Setting the block to search products](https://nexterwp.com/wp-content/uploads/2026/09/sb-cpt-products.webp) - Switch **AJAX search** on and set the character limit before results start. ![Enabling AJAX search](https://nexterwp.com/wp-content/uploads/2026/09/sb-char-limit.webp) - Turn on **thumbnail** and **price** in the result settings, then publish. ![Product result settings](https://nexterwp.com/wp-content/uploads/2026/09/sb-results-visibility.webp) - Type a product name on the real page. ![Live product results with thumbnails and prices](https://nexterwp.com/wp-content/uploads/2026/09/sb-fe-wooajax.webp) ## How It Behaves The block writes its AJAX configuration onto the wrapper, and the script reads it for each request. Measured: switching the setting on flips the stored flag and carries the character limit alongside it. - **A character limit holds the search back.** Nothing is requested until the visitor has typed at least the configured number of characters, which keeps a long list of requests from firing on the first letter.- **Every request is nonce-checked.** The block issues a fresh nonce on render and the endpoint rejects requests without a valid one.- **Product results carry WooCommerce's own price markup.** Measured on a discounted product: the struck-through original beside the sale price, identical to the shop.- **Thumbnails come from the featured image.** A product without one renders a card with no image.- **Hidden products stay hidden**, because catalogue visibility exclusions apply to every product query.- **It degrades to an ordinary search.** The block renders a real `
` pointing at your site root, so with JavaScript disabled the bar still submits and lands on WordPress's own search results. ## Limitations - **Each keystroke past the limit is a request to your server.** On a busy store that adds up; a higher character limit is the simplest way to reduce it.- **Results are not cached.** The same search runs again every time.- **Only the product title is matched by default.** Shoppers searching by a word from the description need content matching switched on, which broadens results considerably.- **SKUs are not matched.** They live in product meta, which the standard fields do not cover.- **Variations are not searched individually.** A match returns the parent product.- **Show All Result does not currently render usable cards.** Measured on 5.0.6: the pre-loaded list renders three empty placeholders with no title, thumbnail or link, and ignores the result count you set. Reported to the developers. Leave it off and let the visitor search. ## Troubleshooting ### Nothing appears as I type AJAX search is off by default. Check it is on, and that you have typed past the character limit. ### Results appear but have no prices The price toggle is in the result settings and is separate from the thumbnail one. ### The search returns an error WooCommerce is not active. Product queries check for it before running. ### It feels slow on a large catalogue Raise the character limit so fewer requests fire, and keep content matching off unless you need it. ## Related Docs - [Only search WooCommerce products](https://nexterwp.com/docs/only-search-woocommerce-products-in-wordpress/)- [Search WooCommerce products by category](https://nexterwp.com/docs/search-woocommerce-products-by-category-in-wordpress/)- [Add AJAX pagination to search results](https://nexterwp.com/docs/add-ajax-pagination-to-search-results-in-wordpress/)- [Add an AJAX load more button to search results](https://nexterwp.com/docs/add-ajax-load-more-button-to-search-results-in-wordpress/)- [Add product listing in WordPress](https://nexterwp.com/docs/add-product-listing-in-wordpress/) ## Frequently Asked Questions **Q: Why does nothing appear while I type in the product search bar?** A: AJAX search is off by default, and the bar also waits until you pass the character limit before it sends anything. That delay matters because it prevents a request on every first keystroke, which is especially useful on larger catalogs. If the search still looks dead, the page needs WooCommerce active and published products, since product queries are guarded and can error out instead of returning an empty list. **Q: What do I need before adding Ajax search for WooCommerce products in WordPress?** A: The setup works with the Free edition, with Nexter Blocks Pro deactivated, and the Search Bar block enabled under Nexter > Blocks in your WordPress dashboard. WooCommerce must be active and you need published products. That last part matters because the block checks for WooCommerce before running product queries, so inactive WooCommerce produces an error rather than a blank result set. **Q: Does Ajax product search work if JavaScript is disabled?** A: The search bar degrades to a normal WordPress search form when JavaScript is off. The block renders a real pointing at your site root, so the visitor still submits a search instead of getting stuck. That fallback is useful because it keeps the bar functional even when AJAX cannot run, although you lose the live suggestions under the box. **Q: What gets searched by default in WooCommerce Ajax search?** A: Only the product title is matched by default. That keeps results tighter and faster, but it also means shoppers searching from a description word will miss matches unless content matching is switched on. SKUs are not matched, and variations are not searched individually either, so a match returns the parent product rather than each variation. **Q: How do I make Ajax search results show prices and thumbnails?** A: The result settings control those extras separately from the AJAX switch. Turn on thumbnail and price in the result settings, then publish. Prices use WooCommerce’s own markup, so discounted products show the struck-through original beside the sale price just like the shop. Thumbnails come from the featured image, and products without one simply render without an image. **Q: What is the best way to keep Ajax search fast on a large WooCommerce catalog?** A: A higher character limit is the simplest way to cut down server requests because nothing is sent until the visitor types enough characters. That matters since every keystroke past the limit becomes a request, and results are not cached. Keeping content matching off unless you really need it also helps, because broadening matches increases how much work each search has to do.