Home » Documentation » Product Search » Getting Started » How to Create Your First WooCommerce Product Search Form

How to Create Your First WooCommerce Product Search Form

Elevated Product Search creates your WooCommerce product search form automatically on activation. All you need to do is add the shortcode to a page, widget, or your theme’s header area where you want the AJAX search to appear.

Table of Contents

Step 1: Configure Your Product Search Form

Elevated Product Search creates your WooCommerce search form automatically on activation. The form configuration lives in the plugin settings, and the [elex_product_search] shortcode displays that configured form wherever you place it.

Navigate to Elevated › Product Search › Settings.

The left side of the page contains all configuration options. The Preview panel on the right shows how your form will appear to customers.

Settings page with Preview panel visible

Configure the basic settings:

  • Minimum Characters: Set how many characters a customer must type before search results appear
  • Max Form Width: Control the maximum width of the product search input field
  • Layout: Choose between different layout options (such as “Icon on mobile”)
  • Mobile breakpoint: Define the screen width where the mobile layout takes effect
  • Show Submit Button: Toggle whether to display a search button alongside the input
  • Input Background Color and Input Text Color: Set the colors for the search input field

Scroll down to configure results display:

  • Max Results: Set how many WooCommerce products appear in the dropdown before the “See all products” link
  • No Results Label: Customize the text shown when no products match the search
  • Results Area Styles: Adjust padding, background colors, and borders for the results dropdown
Results Area section with Max Results slider

Click Save Settings when finished. The shortcode [elex_product_search] now carries this configuration wherever you add it.

Advanced configuration options (under the Advanced Options section):

  • Search Scope: Add SKUs, attributes, categories, tags, and custom fields to searchable content
  • Fuzzy Matching: Enable typo tolerance and adjust match strictness
  • Search Filters: Exclude out-of-stock products or filter by specific categories/tags

These options rebuild the search index automatically when saved. See individual documentation articles for detailed configuration of each feature.

Step 2: Add the WooCommerce Product Search Form to a Page

To add the shortcode to your WooCommerce site, create a new page or open an existing one where you want the product search form to display.

In the editor, add a Shortcode block and enter:

[elex_product_search]
Gutenberg editor with Shortcode block containing the shortcode

Save or update the page. Visit the page to confirm the search form appears.

Step 3: Add the WooCommerce Product Search Form to a Widget Area

Widget areas include sidebars, footers, and any theme-specific widget zones, and the steps to add a widget vary depending on your theme type.

  • Block Themes: Go to Appearance › Editor › Template Parts, select the widget area (such as Sidebar or Footer), and add a Shortcode block with [elex_product_search].
  • Classic Themes: Go to Appearance › Widgets, look for the widget area, and add a Shortcode block with [elex_product_search].

For detailed instructions on sidebar placement, width adjustments, and troubleshooting narrow containers, see How to Add WooCommerce Product Search to Sidebar.

Step 4: Add the WooCommerce Product Search Form to Your Header

To add the search form to your site header, place the [elex_product_search] shortcode using one of the following methods based on your theme setup.

  • Block Themes: Go to Appearance › Editor › Template Parts › Header. Add a Shortcode block [elex_product_search] where you want it, then save.
  • Classic Themes: Go to Appearance › Customize and look for a header area. Add the shortcode to the available header location.
  • Page Builders: Open your header template and add the shortcode using your builder’s Shortcode widget.
  • Code: Add <?php echo do_shortcode('[elex_product_search]'); ?> to your theme’s header.php file, or use a code snippet plugin.

For complete step-by-step instructions covering each method, see How to Add Search to Your Menu or Header.

Step 5: Manage the Product Search Index

The plugin automatically builds a search index from your WooCommerce products when activated. If you add new products or modify searchable fields later, you may need to save your settings to rebuild the index.

Go to Elevated › Product Search › Settings and open the Advanced Options panel on the left side of the page.

Scroll to the Indexer section.

Indexer section with Force Index Rebuild button visible

Click Force Index Rebuild.

A success message appears at the bottom of the screen indicating how many products were indexed (for example: “Successfully indexed 24 products”).

Success notification showing indexed product count

Troubleshooting

The product search form shortcode displays as plain text

Make sure you are using a Shortcode block in the block editor, Site Editor, or page builder. If you pasted it into a Paragraph block, cut the text and re-add it using the Shortcode block.

WooCommerce product search returns no results

Go to Elevated › Product Search › Settings and check the Indexer section. If you recently added products or changed search scope settings, click Force Index Rebuild and wait for the success message to appear.

The product search form does not appear in the widget area

Some classic themes disable shortcodes in widgets. Add this to your theme’s functions.php file or via WPCodeBox:

add_filter('widget_text', 'do_shortcode');

Changes to header.php break the site

If editing the theme file directly causes errors, restore the original file from a backup. Then use WPCodeBox or a child theme to add the code safely without modifying the parent theme.

Related Documentation

On this page
Want More?

Get Every Elevated Extension You’ll Ever Need—One Payment, Yours for Life

Build faster, smarter, and without limits. A single purchase unlocks our entire library today and every new extension we release in the future. No renewals, no upsells, just lifetime power at your fingertips
+All other extensions for unlimited sites

The All Access Pass, available for a limited time

This exclusive package won't be around forever, as we will eventually move to a subscription model. This is your chance to get in early.
  • All Current Extensions
  • All Future Extensions
  • No Renewal Fees
  • 90-Day Money-Back Guarantee