To add the Elevated Product Search form to your menu or header, place the [elex_product_search] shortcode using your theme’s Site Editor, Customizer, header widget area, page builder, or header template file.
Go to Appearance › Editor.
Select Template Parts from the left navigation, then choose Header.
Click the area where you want the search form, such as next to the site logo or at the far right of the navigation row.
Click the + button to add a block. Select Shortcode.
Enter the shortcode:
[elex_product_search]Click Save.
If you are using a classic theme and want to add WooCommerce search to your header, look for header widget areas or header builder options in the Customizer.
Go to Appearance › Customize.
Look for a Header section, Header Builder, or Header Widgets option in the left panel. The exact name depends on your theme.
Click the header area where you want the search form. Add a Shortcode block or HTML widget and enter:
[elex_product_search]
Click Publish.
Go to Appearance › Widgets.
Look for a widget area named Header, Header Right, Top Bar, or similar.
Add a Shortcode block and enter:
[elex_product_search]
Click Update.
If your theme uses a page builder for the header template, add the shortcode using that builder’s Shortcode or HTML widget.
Open your header template in your page builder.
Locate the area where you want the search form.
Add a Shortcode widget (or HTML widget, depending on the builder).
Enter the shortcode:
[elex_product_search]Save the header template.
For direct theme file editing, add the shortcode to your header template file.
Go to Appearance › Theme File Editor.
Select header.php from the right-side file list.
Locate where you want the search form to appear. Add:
<?php echo do_shortcode('[elex_product_search]'); ?>Click Update File.
Note: Editing theme files directly carries risk. Create a child theme first, or use a code snippet plugin as described below.
WPCodeBox provides a safer way to add code to your site without editing theme files directly.
Install and activate WPCodeBox from the WordPress plugins page.
Go to WPCodeBox in your WordPress admin sidebar.
Click New Snippet in the left panel.
Enter a title for your snippet (for example, “Header Search Form”).
In the code editor, enter:
echo do_shortcode('[elex_product_search]');Under How to run the snippet, select Always (On page load) and set Where to insert the snippet to a hook that corresponds to your header area. Common options include wp_header or wp_head, or a theme-specific hook like astra_header if your theme provides one.
Click Save & then change the toggle to Enabled.
Visit your site to confirm the WooCommerce search form appears in the header.
Visit your site frontend and check the following:
If the search form appears in the wrong location, return to the Site Editor, Customizer, page builder, or code snippet and adjust its position until it sits where you want it.
Search bars in WooCommerce stores are placed in the header area. The header is the consistent top section of every page, making search accessible no matter where a customer is on your site.
If you previously removed a default theme search bar, add the [elex_product_search] shortcode in that same location. This preserves your header layout while upgrading the search functionality.
The shortcode displays as plain text in the header
Make sure the location where you added the WooCommerce product search supports shortcode execution. Some theme Customizer fields and widget areas do not process shortcodes by default. If this happens, switch to a Shortcode block (block themes), a Text widget with shortcode support enabled, or use the do_shortcode() PHP approach.
The search form breaks the header layout on mobile
Adjust the Max Form Width and Mobile breakpoint settings in Elevated › Product Search › Settings › Basic Settings. If your theme collapses the header into a hamburger menu on mobile, the search form may need to be placed inside the mobile menu panel rather than the desktop header area.
The form appears but the search returns no results
Confirm your search index is built. Go to Elevated › Product Search › Settings and check the Indexer section. If needed, click Force Index Rebuild.
Changes do not appear on the frontend
Clear your site cache (from any caching plugin) and browser cache. Some page builders also require clearing the builder cache before frontend changes display.
