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!
PHP Snippet: Add a custom search bar to your WooCommerce header/footer
/**
* @snippet WooCommerce Custom Search Bar
* @how-to Get CustomizeWoo.com FREE
* @sourcecode https://businessbloomer.com/?p=21175
* @author Rodolfo Melogli
* @compatible WooCommerce 3.5.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();
}
// ----------------------------------
// 2. LIMIT SEARCH TO POSTS OR PRODUCTS ONLY
function SearchFilter($query) {
if ( !is_admin() && $query->is_search ) {
$query->set('post_type', 'post'); // OR USE 'PRODUCT'
}
return $query;
}
add_filter( 'pre_get_posts', 'SearchFilter' );
// ----------------------------------
// 3. CHANGE PLACEHOLDER & BUTTON TEXT
function bbloomer_storefront_search_form_modify( $html ) {
return str_replace( array('Search …','Search'), array('WooCommerce Hooks, Storefront Theme, Google AdWords...','Search Article'), $html );
}
add_filter( 'get_search_form', 'bbloomer_storefront_search_form_modify' );
// ------------------------------
// 4. ADD SEARCH ICON TO NAVIGATION MENU
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;
}
add_filter( 'wp_nav_menu_additional-resources_items', 'bbloomer_new_nav_menu_items' );
That’s it 🙂 Now give my search box a go to see if it works!
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 🙂