Woo Predictive Search

Installation

To install WooCommerce Predictive Search:

  1. Download the WooCommerce Predictive Search plugin PRO Version or Lite Version
  2. Upload the woocommerce-predictive-search folder to your /wp-content/plugins/ directory
  3. Activate ‘WooCommerce Predictive Search’ from the Plugins menu within WordPress

Features

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
  • Posts
  • Pages

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.

Getting Started

Add Woocommerce Predictive Search Via Widgets, Shortcodes, block or the provided function with parameters.

Once you have the plugin installed and activated it adds the Woo Predictive Search menu to your WordPress admin page menu. It looks like this when you hover over or click on Woo Predictive Search.

WooCommerce: a3 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.

Predictive Search Settings

Plugin Framework Global Settings

Image Legend

1. Manual Check For New Plugin Version – This plugin supports auto upgrades via your WordPress auto updates. Updates show within 24 hours of release. This feature allows you to call any new version for immediate upgrades instead of having to wait until they show in your WordPress updates.
2. Customize Admin Setting Box Display
– By default each admin panel will open with all Setting Boxes in the CLOSED position.
3. Google Fonts
– ON to connect to Google Fonts API and have auto font updates direct from Google.
4. House Keeping – On deletion (not deactivate) the plugin will completely remove all tables and data it created, leaving no trace it was ever here.

Search Results No-Cache

Results No-Cache – While testing different setting and the results in search box dropdown you need to switch ON Results No-Cache On. Search box dropdown results are cached in local store for frontend users for faster delivery on repeat searches. Be sure to turn this OFF when you are finished testing.

Predictive Search Mode

Search Mode – You have 2 option to choose:
Strict Mode – Will return exact match results. Example if user types ‘out’ the results will include all items that have ‘out’ at the start of a word such as ‘outside’, ‘outsized’ etc. This gives 100% relevant results every time but can lead to a lot of ‘Nothing Found’ results depending on how customers search your site.
Broad Mode – Just like Strict mode will return results that have the search term at the start but will also search within a word. Example if user types ‘out’ all items that have ‘out’ at the start will be returned plus all that have ‘out’ within a word such as ‘fadeout’, ‘about’ etc. Results are not as accurate as STRICT MODE but there will be less ‘Nothing Found’ results.

Search Page Configuration

Search Page – A search results page needs to be selected so that WordPress Predictive Search knows where to show search results. This page should have been created upon installation of the plugin, if not you need to create it.
Page shortcode:

Default Results Description Source

Default Source – Use the switch below to set where Predictive Search should source each found results description, if you have ‘Show Results Description’ activated in a PS Search Widget, Search Function, shortcode and on the All Results page. The 2 options are from the long description or short extract. If for any post the selected ‘Default’ source is empty PS will auto fallback to use the other source.

Predictive Search Focus Keywords

Image Legend

1. Predictive Search – Important! Do not turn this feature on unless you have or will be adding Focus Keywords to your posts. ON and Predictive search will query every post in searches checking for Focus Keywords. Increased and unnecessary queries ( if you have not set Focus Keywords ) can and on larger stores will degrade the search speed.
2. SEO Focus Keywords – Supported plugins, WordPress SEO and ALL in ONE SEO Pack.

Special Characters

Image legend:

1. Special Character Function – Select any special characters that are used on this site. Selecting a character will mean that results will be returned when user search input includes or excludes the special character. IMPORTANT! Do not turn this feature on unless needed. If ON – only select actual characters used in Post Titles, Category Names etc – each special character selected creates 1 extra query per search object, per post or page.
2. Character Syntax –

IGNORE. ON to ignore or skip over special characters in the string.
REMOVE. ON to remove or see special characters as a space. (recommended)
BOTH. On to use ignore and remove for special characters.
3. Select Characters –
Select from a commune list of characters to be ignore.

Exclude From Predictive Search

You can have exclude from Predictive Search Posts, Pages, Categories and Tags.

Google Analytics Site Search Integration

Image Legend:

1. Turn On to Track Predictive Search Result with Google Analytics
2. Google Analytics UID – Add your google UID. Example: UA-3423237-10
3. Query Parameter – The parameter that is to be entered on the track Site Search config page on your Google Anayitics account. Default: ps

Search Box

Global Search Box Text

Text to Show – Add your text to be display in the search box container. If you leave it empty will not show nothing.

Dropdown Results Animation

Add CSS animation to the loading of Results in the Search box dropdown. IMPORTANT! On settings tab turn ON Results NO-CACHE and when you check the animation on front end clear your browser cache so you can see the new animation effect that you have set.

Search In Category Feature

Image Legend:

