To remove the default WooCommerce search bar, identify where your theme displays it (header, widget area, or both), then remove it using your theme’s Site Editor, Widgets screen, Customizer, or a code snippet. After removal, place the [elex_product_search] shortcode where you want the Elevated Product Search form to appear.
Before removing anything, check where the search bar currently displays on your store. Common locations include:
Visit your site’s frontend and note each location where the search input appears. If your theme has multiple header styles or widget areas, check each one.
Block themes use the Site Editor instead of the Customizer or Widgets screen.
Go to Appearance › Editor.
Select Template Parts from the left navigation, then choose Header (or the template part containing your search bar).
Look for the Search block or the block containing the search form. Select it, then press Delete or click the three-dot menu and select Delete.
If the search is inside a Row, Group, or Navigation block, you may need to select the inner Search block specifically.
Click Save to apply the changes.
Classic themes typically place search in widget areas or theme header options.
Go to Appearance › Widgets.
Look for the widget area containing the search form (commonly named Header, Sidebar, Primary Sidebar, or Top Bar).
Find the Search widget or Product Search widget (the WooCommerce-specific search widget). Select the widget, open the three-dot menu, then click Delete.
Click Update to save the widget area.
Some classic themes manage widgets through the Customizer.
Go to Appearance › Customize › Widgets.
Select the widget area containing the search form. Click the Search or Product Search widget, open the three-dot menu, then click Delete.
Click Publish to save.
Some themes include a header search toggle in their own settings panel. Check Appearance › Customize › Header (or Appearance › Theme Options) for a setting to disable the header search bar. This varies by theme.
Some themes add the search bar programmatically using WordPress action hooks. You can remove it by adding a code snippet.
First, identify the hook your theme uses. Common header hooks include:
To remove the search function, you need to know both the hook name and the callback function name your theme uses. You can find this by looking at your theme’s functions.php file or by contacting your theme developer.
Add the removal code to your child theme’s functions.php file, or use a code snippet plugin like WPCodeBox:
remove_action( 'your_theme_header_hook', 'your_theme_search_function', priority_number );Replace your_theme_header_hook, your_theme_search_function, and priority_number with the actual values from your theme.
Save the snippet, toggle it to ON, and visit your site to confirm the search bar is gone.
If you cannot locate the theme option or hook responsible for the WooCommerce search bar, you can hide it using CSS. This is a fallback method.
Go to Appearance › Customize › Additional CSS.
Add CSS that targets your theme’s search container. The exact selector depends on your theme. Common examples:
/* Example for a theme with a header search class */
.wp-block-search {
display: none;
}
/* Example for WooCommerce Product Search widget */
.widget_product_search {
display: none;
}
Click Publish to save.
Note: Hiding elements with CSS removes them from view but does not stop them from loading in the page HTML. Use theme options or hooks for complete removal when possible.
Visit your site frontend and confirm that the default WooCommerce product search bar no longer appears.
Check these locations:
If you placed the [elex_product_search] shortcode in your header or a widget area, confirm it appears correctly and functions as expected. Type a product name to verify that live search results display.
Clear your site cache and browser cache if the old search bar still appears.
WooCommerce includes a basic Product Search widget that performs standard database queries. Most themes also add a generic search input to the header. Running both the default search and the Elevated Product Search search form on the same page creates redundancy and can confuse customers.
The WooCommerce Product Search widget is a standalone block/widget that ships with WooCommerce. It searches product titles, SKUs (in modern versions), and content, then redirects customers to a shop archive page. It does not support live AJAX results, fuzzy matching, or rich product previews.
Theme header search bars vary by theme. Some are generic WordPress search forms that search all post types, not just products. Others are WooCommerce-aware but still lack the speed and features of an indexed search solution.
Removing these default elements ensures customers only interact with your configured Elevated Product Search form. This provides consistent behavior across your store and prevents customers from accidentally using the slower native search path.
The search bar reappears after updating the theme
If you removed the search via theme file edits (not Site Editor or Widgets), a theme update may restore the original files. Use a child theme, the Customizer, or a code snippet plugin for persistent changes.
Cannot find the Search widget in Widgets
Some themes register custom widget areas with unique names. Check all widget areas on the Appearance › Widgets page. If the search is not in a widget, it is likely added via your theme’s header options or PHP code.
The CSS hide rule does not work
Your theme may use a different CSS class for the search container. Use your browser’s developer tools (right-click the search bar, select Inspect) to find the actual class or ID, then update your CSS selector accordingly.
Removing the hook breaks the site
If your remove_action code causes an error, you may have used the wrong function name or priority. Remove the snippet, restore access, and verify the callback function name in your theme’s source code before trying again.
[elex_product_search] shortcode to your site.
