WooCommerce: Add a Product Search Bar in the Header/Footer

Hola amigos, today’s snippet actually comes from my own website. You might have noticed there is a little “magnifying glass” in the navigation menu which scrolls down to a search bar.

Mine, specifically, searches exclusively for blog posts (I excluded pages, products, etc.), but you can customize this and make it search for products only for example. Here’s how I did it – hopefully you can learn something new today!

Business Bloomer's custom search bar in the footer
Business Bloomer’s custom search bar in the footer

PHP Snippet: Add a custom search bar to your WooCommerce header/footer

/**
 * @snippet       WooCommerce Custom Search Bar
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 7
 * @community     https://businessbloomer.com/club/
 */
 
// ----------------------------------
// 1. ADD SEARCH TO STOREFRONT FOOTER
 
add_action( 'storefront_footer', 'bbloomer_add_search_to_footer' );
 
function bbloomer_add_search_to_footer() {
    get_search_form(); // FOR POSTS
    // get_product_search_form(); // FOR PRODUCTS
}
 
// ------------------------------
// 2. BONUS: ADD SEARCH ICON TO NAVIGATION MENU
// Change #colophon to your element ID (footer in my case)

add_filter( 'wp_nav_menu_additional-resources_items', 'bbloomer_new_nav_menu_items' );

function bbloomer_new_nav_menu_items($items) {
    $searchicon = '<li class="search"><a href="#colophon"><i class="fa fa-search" aria-hidden="true"></i></a></li>';
    $items = $items . $searchicon;
    return $items;
}

That’s it ๐Ÿ™‚ Now give my search box a go to see if it works!

Where to add custom code?

You should place custom PHP in functions.php and custom CSS in style.css of your child theme: where to place WooCommerce customization?

This code still works, unless you report otherwise. To exclude conflicts, temporarily switch to the Storefront theme, disable all plugins except WooCommerce, and test the snippet again: WooCommerce troubleshooting 101

Related content

  • WooCommerce: Search Products By SKU (Frontend)
    The frontend WooCommerce product search, for some reason, doesn’t work for SKU values. If it does, then your theme developers were smart enough to include this in their code, because this is a big problem especially for B2B stores. Today, we’ll study how to alter the product search query, as well as the wc_get_product_id_by_sku() function, […]
  • WooCommerce: Search Orders By SKU @ Admin
    Exactly. By default, when you search for orders in the WordPress > WooCommerce > Orders backend, using a SKU will give you 0 results. Which is pretty poor for a store manager. Let’s change this. Despite the code is a little complex, all you need is a simple copy & paste. Enjoy!
  • WooCommerce: Search Products By Custom Field (Backend)
    In WooCommerce, there are two kinds of search: the customer one (frontend) and the admin one (backend). We’ve already covered how to let customers search into custom field values on top of the default product title and description, so this time we’ll talk about the backend search. Let’s say, as a WooCommerce store admin, that […]
  • WooCommerce: How to Show Product Search Suggestions?
    “Ajax Search” (displaying product search suggestions while a WooCommerce user is typing something in the search bar), is a brilliant idea for all of you ecommerce entrepreneurs. Saving time to a potential customer is your number one goal. Besides, if your website has a lot of traffic, search should be one of your sales propositions […]
  • WooCommerce: Search By Custom Field (Frontend)
    The default WooCommerce frontend product search returns results based on whether the search term is present in the product title, short and long description. Also, you can optionally search products by SKU. But what if you also want to search for a custom field value e.g. you have a custom field called “_brand” and you […]

Rodolfo Melogli

Business Bloomer Founder

Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as an independent WooCommerce freelancer since 2011. His goal is to help entrepreneurs and developers overcome their WooCommerce nightmares. Rodolfo loves travelling, chasing tennis & soccer balls and, of course, wood fired oven pizza. Follow @rmelogli

