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 footerBusiness 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
 * @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!

Share:

Leave a Reply