Skip to main content

Store integration

Search Products PRO bar is integrated in Woo stores with custom elements, shortcode or a page builder widget or element. You can put the search bar anywhere on the website. Latest builders have support for header and footer sections, so you can use this element anywhere!

Shortcode​

Easiest way is to call a Search Products PRO shortcode from any element. Here's how to use it.

To output the defalt element in place use the following shortcode.

[search_products_pro]

Supported shortcode parameters​

This shortcode supports parameters to make integrations easier.

id=""
class=""
category=""       // look for in category. enter slug or multiple separated with comma
position=""       // "fixed" or "static" position of the element
size=""           // "sm", "md" or "lg"
categorytree=""   // "-1" full, "0" no category tree, "1" 1st level, "2" 2nd level, "3" 3rd level
showprice=""      // "yes" or "no"
showimage=""      // "yes" or "no"
showterms=""      // "yes" or "no"
theme=""          // theme name from the settings
callout=""        // this is actually modal "yes" or "no"
iconcallout=""    // url for the trigger modal icon replacement
iconsearch=""     // url for the search icon replacement
iconx=""          // url for the dismiss icon replacement
chartosearch=""   // characters to search e.g. "2" or "3"
limit=""          // limit products to show. e.g. "10"
placeholder=""    // replace search input placeholder text
notfound=""       // replace not found results text
catseparator=""   // replace category separator e.g. ">"

Elementor​

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 the plugin widget to your page and set the options if you prefer.

To limit search within a category type in the category slug in Category field.

ID and Class options can be used to add unique parameters to widget.

WPBakery​

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

To limit search within a category type in the category slug in Category field.

ID and Class options can be used to add unique parameters to widget.

Gutenberg​

Currently the block for Gutenberg is not available.

Use shortcode until the full integration.

To insert a Search Products PRO element in the Gutenberg builder add a Shortcode block and inside input the following shortcode.

[search_products_pro]

Avada Fusion​

To insert a Search Products PRO element in the Avada Fusion builder add a Shortcode element and inside input the following shortcode.

[search_products_pro]

Divi​

To insert a Search Products PRO element in the Avada Fusion builder add a Shortcode element and inside input the following shortcode.

[search_products_pro]

Adjust shortcodes fucntionality with the parameters.

How to use shortcode parameters?​

Search in product category​

Shortcode parameters let you extend the functionality of elements. For instance, you can make an element search just inside one category. To achive this use the category="" parameter. It's important to put the category slugs or ids. If you to search in multiple categories at once in the parameter enter multiple slugs or ids separated by comma.

[search_products_pro category="men"]

Size of the element​

Setting a size of the search bar can be done by using the size="" parameter. Accepted parameters are sm, md and lg resembling the small, medium and large element.

[search_products_pro size="lg"]

Postitioning of the search results​

When results appear, they can be positioned as a normal element, pushing down other elements or it can be positioned fixed, which means it'll float on top of elements that appear below the search bar. Available options are fixed and static.

[search_products_pro position="fixed"]

Setting element ID and class​

Parameters id="" and class="" are used to add these parameters to the elemnent wrapper.

[search_products_pro id="my-element-01" class="my-class-02"]