1. Search In Category – Turn On this option
2. Post Category Cache –
Category Cache enables loading of your full post category tree on the search box with just 1 query which is a massive saving on server resources used.
3. Editing / Refresh Type –
Post Categories cache will be auto refreshed when add / edit / delete a CategoryYou will be prompted to manually refresh Cache when add / edit / delete a Post Category
4. Auto Refresh Every – If your Post Categories Don’t change very often set this long example ’12 months’

Performance

Database Sync

Predictive Search database is auto updated whenever a post is published or updated. Please run a Manual database sync if you upload post by csv or feel that Predictive Search results are showing old data. Will sync the Predictive Search database with your current WordPress databases

Image Legend

1. Auto Sync Daily – Set On and the database will automate sync daily.
2. Schedule Time –
Schedule a time for sync.
3. Email Notifications –
Set emails for errors and succeed sync. Leave blank and it will be used the email set as admin.
4. Manual Sync – Run a manual database sync if you upload post by csv or feel that Predictive Search results are showing old data.

Search Performance Settings

If you have a large site with 1,000’s of posts or an underpowered server use the settings below to tweak the search performance.

Image Legend

1. Characters Before Query – Number of characters that must be typed before the first search query. Setting 6 will decrease the number of queries on your database by a factor of ~5 over a setting of 1.
2. Query Time Delay –
Time delay after a character is entered and query begins. Example setting 1,000 is 1 second after that last charcter is typed. If speed type a 10 letter word then first query is whole word not 1 query for each character. Reducing queries to database by a factor of ~10.
3. Cache Timeout –
How long should cached popup result remain fresh? Use low value if your site have add or update many post daily. A good starting point is 24 hours.

All Results Pages

The All Results Search pages are one of the really advanced features of the WooCommerce Predictive Search plugin.

Image Legend

1. Results – The number of results to show before endless scroll click to see more results.
2. Template Type – Choose template you want to apply to search results page.
3. Container Classes –

Widget / Header Template

Widget and Header Templates have same settings.

Search Box Container

Image Legend

1. Search Box Alignment – Alignment within the widget area container
2. Search Box Width –
% of width of widget area container
3. Search Box Height –
The height of the container box
4. Search Box Margin –
Margin or space outside of the container box border in px.
5. Search Box Margin (Mobiles) –
Margin or space outside of the container box border in px. in mobile devices.
6. Search Box Border –
Add a border to the container.
7. Search Box Border Focus –
When click on box text area the border color will change.
8. Border Shadow –
Add a shadow to the container box.

Search in Category Dropdown

Image Legend:

1. Alignment – If set LEFT then Predictive Search Icon on RIGHT.
2. Maximum Width –
% width of Search Box.
3. Category Font –
Select what font to be use in Dropbox.
4. Down Icon Size – The size of the down icon.
5. Down Icon Colour –
Select the color for the down icon.
6. Background Colour –
Choose a background color for the dropdown container.
7. Vertical Side Border –
Customize the vertical side border.

Search Icon

Image Legend:

1. Search Icon Size –
2. Search Icon Colour –
3. Search Icon Hover Colour –
4. Background Colour –
5. Background Hover Colour –
6. Vertical Side Border –

Search Input Box

Image Legend:

1. Input Font –
2. Input Padding –
3. Input Background Colour –
4. Loading Icon Size –
5. Loading Icon Colour –

Close Icon (mobile only)

Image Legend:

1. Close Icon Size –
2. Close Icon Colour –
3. Close Icon Margin –

Click Icon to Show Search Box (mobile only)

Image Legend:

1. Search Icon On Mobile –
2. Search Icon Alignment –

3. Search Icon Size –

4. Search Icon Colour –

Results Dropdown Container

Image Legend:

1.
2.

Results Dropdown Section Titles

Image Legend:

1.
2.
3.
4.

Results Dropdown Items

Image Legend:

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

Results Dropdown Footer

Image Legend:

1. Footer Padding –
2. Footer Background Colour –
3. See More Text –
4. See More Font –
5. More Link Font –
6. More Icon Size –
7. More Icon Colour –

Search Function

Predictive Search Function

Copy and paste this global function into your themes header.php file to replace any existing search function. (Be sure to delete the existing WordPress or Theme search function)
<?php
$ps_echo = true ;
if ( function_exists( 'wp_predictive_search_widget' ) ) wp_predictive_search_widget( $ps_echo );
?>

Customize Search Function values :

Image Legend:

1.
2.
3.
4.
5.
6.
7.
8.

Predictive Search Block

The Predictive Search Block allows you to place a search bar anywhere on your website very easy. Our block is very easy to use and come with many options and settings.

Mobile icon

Predictive Bar

Category Dropdown

Search Icon Button

Search Input

Results Dropdown

Close Icon

Title

Items

Footer