WooCommerce: Add a Custom 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        Watch tutorial @ https://businessbloomer.com/?p=19055
 * @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!

Where to add this snippet?

You can place PHP snippets at the bottom of your child theme functions.php file (before "?>" if you have it). 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+.

If you think this code saved you time & money, please join other Business Bloomer supporters and avail of 365 days of WooCommerce benefits. Thank you in advance :)

Need Help with WooCommerce Customization?

Check out these free video tutorials!

  • how-to-edit-woocommerce-with-php-snippets
  • woocommerce-hooks-add_action-list-visual
  • woocommerce-customize-single-product-page-PHP

Rodolfo Melogli

Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as a 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.

29 thoughts on “WooCommerce: Add a Custom Search Bar in the Header/Footer

  1. 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!

  2. 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?

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

    1. Excellent 🙂

    1. Thank you Prashant 🙂

  4. 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 🙂

  5. 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

  6. 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.

  7. 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

  8. 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 🙂

  9. 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 🙂

  10. 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!

  11. 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

  12. […] هستند. این آموزش ترجمه ی مطلبی با همین عنوان در وبسایت businessbloomer می باشد. در قطعه کد زیر به منظور سرعت بیشتر در پیدا […]

  13. 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? Support? Leave your Comment Now!
_____

If you are writing code, please wrap it between: [php]code_here[/php]. Failure to complying with this (as well as going off topic) will result in comment deletion. You should expect a reply in about a week - this is a popular blog but I need to get paid work done first. Please consider joining #BloomerArmada to ask me 1-to-1 WooCommerce questions. Thank you :)

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.