Docs

Search Products Pro v.1.0.0

12.12.2020. Initial release

1. Introduction

Hi! I’m the best search bar for WooCommerce! I can find any product easy and quicker than my competitors. That will affect the website conversion rate I’m installed at. Give it a try, it’s simple!

2. Installation

To install Search Products PRO plugin follow the steps below.

  • In your WordPress Dashboard navigate Plugins
  • Click Install Plugins and then click Add New
  • Click the Upload Plugin button
  • Upload the plugin ZIP file that you’ve downloaded from Codecanyon.net and click OK
  • Click Install Plugin to start the installation
  • When installation is complete, click Activate
  • This last step activates the plugin and now you can use it!

3. Automatic updates

Automatic updates are available thru WordPress.org service. You will be notified in Plugins section of your WordPress Dashboard about the new version. We advise to keep yours at the latest version. Security and reliability wise that is the best solution. You can turn on the automatic updates for this plugin too, if you want to make us care about the updates.

4. Search bar elements

Search Products PRO bar is initiated with a shortcode or a page builder widget/element. You can put the search bar anywhere on the website!

4.1 Shortcode

Shortcode is the most basic way of using the plugin. To output Search Products PRO bar element input following shortcode in the content builder.

Following shortcode outputs the search products bar default element:

[search_products_pro]

Supported shortcode parameters:

callout="yes"
position="static" or position="fixed"
id="shortcode-id"
class="shortcode-class"
category="category-term-to-search-in"

4.2 Shortcode parameters

4.2.1 Call out element

Search Products PRO element has two methods.

  1. Direct element
  2. Call out element

Difference between the two methods follow. Direct method element will output the input search bar immediately. While call out element outputs a button to call search products modal that will fill out the whole screen.

To call the call out method and show just a modal init button, use the following shortcode.

Following shortcode outputs the search products bar element:

[search_products_pro callout="yes"]

4.2.2 Fixed position

Search Products PRO element can display results in two ways.

  1. Static positioning
  2. Fixed positioning

Difference between the two methods follow. Static positioned results element will pus the content below it down as the results fill in.

Fixed positioned element  shows results “fixed” just below the search bar. Content will not be pushed and the results will appear “on top”.

To choose position and show use the following shortcode parameter.

Following shortcode outputs the search products bar element with fixed position:

[search_products_pro position="fixed"]

4.3 Elementor widget

If you use Elementor or Elementor PRO page builders for WordPress, we’ve included the Search Products PRO widget. Find it in the General section or just type the Search Products PRO in the search widget field.

Drag and drop element to your page and set a few options if you prefer.

If you want to use the Call out method make sure you select it from the Element method dropdown.

To search within a category type in the category slug in Category field. ID and Class can add customized ID and class parameters to element if needed.

4.4 WPBakery Page Builder

If you use WPBakery Page Builder for WordPress, we’ve included the Search Products PRO element. It’s named  Search Products PRO.

If you want to use the Call out method make sure you select it from the Element method dropdown.

To search within a category type in the category slug in Category field. ID and Class can add customized ID and class parameters to element if needed.

4.5 Gutenberg

To use with Gutenberg follow these simple steps.

  1. Click Plus button to add element and search for Shortcode
In the field enter

[search_products_pro]
If you want to add a call out method element use the following shortcode.

[search_products_pro callout="yes"]
If you want to limit search within a category.

[search_products_pro callout="yes" category="my-category-slug"]

4.6 Cornerstore

To use with Cornerstone page builder follow these simple steps.

  1. Click Plus button to add element and search for Shortcode
In the field enter

[search_products_pro]
If you want to add a call out method element use the following shortcode.

[search_products_pro callout="yes"]
If you want to limit search within a category.

[search_products_pro callout="yes" category="my-category-slug"]

4.7 AVADA Fusion builder

To use with AVADA Fusion follow these simple steps.

  1. Click Plus button to add element and search for Shortcode
In the field enter

[search_products_pro]
If you want to add a call out method element use the following shortcode.

[search_products_pro callout="yes"]
If you want to limit search within a category.

[search_products_pro callout="yes" category="my-category-slug"]

4.8 Divi builder

To use with Divi builder follow these simple steps.

  1. Click Plus button to add element and search for Shortcode
In the field enter

[search_products_pro]
If you want to add a call out method element use the following shortcode.

[search_products_pro callout="yes"]
If you want to limit search within a category.

[search_products_pro callout="yes" category="my-category-slug"]

5. Plugin settings page

Search Products PRO Dashboard. Export, Import, Backup, Restore and Reset plugin options is available.

Search by Categories, by Attributes, by Tags, by Colors, by Brands, by Custom Taxonomies, by anything you can think of!

Product SKU search options. SKU compare EXACT (IN) or LIKE (LIKE) SQL methods.

Add custom meta keys to search in them. You can even search by price with our bar. Advanced Custom Fields is supported!

Customize the full look of the Search Products PRO element.

More advanced options on the element can be se. Trigger how many characters will make a search. Products to display sets the max amount of products to return by the AJAX search query. Category separator can be customized too.

6. Contact support desk

Hey! Need help? Send us a message here and we’ll get in touch quickly!