{"id":33417,"date":"2026-11-14T20:51:32","date_gmt":"2026-11-14T19:51:32","guid":{"rendered":"https:\/\/wooacademy.sk\/?p=33417"},"modified":"2026-11-14T20:51:32","modified_gmt":"2026-11-14T19:51:32","slug":"woocommerce-search-autocomplete-typeahead","status":"publish","type":"post","link":"https:\/\/wooacademy.sk\/en\/woocommerce-search-autocomplete-typeahead\/","title":{"rendered":"Search autocomplete in WooCommerce: how typeahead should work to sell"},"content":{"rendered":"\n<p><strong>Search autocomplete (also called typeahead or predictive search) is the panel under the search box that shows suggestions and products while the shopper is still typing.<\/strong> Good autocomplete answers before the shopper finishes the word, copes with typos, shows 4 to 10 items and takes the shopper straight to the product on click. Most WooCommerce stores have nothing like it: search waits for Enter and then returns a results page.<\/p>\n<p>In this article I explain how autocomplete should work according to user research, what to watch for when choosing a solution, and how I solved it in the wooacademy search 1.0.3 plugin.<\/p>\n\n<h2>Typeahead, autocomplete, predictive search: are they the same?<\/h2>\n<p>In practice, yes. Typeahead means the system reacts while you type. Autocomplete completes a partly typed word or query. Stores use the terms interchangeably. The real difference is what the panel shows:<\/p>\n<ul>\n<li><strong>query suggestions<\/strong> (the shopper types &#8220;snow&#8221; and sees &#8220;snow chains&#8221;),<\/li>\n<li><strong>products<\/strong> with name, price and availability,<\/li>\n<li><strong>categories<\/strong> to narrow the search.<\/li>\n<\/ul>\n<p>On a store, products and categories make the most sense because they cut one page out of the path to purchase.<\/p>\n\n<h2>What research says about autocomplete<\/h2>\n<p>Baymard Institute tests search on hundreds of e-commerce sites. From their findings I pick what you can apply directly:<\/p>\n<ul>\n<li><strong>80% of e-commerce sites<\/strong> offer autocomplete, but only <strong>19%<\/strong> get all the details right.<\/li>\n<li>Show no more than <strong>10 suggestions<\/strong> on desktop and <strong>4 to 8<\/strong> on mobile. With more, people stop reading them.<\/li>\n<li><strong>69% of sites<\/strong> fail to show relevant suggestions when the shopper makes a small typo. Suggestions disappear or go completely off track.<\/li>\n<\/ul>\n<p>The last point is the costliest. A shopper who types &#8220;shampo&#8221; instead of &#8220;shampoo&#8221; and sees autocomplete go silent assumes you do not stock it. More on typos in the article on <a href=\"https:\/\/wooacademy.sk\/en\/woocommerce-fuzzy-search-typos\/\">how fuzzy search works<\/a>.<\/p>\n\n<h2>Five things good autocomplete must handle<\/h2>\n<h3>1. Speed<\/h3>\n<p>If suggestions appear after half a second, the shopper has already finished typing and pressed Enter. Autocomplete is then pointless. The problem with WordPress is that every request loads the whole system: theme, all plugins, WooCommerce. On ordinary hosting that takes hundreds of milliseconds to seconds.<\/p>\n<h3>2. Typos and diacritics<\/h3>\n<p>On mobile people type fast and often skip accents. In languages such as Slovak, Czech, German or French, &#8220;kosela&#8221; and &#8220;ko\u0161e\u013ea&#8221; must lead to the same shirt.<\/p>\n<h3>3. Word forms<\/h3>\n<p>Shoppers type &#8220;boots&#8221;, the product title says &#8220;boot&#8221;. Highly inflected languages have ten or more forms per noun. That is what <a href=\"https:\/\/wooacademy.sk\/en\/stemming-vs-lemmatization-ecommerce-search\/\">stemming and lemmatization<\/a> are for.<\/p>\n<h3>4. Sensible order<\/h3>\n<p>The first three items decide. The top belongs to products that match in the title, are in stock and sell, not a product that mentions the word once in a long description.<\/p>\n<h3>5. Stay out of the way<\/h3>\n<p>The autocomplete script must not slow down page load. Visitors who do not search should not download it.<\/p>\n\n<h2>Why WooCommerce cannot do this on its own<\/h2>\n<p>Default WordPress search compares text in the database using an SQL LIKE condition on title, content and excerpt. It does not fix typos, does not understand word forms and has no autocomplete. Plugins that add autocomplete often just send the same query over AJAX after every keystroke, so they are slow and load the server.<\/p>\n\n<h2>How wooacademy search 1.0.3 solves it<\/h2>\n<p>When building the plugin I started with speed, because nothing else works without it.<\/p>\n<ul>\n<li><strong>Its own index.<\/strong> The plugin prepares products in its own tables (words, their weights, price, stock, categories, brand). Searching does not read the whole catalogue.<\/li>\n<li><strong>A lightweight endpoint outside full WordPress.<\/strong> A query does not load the theme or other plugins. On a test catalogue of 5,000 products it answered in 3 to 35 ms.<\/li>\n<li><strong>Script only after a click.<\/strong> The page carries just a small loader (about 4 kB). The autocomplete itself downloads only when the visitor clicks into the box.<\/li>\n<li><strong>Typos, diacritics and word forms.<\/strong> Search ignores diacritics, has a light stemmer for Slovak and Czech and handles swapped letters. When unsure, it offers &#8220;Did you mean&#8221;.<\/li>\n<li><strong>Order by sales.<\/strong> Besides text match it considers sales over 90 days, stock and what people clicked for the same query. More in the article on <a href=\"https:\/\/wooacademy.sk\/en\/woocommerce-search-relevance-tf-idf-bm25-boosting\/\">search relevance and ranking<\/a>.<\/li>\n<li><strong>Keyboard control.<\/strong> Arrow keys and Enter work, so a product can be picked without a mouse.<\/li>\n<\/ul>\n<div class=\"wa-cta\" style=\"border:1px solid #d9e2ec;border-radius:10px;padding:18px 22px;margin:28px 0;background:#f5f8fb\">\n<p style=\"margin:0 0 8px\"><strong>wooacademy search 1.0.3 for WooCommerce<\/strong><\/p>\n<p style=\"margin:0 0 10px\">Autocomplete, typo correction, synonyms, ranking rules, search term statistics and product recommendations. Runs on your server, with no monthly fee per query.<\/p>\n<p style=\"margin:0\"><a href=\"https:\/\/wooacademy.sk\/konzultacie\/\"><strong>I want this search on my store<\/strong><\/a> \u00b7 annual licence for 1 domain \u20ac249, done-for-you setup \u20ac499<\/p>\n<\/div>\n\n<h2>How to test autocomplete on your store in 5 minutes<\/h2>\n<ol>\n<li>On mobile, type the name of your best-selling product without accents.<\/li>\n<li>Make one typo in it (drop a letter, swap two).<\/li>\n<li>Type a different word form (plural, another case).<\/li>\n<li>Type a word shoppers use but your titles do not. If nothing comes up, you are missing <a href=\"https:\/\/wooacademy.sk\/en\/woocommerce-search-synonyms\/\">search synonyms<\/a>.<\/li>\n<li>Check whether suggestions appear before you finish the word.<\/li>\n<\/ol>\n<p>If two of the five fail, search is costing you orders. How many, you will see in your <a href=\"https:\/\/wooacademy.sk\/en\/woocommerce-zero-results-search-analytics\/\">search terms and zero-result statistics<\/a>.<\/p>\n\n<h2>Frequently asked questions<\/h2>\n<details><summary><strong>How many suggestions should autocomplete show?<\/strong><\/summary><p>According to Baymard Institute testing, at most 10 on desktop and 4 to 8 on mobile. People stop reading longer lists.<\/p><\/details>\n<details><summary><strong>Will autocomplete slow down page load?<\/strong><\/summary><p>It should not. With wooacademy search the page loads only a small loader, and the script itself loads after the visitor clicks into the search box.<\/p><\/details>\n<details><summary><strong>Does autocomplete work with WPML and multiple languages?<\/strong><\/summary><p>The plugin remembers the language when searching and stores it for order attribution. Before deploying on a multilingual store I recommend testing on a staging copy.<\/p><\/details>\n<details><summary><strong>Do I need an external service for autocomplete?<\/strong><\/summary><p>No. wooacademy search runs on your WordPress and does not send data outside your server, apart from the optional AI assistant.<\/p><\/details>\n<p style=\"margin-top:32px;font-size:.95em;color:#555\">Author: <a href=\"https:\/\/wooacademy.sk\/milan-frano-wordpress-a-seo-skolenia\/\">Milan Fra\u0148o<\/a>, wooacademy.sk. I build WooCommerce stores, tracking setups and SEO. I developed the wooacademy search plugin for stores that want good search without paying a monthly fee to an external service.<\/p>\n\n<!-- wp:themify-builder\/canvas \/-->","protected":false},"excerpt":{"rendered":"<p>Autocomplete shows suggestions and products while the shopper is still typing. If it is slow, breaks on typos or shows 20 items, shoppers ignore it.<\/p>\n","protected":false},"author":2,"featured_media":33378,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[698,839],"tags":[828],"class_list":["post-33417","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wooacademy-pluginy-en","category-online-marketing","tag-seo-doktor","has-post-title","has-post-date","has-post-category","has-post-tag","has-post-comment","has-post-author",""],"builder_content":"","_links":{"self":[{"href":"https:\/\/wooacademy.sk\/en\/wp-json\/wp\/v2\/posts\/33417","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wooacademy.sk\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wooacademy.sk\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wooacademy.sk\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wooacademy.sk\/en\/wp-json\/wp\/v2\/comments?post=33417"}],"version-history":[{"count":2,"href":"https:\/\/wooacademy.sk\/en\/wp-json\/wp\/v2\/posts\/33417\/revisions"}],"predecessor-version":[{"id":33419,"href":"https:\/\/wooacademy.sk\/en\/wp-json\/wp\/v2\/posts\/33417\/revisions\/33419"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wooacademy.sk\/en\/wp-json\/wp\/v2\/media\/33378"}],"wp:attachment":[{"href":"https:\/\/wooacademy.sk\/en\/wp-json\/wp\/v2\/media?parent=33417"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wooacademy.sk\/en\/wp-json\/wp\/v2\/categories?post=33417"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wooacademy.sk\/en\/wp-json\/wp\/v2\/tags?post=33417"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}