39 thoughts on “WooCommerce: Add a Product Search Bar in the Header/Footer

  1. Hello, congratulations for these amazing articles, you really show interesting things for me.
    I come with a question, I don’t know if you will have time available to answer.
    I want to create a search engine for the products on my website, which is about food.
    Normally we enter in the search engine a word, label or ingredients that we want to find.
    In my case, when it comes to food, I want the user to find products in my store that do not contain the ingredients that they enter in the search engine.
    I hope you can understand my idea and if you have a few minutes to give me an idea of how I should create the search engine, I would be very grateful.
    Greetings and thanks for sharing with all your knowledge.

    1. Hello Miguel, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  2. i have used the code, but it’s not reflecting the search bar , not on header nor on footer . Thanks

    1. Hi Nipun, you’ll need to adapt the code to your custom theme I guess

  3. Hola, como puedo reemplazar la barra de busqueda de productos que sale en el header por un buscador de Yith ajax search y que sea mas larga, utilizo el tema Storefront.
    Gracias.

    1. Hello, how can I replace the product search bar that appears in the header with a Yith ajax search search engine and make it longer, I use the Storefront theme.
      Thank you.

      1. Hi Marc, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

        1. Ok, thank’s

  4. Hey Rodolfo ๐Ÿ™‚
    Thank you for your tips!
    I’d like to put the product search bar next to the sort-by box of WooCommerce’s store page. Is that also the header part? I use the childtheme called: ASTRA (free version, not the PRO)
    How should I modify the code you posted here in my case?
    Many thanks!
    Adam

    1. Hi Adam, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

      1. Well, I’ve modified the code to the ASTRA theme (free version), and it works.

        1. Great!

  5. Hi Rodolfo, I love your high quality snippets ! Great valuable stuff !
    Is there an option to turn this particular snippet into a shortcode that can be used anywhere on the site (page/post block, widget, …) ?

    1. Hey Casper, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  6. Hey Rodolfo. Do you need to add any HTML into the form in addition to the PHP to return the product search results? I’ve added the following code to my functions.php and am not getting a product search result:

    // LIMIT SEARCH TO PRODUCTS ONLY
    
    add_filter('pre_get_posts','SearchFilter', 9);
    
    function SearchFilter($query) {
    if ( !is_admin() && $query->is_search ) {
    $query->set('post_type', 'product'); 
    }
    return $query;
    }
    
    1. Hey Ryan, thanks for your comment! No, it should work out of the box, so I’m not sure. Can you try with a default theme and no other plugins but Woo?

  7. Obrigado, funciona — Thanks ! .. this bloomer Tip’s — Rocks !!

    1. Excellent ๐Ÿ™‚

    1. Thank you Prashant ๐Ÿ™‚

  8. Hello, what is the code to put the search engine in the header? I use woocommerce and the theme store Front Thank you for your help.

    1. Hey there, thanks for your comment! You just need to change “hook”. Look into the Storefront header.php if there is one you can use ๐Ÿ™‚

  9. Sorry for not to mention, I am using storefront version 2.2.7

    1. Milan, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. Thanks a lot for your understanding! ~R

  10. Hi Rodolfo,

    I want to customize the footer as on like in “businessbloomer” i.e. payment icons with copyright on the footer. I have tried all the way but failed so will you please help me with the codings to change it and which file exactly need to edit to make the changes. I required the payment icons on the left of the footer and the copyright text on the right of the footer as well with a white background.
    Your help will be a great help to me, I will be thankful to you.

  11. Thanks Rodolfo. Great contribution. It works perfectly ๐Ÿ™‚

    However, a query. I have updated Woocommerce 3.0.5 and when I use the search bar, when I show the results page, I see that the header h1, appears attached next to the header, leaving no space. That is, in the rest of the pages, a separation between header and h1 appears, which is where the woocommerce_breadcrumb is located. However, when I do a search using the search bar, woocommerce_breadcrumb does not appear, appearing contents very close to the header, without margin or padding.

    Has this happened to you? Do you know how it can be solved ?.

    A cordial greeting.
    Javier

    1. Javier, thanks for your comment! On this site my snippet works – try to do a search ๐Ÿ™‚ So there must be some problem with your theme or other plugins. Go to WP Dashboard > WooCommerce > System Status: what errors do you see in red font?

      Also, take a look at this tutorial to see how to troubleshoot: https://businessbloomer.com/woocommerce-troubleshooting-mistakes-to-avoid/

      Hope this helps!

      R

  12. Is there any option we can give like a search by area or city according the products will shows Is there plugin ..?

    1. Hey Mounish! I guess if you assign cities to each product as WooCommerce Tags or Categories, the search should return those as well ๐Ÿ™‚

  13. didnt work for me…can u help out…i psated the code in my fucntions.php….how to i find the hook for my theme…m using a theme by woothemes.

    1. Hey Neo, as I already said, I can’t help unfortunately ๐Ÿ™‚

  14. i am using ‘for the cause theme’ by woothemes…i tried adding the code above in my functions.php but no search from showed by.
    can u help me out?

    1. Hey Neo, thanks for your comment! Unfortunately I can’t help as this is custom work ๐Ÿ™‚ Thanks for your understanding!

  15. thanks! rodolfo
    this isnt work for me , but my woocommerce version 2.5.5 and my theme default wordpress theme 2016 that compatabe with woocommerce.
    apologize my english not good

    1. Hello Rahim, thanks for your comment! Don’t worry about your English, it’s prefect ๐Ÿ™‚

      My snippet works for Storefront theme. For 2016 theme you’ll need to research the name of the “hook” that they provide in the footer.php file. For Storefront is:

      do_action('storefront_footer');
      

      But for 2016 the name is different. Once you find the right one the search bar will appear ๐Ÿ™‚

      1. your answer great …. thanks

  16. thanks Rodolfo
    that is amazing!
    i just translate this post and publish it with your name and your website URL in my blog

    1. Nice Reza, thank you so much! Have a nice day ๐Ÿ™‚

Questions? Feedback? Customization? Leave your comment now!
_____

If you are writing code, please wrap it like so: [php]code_here[/php]. Failure to complying with this, as well as going off topic or not using the English language will result in comment disapproval. You should expect a reply in about 2 weeks - this is a popular blog but I need to get paid work done first. Please consider joining the Business Bloomer Club to get quick WooCommerce support. Thank you!

Your email address will not be published. Required fields are marked *