How to Add a WooCommerce Search Bar to Your Site Menu

The search bar is one of the most used elements on any online store. Visit Amazon, eBay, Etsy or almost any large ecommerce site and you will find a search box sitting right in the header, next to the navigation menu, available on every single page. That placement is no accident: shoppers who use search are looking for a specific product and are far more likely to buy, so making the search bar easy to reach directly affects your conversions. For more on this, see why search matters for your WooCommerce shop.

By default, WooCommerce and most themes do not place a product search box inside the navigation menu. In this guide we cover three ways to add a WooCommerce search bar to your site menu, from a no-code plugin option to a custom code solution, so you can pick the approach that fits your store and your theme.

Option 1: Use Advanced Woo Search plugin

Advanced Woo Search is a popular WooCommerce search plugin that adds a fast, live AJAX search bar to your store, showing matching products as the customer types.

Starting with version 3.64, the plugin can add its search form to a navigation menu directly from the WordPress admin, with no code required.

To add the search bar to your menu:

1. Install and activate the Advanced Woo Search plugin (version 3.64 or later).

2. Go to Appearance → Menus in your WordPress dashboard.

3. In the list of available menu items on the left, find the Advanced Woo Search block and select the search form you want to display.

   

4. Click Add to Menu, then drag the new item to the position you want and click Save Menu.

   

Note: if you are using Advanced Woo Search PRO - additionally you can open menu item settings and choose a search form ID to show in this specific menu since the PRO plugin version allows you to create different search form instances.

Because this works through the standard WordPress menu system, you can add the search bar to whichever menus your theme supports, such as the top header menu, a secondary menu, a footer menu, or a dedicated mobile menu. The available locations depend entirely on your current theme and the menu areas it registers.

For the full walkthrough and screenshots, see the official guide on adding a search form to the navigation menu.

Option 2: Use built-in widgets

Many themes expose widget areas where you can drop a search box, and some themes register a widget area inside or near the navigation menu (often called a header or navigation widget area). Whether this option is available to you depends entirely on your current theme and which widget areas it supports. If your theme has a widget area in the header next to the menu, you can place a search widget there.

To add the built-in WooCommerce product search widget:

1. Go to Appearance → Widgets (or Appearance → Customize → Widgets).

2. Choose the widget area registered by your theme that sits in the header or navigation area.

   

3. Add the Product Search widget (the WooCommerce search block) to that area.

   

4. Save your changes and check the front end to confirm the search bar appears where you want it.

As an additional option, Advanced Woo Search ships with its own search widget, so you can place the AJAX-powered search form into any widget area the same way. This gives you live results instead of the default WooCommerce search.

For a step-by-step setup, see our guide on adding a custom WooCommerce search widget.

Option 3: Use custom code solution

If your theme does not include a search form in its menu and has no suitable widget area, you can inject one with a small code snippet. This option is aimed at more advanced users who are comfortable making some code changes. With this approach you can output either the default WooCommerce search form or the Advanced Woo Search form.

Let's look at a search snippet that adds a search bar as the last item for the main_navigation menu location.

add_filter( 'wp_nav_menu_items', 'my_wp_nav_menu', 10, 2 );

function my_wp_nav_menu( $items, $args ) {
    if ( isset( $args->theme_location ) && 'main_navigation' === $args->theme_location && function_exists( 'get_product_search_form' ) ) {
        $items .= '<li class="menu-item menu-item-search">' . get_product_search_form( false ) . '</li>';
    }

    return $items;
}

Change 'main_navigation' to match your theme's menu location identifier. To target every menu, remove the theme_location condition.

If you are using the Advanced Woo Search plugin - you can use the following code to programmatically add the plugin search bar inside a menu item.

add_filter( 'wp_nav_menu', 'my_wp_nav_menu', 10, 2 );
function my_wp_nav_menu( $nav_menu, $args ) {
    if ( $args->theme_location === 'main_navigation' ) {
        $aws_form = aws_get_search_form( false );
        $nav_menu = str_replace( '</ul>', '<li class="menu-item">' . $aws_form . '</li></ul>', $nav_menu );
    }
    return $nav_menu;
}

FAQs

Conclusion

Putting a search bar in your site menu helps shoppers find products from any page, just like they expect in a modern online store.

The easiest option is to use Advanced Woo Search, which lets you add a search bar as a menu item without writing any code.

If your theme includes a header widget area, the default WooCommerce search widget may be enough. And if you want more control, you can use a small code snippet to place the search form exactly where you need it. Choose the method that fits your theme and experience level, and make product search faster and easier for your customers.