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