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
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
* @donate $9 https://businessbloomer.com/bloomer-armada/
*/
// ----------------------------------
// 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!
You can place PHP snippets at the bottom of your child theme functions.php file (delete "?>" if you have it there). CSS, on the other hand, goes in your child theme style.css file. Make sure you know what you are doing when editing such files - if you need more guidance, please take a look at my free video tutorial "Where to Place WooCommerce Customization?"
Does this snippet (still) work?
Please let me know in the comments if everything worked as expected. I would be happy to revise the snippet if you report otherwise (please provide screenshots). I have tested this code with Storefront theme, the WooCommerce version listed above and a WordPress-friendly hosting on PHP 7.3.
If you think this code saved you time & money, feel free to join 14,000+ WooCommerce Weekly subscribers for blog post updates or 250+ Business Bloomer supporters for 365 days of WooCommerce benefits. Thank you in advance :)
Need Help with WooCommerce?
Check out these free video tutorials. You can learn how to customize WooCommerce without unnecessary plugins, how to properly configure the WooCommerce plugin settings and even how to master WooCommerce troubleshooting in case of a bug!
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.
39 thoughts on “WooCommerce: Add a Product Search Bar in the Header/Footer”
Miguel
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.
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!
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.
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.
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!
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
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!
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, …) ?
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!
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;
}
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
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.
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 ?.
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?
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
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 🙂
Questions? Feedback? Support? Leave your Comment Now! _____
If you are writing code, please wrap it between shortcodes: [php]code_here[/php]. Failure to complying with this (as well as going off topic, not writing in English, etc.) will result in comment deletion. 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 BloomerArmada to get blog comment reply priority, ask me 1-to-1 WooCommerce questions and enjoy many more perks. Thank you :)
With 100,000 (and growing) monthly organic sessions, Business Bloomer is the most consistent, most active and most complete WooCommerce development/customization blog.
Of course this website itself uses the WooCommerce plugin, the Storefront theme and runs on a WooCommerce-friendly hosting.
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.
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!
i have used the code, but it’s not reflecting the search bar , not on header nor on footer . Thanks
Hi Nipun, you’ll need to adapt the code to your custom theme I guess
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.
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.
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!
Ok, thank’s
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
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!
Well, I’ve modified the code to the ASTRA theme (free version), and it works.
Great!
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, …) ?
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!
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; }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?
Obrigado, funciona — Thanks ! .. this bloomer Tip’s — Rocks !!
Excellent 🙂
grate article
Thank you Prashant 🙂
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.
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 🙂
Sorry for not to mention, I am using storefront version 2.2.7
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
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.
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
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
Is there any option we can give like a search by area or city according the products will shows Is there plugin ..?
Hey Mounish! I guess if you assign cities to each product as WooCommerce Tags or Categories, the search should return those as well 🙂
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.
Hey Neo, as I already said, I can’t help unfortunately 🙂
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?
Hey Neo, thanks for your comment! Unfortunately I can’t help as this is custom work 🙂 Thanks for your understanding!
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
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 🙂
your answer great …. thanks
🙂
thanks Rodolfo
that is amazing!
i just translate this post and publish it with your name and your website URL in my blog
Nice Reza, thank you so much! Have a nice day 🙂