Skip to content

Add Product Search Widget

Discover how to integrate the Product Search widget into your website and enhance the search experience for your users.

Using Theme Editor:

  1. Navigate to your WordPress admin dashboard.
  2. Go to "Appearance" > "Editor."
  3. Choose the location where you want to add the search widget.
  4. Click the "Add block" icon (+) and search for "Product Search."
  5. Select the "Product Search" block and add it to your chosen location.

Using Menus (Legacy Themes):

  1. For themes that don't support the new theme editor, go to "Appearance" > "Menus."
  2. Expand the "Product Search" meta box.
  3. Click "Add to Menu" to include the search widget in your menu.

Using Shortcode:

You can add the search widget anywhere in posts or pages using a shortcode.

Basic Usage:

Simply use the following shortcode:

markdown
[screets-product-search]Search[/screets-product-search]

Show Icon and Shortcut:

To show the icon and shortcut, use the following shortcode:

markdown
[screets-product-search icon="true" shortcut="true"]Search[/screets-product-search]

Without Styling:

To keep the search without styling, use the following shortcode:

markdown
[screets-product-search style="none"]Search[/screets-product-search]

Using JavaScript API:

You can also programmatically open, close, or toggle the Product Search modal using JavaScript. Please check the JavaScript API for more details.