Woocommerece Product Search Bar

[jfarr]

How can I put a Woocommerce Product Search Bar in my primary navigation?

I currently have these hooks to add a general search bar in my navigation.

// Add search bar
add_filter( 'wp_nav_menu_items', 'genesis_search_primary_nav_menu', 10, 2 );
function genesis_search_primary_nav_menu( $menu, stdClass $args ){
        
       
        if ( 'primary' != $args->theme_location )
        	return $menu;
        
               if( genesis_get_option( 'nav_extras' ) )
                return $menu;
        
        $menu .= sprintf( '<li class="custom-search">%s</li>', __( genesis_search_form( $echo ) ) );
        return $menu;
}

// Customize search bar text
add_filter( 'genesis_search_text', 'sp_search_text' );
function sp_search_text( $text ) {
	return esc_attr( 'Search...' );
}

// Customize search bar button
add_filter( 'genesis_search_button_text', 'sp_search_button_text' );
function sp_search_button_text( $text ) {
	return esc_attr( '' );
}

http://www.trade-tools.com/demo

[nickjco]

First we need to modify the search form and add the hidden input field:

<input type="hidden" name="post_type" value="product">

This will tell search that we are searching for a specific post type. Here is the function I created with the hidden input field.

function custom_products_search( $form, $search_text, $button_text, $label ) {

	$form  = sprintf( '<form method="get" class="search-form" action="%s" role="search">%s<input type="search" name="s" placeholder="%s" /><input type="submit" value="%s" /><input type="hidden" name="post_type" value="product"></form>', home_url( '/' ), $label, $search_text, esc_attr( $button_text ) );

	return $form;
}

and then I modified your function above to with the add_filter and remove_filter lines:

function genesis_search_primary_nav_menu( $menu, stdClass $args ){
        
       
        if ( 'primary' != $args->theme_location )
        	return $menu;
        
               if( genesis_get_option( 'nav_extras' ) )
                return $menu;

        add_filter( 'genesis_search_form', 'custom_products_search', 10, 4 );
        
        $menu .= sprintf( '<li class="custom-search">%s</li>', __( genesis_search_form( $echo ) ) );

        remove_filter( 'genesis_search_form', 'custom_products_search', 10 );
        
        return $menu;
}

I added the filter in this function so that it will only affect that form you are adding. Hope this helps!

[jfarr]

@nickjco thank you for your response! Where do I put <input type="hidden" name="post_type" value="product"> ? Do I have to put it in index.php? Is there any way I can put it in through my menu or by a hook? Also this will not affect my 404 search bar correct. Thank you again.

[Wooassist]

Hey @jfarr, the hidden input field is already added in the function custom_products_search. You'll just have to add this to your functions.php and replace your original function of genesis_search_primary_nav_menu with the function I posted above.

[moma0503]

This has helped me out tremendously. Thank you both.

[Author]

Posts