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
* @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!
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: 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 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: 6 Tips to Improve User Experience With the right approach to user experience you can make your WooCommerce website more effective at converting visitors into customers and encouraging existing users to come back to make purchases more regularly. There are several ways to enhance UX using WooCommerce as a foundation, so here are just a few of the most impactful options […]
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”
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? 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!
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 🙂