To install WooCommerce Predictive Search:
- Download the WooCommerce Predictive Search plugin
- Upload the woocommerce-predictive-search folder to your /wp-content/plugins/ directory
- Activate ‘WooCommerce Predictive Search’ from the Plugins menu within WordPress
As soon as you start to type WooCommerce Predictive Search starts delivering visually appealing and changing search results for:
- Product Names
- Product SKU’s
- Product Categories
- Product Tags
WooCommerce predictive Search delivers users instant and changing results as they type in a drop down which shows the product, post or page featured image thumbnail, title and description. Users can click through from the drop down to the ‘All Results Search Page’ that features endless scroll.
Add Woocommerce Predictive Search Via Widgets, Shortcodes or the provided function with parameters.
1. WooCommerce: WooCommercce Predictive Search only works when you to have the WooCommerce plugin installed. If you have WooCommerce installed and activated you will see WooCommerce and Products have been added to you WordPress Admin dashboard sidebar.
2. Settings: The WooCommerce Predictive Search plugin auto adds a Predictive Search Tab to the WooCommerce Settings dashboard. You access that by putting your mouse over WooCommerce in the sidebar and clicking on the Setting Link in the pop-out menu.
3. Predictive Search Settings Tab: Click on the Predictive Search tab on the WooCommerce admin panel to open it and access the ‘All Results Search Page’ set-up menu and the function and parameter instructions which you can use to manually insert the Predictive Search function into your theme for example in the themes header files.
4. The Predictive Search Widget. The main way most users activate Predictive Search on their sites is via widgets. To find the Predictive Search Widget go to ‘Appearance’ on your WordPress dashboard sidebar. Put your mouse over ‘Appearance’ and click on ‘Widgets’. The Widgets page will open then find the ‘WooCommerce Predictive Search’ Widget. Widgets are listed in Alphabetical order and thus you’ll the WooCommerce Predictive Search widget near the bottom of your widget list.
5. Predictive Search Shortcode – With WooCommerce Predictive Search activated you will see that it auto adds a Predictive Search Icon to the top of your Posts and Pages WordPress editor tool bar. Note the shortcode icon is not added to Single Products edit pages.
Predictive Search Widgets
You can add the Predictive Search widget to any or every sidebar or widgeted area on your theme.
1. To access the Widgets area on your WordPress admin dashboard click on or put your mouse over ‘Appearance’ is the dashboards sidebar.
2. Click on the Widgets link.
3. Scroll down through your sites available widgets until you find the ‘WooCommerce Predictive Search’ Widget.
4. Drag and drop the ‘WooCommerce Predictive Search’ Widget into any ‘Widget’ area in the right hand column of the Widgets dashboard. This example shows the widget has been placed in the ‘Shop’ widgetized area above the WooCommerce sidebar Shopping Cart.
All settings for Predictive Search Widgets that you put on your site are on the widget panel. Each widget used can be uniquely customized to suite the area of the site that the search widget will service.
1. Widget Title: Enter the title that you want the search box to show on the front end. Leave empty and no title will show.
2. Activate Search ‘Types’: The 5 available widget search ‘Types’ are – Products, Product Categories, Product Tags*, Posts and Pages. Activate each ‘Type’ of search by assigning a setting the number of that ‘types’ results to show on the Search Box drop down. Leave a field blank to exclude that ‘type’ from this widgets search results.
3. Search Results Order: Set the order in which the ‘Types’ show in the Search box drop down on the front end by using drag and drop. Each lot of results shows in the drop down under the ‘Type’ title. To drag and drop place your mouse over the up/down arrows, depress the left click on your mouse holding it down drag the ‘Type’ to where you want it in the order and drop it by releasing the left mouse clicker.
4. Results description Character Count: Set the number of characters that you want to show with each result. For products, the description is taken from the Products Description. For Post and Pages it shows the first characters of the content text. Note the description also captures paragraph breaks from the product.
5. Search All Products: Select this and this search widget will query everything for each ‘Type’ you have selected.
6. ‘Smart Search’: When activated ‘Smart Search’ delivers search results from the Product Category, Product Tag, Post Category and Post tag that relate to the content the user is currently viewing when they do the search. This delivers user lightning fast and extremely relevant search results.
7. Save: Click the save button to activate the widget settings.
Hints and Tips on Widget settings.
The graphic below shows you how those widget setting relate to the Predictive Search Widget placed into a sidebar widget area on the front end of your site.
1. Extract image showing the sidebar widget and how the setting made in it show on the front end of the site.
2. Title – The Widget title that show on the front end.
3. Number of results to show in the drop down. Tip: Change the order that results show in the drop down by using the drag and drop arrows on the widget to drag and drop the search types into the order that you want. The image shows that 2 has been set for the number of ‘Product Name’ results to show in the search drop down. Notice also how each search type shows under the heading of that types name so users know where the result comes from.
4. Number of Product SKU’s to show. Tip: Set any of the search types at ‘0’ or leave them blank and that search type is not activated for this widget. SKU results show the SKU’s as a the click-able title, but with the Product Name as the description text for ease of recognition by the user.
5. Product Categories: Tip: When users click on a product category search result link (the category name) in the drop down they are taken to that WooCommerce Product category page.
6. Product Category Results: Tip: If you have not uploaded a product category image, the no image place marker will show. To upload a Category image go to Products > Categories and edit each category to upload an image. If you want description text to show with the category results you should enter that in category image while you are editing the category.
7. Product Tags: Tip: When users click on a Tag search result link (the Tag name) in the drop down they are taken to that WooCommerce Product Tag page.
8. Product Tag Results: Tip: Unlike Product Categories, Product tags do not have anywhere you can upload a tag image or a Tag description so they will always show the no image place marker and the tag name as a link to the Tag page.
9. Posts: Will always show the post featured thumbnail or if no feature image is set the first image in the post plus the post title and description count that you have set.
10. Pages: Same as posts above
11. See More Results links to search pages: Tip: Any time that a search type has more results than are shown in the drop down a Link is created for that search type in the footer. For example if you have set Product Tags as a search type with 2 results to show in the drop down and there are only 2 results – the link in the footer does not show and no ‘All Search Results Page’ is created. So if your setting is to show 2 results for any search type and 1 Result is found and shows in the drop down = no link, no page, 2 results returned = 2 results in the drop down, no link in footer, and no all results search page is created, 3 results found – the 2 most relevant results show in the drop down and a link is created in the footer as the name of the search type and an ‘All Results Search Page’ is created.
As user search if they click the Search icon on the Search box or hit the enter key they are taken to the all results search pages that have been created for results of their search at that point.
All Results Search Pages
Front End Users – Features
The All Results Search pages are one of the really advanced features of the WooCommerce Predictive Search plugin- The all results search pages give your users:
- An incredibly informative and easy to navigate results format
- Each page features auto endless scroll – meaning you wow your users with your cutting edge technology and they never have to leave the page while the browser through potentially hundreds of results.
- Search results are divided in search type pages which are in a Navigation tab type format at the top of the page. Again the user feels like they have never left the page as they switch back and for ward between different search results types ex results by Product Names, Product Categories, Product SKU’s, Product Tags and even Posts and Pages.
- The full content layout style allows users to very quickly scan each result with as much detail as you want to set, right up to and including allowing them to add items to their cart right from the search page.
WooCommerce Predictive search gives administrators total flexibility is customizing what information the user see’s in the All results search page – for a detailed description of what they are and how that works see ……
How it works! An Explanation.
- WooCommerce Predictive Search auto creates engaging highly customizable All Search Results pages for all search types.
- All results search pages are created when a users does a search via a search widget, function or shortcode.
- A search page is created each time a search has more results than the number that is set to display in the drop down
- All search results pages are accessible by either clicking the search icon on the widget or clicking any of the ‘more results’ links at the bottom of the drop down – or by hitting the enter key during a search. Note if no results are showing in the drop down the All Results search page will show no results, because none have been found.
Image below is a cut down version of a search on a live site – it the results page for the search term ‘s’ which created All Search Results pages for Product Names | Product Categories | Product Tags – in the image we have only shown the first result for each search type.
1. Predictive Search Results Page – Page Title – You can edit this page title to anything you want. To do that go to your Pages > find the page and Edit the title and click update. Note – don’t end the page URL.
2. The open Search Page is shown in Bold text in a line of text telling users where they are. The Plugin auto adopts your themes CSS styling – so the fonts, font colour, size, text links – are auto the same as your theme.
3. Sort Search Results by -We built the plugin like this to make it incredibly easy for users to Sort Search results. Imagine the frustration if all of the results where just mixed together – or worse still listed in the Order set in the widget. If you had Product names or SKU’s first on the list the user may never scroll down far enough through potentially hundreds of results to find Product categories or tags.
4. This is the Hyper-linked Text Nav bar – showing users what other results are available. This format is in accordance with the WordPress Codex. As a results it works on any theme.
5. This is an example to show you how it works. When the user clicks on the Product Categories Tab link (item 3) they will see that Product categories moves up to show as the open page.
6. Products has now auto moved down to the Hyper linked text nav bar. Just an easy click to go back to them
7. This example shows what happens when the user clicks on the Hyper-linked tags. They see that it is now the open page showing all results for product tags.
8. The other 2 search results pages Product Name | Product Categories available from the text link nav bar.
Note users can share entire search results pages via the page URL. This means that if you use any kind of share plugin that it most likely will be able to use the URL to share via email and to social media. Of course you can copy and paste the URL manually and it leads people straight to the page even though you would have closed it some time ago.
Predictive Search Admin Tab
From the WooCommerce > Store > Predictive Search admin tab you can set
- Page Title of All Results Search page.
- Exclude From Predictive Search
- Customize the way results show on the All Search Results pages
- Config and customize the Predictive Search Function.
See notes and images below on each section.
Customize All Search Results Page Title
By default the All results search page title is WooCommerce Predictive Search
1. Predictive Search Admin Tab – Open this and you will see at the top the Search page. This page is auto created when you install and activate the plugin. The WooCommerce Predictive Search shortcode will be on the page.
2. You can use the Drop down to change the Page. If you want to customize the Page Title that shows at the top of the search page (image shows the WooCommerce Predictive Search Page title in the drop down and how it shows on the search page on the front of this site) just change the name of the page (Not the Page URL). Go to Pages in your wp-admin sidebar – Find the WooCommerce Predictive Search page – edit it and change the page Title and update. Come back here to the admin panel and check that is updated correctly. The new page title should be showing as the default page in the search page drop down. If it is not then use the drop down to select it and update the page.
Exclude Content From Predictive Search.
A new feature that gives you even more control. Exclude almost any content from being found or displayed by Predictive Search. From the Predictive Search admin panel you will see.
1. Exclude from Predictive Search – To exclude any content from being found our shown in Predictive Search results just enter that content types ID comma separated. example 12, 26, 203
2. Exclude Products – Enter product ID’s here that you want excluded from the search results. Note this will also exclude the product from showing in SKU results.
3. Exclude Product Categories – Place Product Categories ID’s here that you want excluded from search results. Note this setting does not exclude Products Within this category from showing in Product Name, Product SKU or Tag results.
4. Exclude Product Tags – Enter Tag ID’s you want excluded from predictive search. Note this setting does not exclude Products Within this Tag from showing in Product Name, Product SKU or Product Category results.
5. Exclude Posts – Enter Posts ID’s that you want excluded from predictive search results.
6. Exclude Pages – Enter Page ID’s that you want excluded from predictive search results.
Do not forget to ‘Update’ the page to save your settings.
Go Back to Top
Customizing All Search Results Display
WooCommerce Predictive Search enables you to completely customize the information that shows with each result on the All Results Search Pages. To do that from your wp_admin dashboard go to WooCommerce > Setting > Predictive Search tab. The image below shows you what that looks like. See the Image legend below for detailed notes on customizing the search pages settings.
1. Predictive Search tab – Open it to customize your All Search Results pages.
2. Search Results page settings – Use the settings to customize how the results show on the All Search Results pages. TIP – Please do not be confused – These setting control what shows with the results – not what results show – that is set from the three places you create a search box – The Widget Control panel, the Shortcode pop-up insert-er or the Global Function.
3. Results – Set the number of search results to load initially when the page is opened and in each subsequent endless scroll content load. Tip: The lower the number of results you set – the faster your pages will load.
4. Description Character Count - Set the amount of Description text you want to show with each search result. This text comes from first sentence / paragraph of the Product description, Product category description or first paragraph of posts and pages. Tip: Some people have got confused thinking that this setting also applies to the widget drop down results. It doesn’t. Each widget has its own independent settings which are on the actual widget.
5. Price- Check this box if you want the Product Prices to show with the listing. It shows specials pricing as well with the RRP crossed out and the Sale price just like the product pages.
6. Add to Cart Button – Check this to show and activate the Add to Cart button for all Products name results. If a product has Variations it show the ‘View Options’ button. The button its shows is your themes button.
7. Product Categories – Check this to show the Product Categories that the results is assigned to under the Product result – just like the product pages. Just another really handy navigation aid for your users. The Product Category names are linked to that Product Category page listing all Products assigned to that Product Category.
8. Product Tags – Check this to show the Product Tags that the results is assigned to under the Product result – just like the product pages. Just another really handy navigation aid for your users. The Product Tags names are linked to that Product Tag page listing all products in assigned to that Tag.
9. Automatic Endless Scroll Feature: The image shows a ‘See more results’ text link – but you don’t actually see that – what you do see is a beautiful pop us that tells you that more results are being loaded. It is a very cool feature.
Putting Predictive Search into your sites header.
At the bottom of the Predictive Search Tab page you will see the section with the Global Search function. Use this function to place the Predictive Search Box into the header of your theme. You may want to replace the existing WordPress / WooCommerce or Theme search widget with Predictive Search – you do that by replacing the search function in your header.php file with the global Predictive Search function.
1. Search Function tab – Click on tab to access the php search function and the parameters setting.
This function is made to make it easy for you to add or replace existing search functions in any area of your site that is not Widgetized. Most commonly this will be your sites header. The way it works is that you just copy and paste the Global Function into your site header.php file. Don’t change the function – you set all of the values for the function in field 4 to 17 in the image.
2. The Global search function. Note settings here only affect the global function – they have no impact on the Search boxes created by Widgets or shortcode.
3. Customize Search function parameters.
Once the Predictive Search function is in place on your site you do not ever have to touch the PHP code again. Anytime you want to change a value or setting you just make the change here and update the page and the changes will automatically show in the Global Search box. Note settings here only affect the global function – they have no impact on the Search boxes created by Widgets or shortcode.
4. Product name. – The number you set is how many of Products by Name results will show in the Drop down. Leave the field empty and Search by Product Name will not be activated.
5. Product SKU – The number you set is how many Products by SKU results will show in the Drop down. Leave the field empty and Search by Product SKU will not be activated.
6. Product Category – The number you set is how many Product Categories by Title results will show in the Drop down. Leave the field empty and Search by Product categories will not be activated.
7. Product Tag – The number you set is how many Product Tags results by Tag Title will show in the Drop down. Leave a field empty and that Search by Product tag will not be activated.
8. Posts – The number you set is how many Posts results by Title will show in the Drop down. Leave the field empty and Search by Post Title will not be activated.
9. Pages – The number you set is how many WordPress Page results by Title will show in the Drop down. Leave the field empty and Search by Page Title will not be activated.
10. Description Characters – Set the number of characters to show from each search types description.
11. Width – the wide of the search box – leave empty and the wide will be 100% of the available container.
12. Padding Top – set the padding you want above the search box in px. Use this to position your search box vertical alignment.
13. Padding Bottom – set the padding you want below the search box in px. Use this to position your search box vertical alignment.
14. Padding Left – set the padding you want to the left of the search box in px. Use this to position your search box horizontal alignment.
15. Padding Right – set the padding you want to the left of the search box in px. Use this to position your search box horizontal alignment.
16. Custom Style (Position) – on some themes you will need to know HTML and or PHP to get the Search box to sit right in your theme. You enter that code here. If you do not know how to do this and do not have access to a coder that does we offer a USD $22 ‘On Demand’ service. Just go here and purchase the service and we will do it for you that day. NOTE: this is a positioning service not a CSS Styling service.
17. Global Search – Check the box to select Global Search (All) – Unchecked and ‘Smart Search’ is activated. Smart Search means that Predictive Search will query and pull results from the Product category or tag that is being viewed first before it queries and shows results from the rest of the site.
18. “Save All Changes’ – after making any changes you must save them for them to be activated.
Global Search Box Text – Please note that there is no setting for Global Search Box Text on the Search Function settings. The text that shows by default inside your php function search box is set from the Predictive Search tab > Global Search Box Text setting.
Don’t box me in.
Editing the header.php file
To add the Global Predictive Search function to your header go to your wp_admin dashboard > Appearance > Editor > Header (header,php)
1. Appearance – You can access the header.php file right from your WordPress admin dashboard. Find Appearance on the dashboard admin sidebar.
2. Editor – Click on Editor to open your themes file editor.
3. Template Files – These all show in the right hand column on the Editor – they are in alphabetical order – scroll down until you see Header (header.php) and click on that file to open it in your editor.
Yellow Highlight – Try and find the existing search function – if you can replace it with the Predictive Search global function – always copy and paste the function – do not try and type it. If you cannot find a search function paste in the global function just before the last and closing ?php tag.
On Demand USD $12 service. – If you do not know how to do this and do not have access to a coder that does we offer a USD $12 ‘On Demand’ service. Just go here and purchase the service and we will do it for you that day.
Go Back to Top
In this section we will cover how to use the WooCommerce Predictive Search Shortcode to insert a search box and configure it into any page or post on your site. See image below and the detailed description and instructions in the Image Legend under the image.
1. Predictive Search Shortcode Icon – When you install and activate WooCommerce Predictive Search you will see that the Predictive Search icon has been added to the top of each post and page visual editor. To insert the search box into a post or page, first click in the page where you want the search box to show then click the icon which fires the pop-up.
2. Shortcode Pop-Up window. – Clicking the PS icon opens the ‘Insert WooCommerce Predictive Search pop-up box.
3. Customize the Search box settings before you insert.
4. Set search Parameters – Just like the Widget you set the number of results of each search type you want to show in the drop down from the search box. Put 0 or leave empty to deactivate that search type for this shortcode. Unlike the widget – there is no way to be able to sort the order by drag and drop. The pop-up function don’t support this feature.
5. Characters – Set the number of characters from the Product description or post / page content to show with each result.
6. Alignment – Us this feature to horizontally align the search box within the post or page content. Select an alignment from the drop down. the options are
None – like images search box will sit aligned to the left with text above and below it.
Left Wrap – Aligned to the left with text wrapping to the right of the search box.
Left no Wrap – Aligned to the left with text above and below.
Center – Center of the page with text above and below
Right Wrap – Aligned to the right with text wrapped to the left.
Right no Wrap – Aligned to the right with text above and below
7. Search Box Width – set the wide of the search box in px.
8. Padding – Set the padding in px that you want above, below, to the left of the search box and to the right.
9. Insert Shortcode – Click this button to insert the short code into the post or page with the parameters that you have set. When you do the pop up will close and you’ll see the shortcode has been inserted.