To add Elevated Product Search to an Elementor template, open the template in Elementor › Theme Builder, add a Shortcode widget, and enter [elex_product_search]. This places the AJAX search for WooCommerce Elementor in your header, shop page, or product archive layout.
Elementor Theme Builder controls site-wide templates, including the header.
Go to Elementor › Theme Builder in your WordPress admin.
Click the Header to open your site’s header template. If you have multiple headers, select the one active on your shop pages.
Click Edit.
In the Elementor canvas, locate the area where you want the search form. This is typically next to the site navigation menu.
Click the + icon to add a new widget. Search for Shortcode and drag the Shortcode widget into place.
In the Shortcode field on the left panel, enter:
[elex_product_search]
Click Publish to save the template.
Visit your site frontend to confirm the WooCommerce search form appears in the Elementor header.
Go to Elementor › Theme Builder.
Click Product Archive to open the template that controls your shop page layout. If you do not have a custom shop template, create one by clicking Add New and selecting Product Archive.
Click Edit with Elementor.
Locate the section where you want the product search form. Many stores place a search bar at the top of the shop page or directly above the product grid.
Drag the Shortcode widget into that section.
Enter the shortcode in the left panel:
[elex_product_search]Click Update.
Visit your shop page to confirm the AJAX search for WooCommerce form appears and returns live results.
Elementor columns and containers often have fixed widths that may conflict with the default search form size.
Navigate to Elevated › Product Search › Settings › Basic Settings.
Look for the Max Form Width and set a value that fits your Elementor container. For narrow header columns, use a smaller value (such as 300 pixels).
Look for the Layout and select Icon on mobile if the header column is too narrow for a full input field. This collapses the search into an icon that opens an off-canvas panel when clicked.
Click Save Settings.
The Preview panel updates to show the adjusted width.
Elementor Theme Builder manages templates that apply across your entire store. Placing the [elex_product_search] shortcode in a Theme Builder template ensures the WooCommerce product search form appears on every page that uses that template without editing individual posts or pages.
For example, a header template assigned to your Entire Site will display the Elevated Product Search form in the header of every page. A Product Archive template will show the form on your shop page and category pages automatically.
The Elementor Shortcode widget executes the shortcode and renders its output directly inside the container. Because Elevated Product Search handles its own HTML structure and JavaScript for AJAX functionality, the form operates independently of Elementor’s styling system. This means the search form works inside Elementor columns, sections, and containers without additional configuration.
If you need the search form on a single landing page or custom page only, you can use the same Shortcode widget on that specific page. For store-wide search, Theme Builder templates are the efficient approach.
The shortcode displays as plain text
Confirm you used the Shortcode widget and not the Text Editor or HTML widget. Only the Shortcode widget executes shortcodes automatically in Elementor.
The search box is too wide for the header
Reduce Max Form Width in Elevated › Product Search › Settings › Basic Settings to fit the column width.
The search form overlaps other header elements
Adjust the column width in Elementor or move the Shortcode widget to its own column.
Changes do not appear on the frontend
Clear the Elementor cache from Elementor › Tools › Regenerate CSS and clear any site-level caching.
