moving search products bar to header (main nav)

Hello,

It Requires editing Core files, at the time of editing corefiles make sure you are using a Child Theme. So that all your changes remain safe even after update.

[ Moderator note: link redacted, please do not send people to your site that way. ]

You need to go to Appearance > Editor > header.php and look for this code there:

<div data-originalstyle="<?php echo $menu_pos_class; ?>" class="menu-wrapper <?php echo $menu_pos_class; ?>">
	<?php fruitful_get_languages_list(); ?>
	<?php fruitful_get_cart_button_html(); ?>
	
        <nav role="navigation" class="site-navigation main-navigation">
		<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
	</nav><!-- .site-navigation .main-navigation -->
</div>

Put the below code right after this code:

	<form method="get" id="searchform" action="<?php echo esc_url( home_url() ); ?>" role="search">
		<label for="s" class="assistive-text"><?php _e( 'Search', 'fruitful' ); ?></label>
		<input type="text" class="field" name="s" value="<?php echo esc_attr( get_search_query() ); ?>" id="s" placeholder="<?php esc_attr_e( 'Type Here to Search', 'fruitful' ); ?>" />
		<input type="submit" class="submit" name="submit" id="searchsubmit" value="<?php esc_attr_e( 'Search', 'fruitful' ); ?>" />
	</form>

Then you need to add this CSS in your Custom CSS for better result:

.container header .menu-wrapper {
    float: left !important;
}
#masthead > form {
    float: right;
    margin: 15px 15px 0 0;
}
@media screen and (max-width: 750px){
#mobile-menu-1 {
    margin-left: 42% !important;
}}
@media screen and (max-width: 463px){
#mobile-menu-1 {
    margin-left: 30% !important;
}}

Hope that helps.

Thank you.

• This reply was modified 8 years, 4 months ago by Sam.
• This reply was modified 8 years, 4 months ago by Jan Dembowski.

thank you sam. but unfortunately it does not work.
this is the link of my website:
https://www.pouyashop.com

I want the “search product” bar (which is now above product categories and under slider) to be next to cart icon in the main menu on the header.

the codes that you wrote added another search bar above the search bar that already is on the website.

Thank you for your help again

Hello,

You need to add the Product Search form code:
<?php get_product_search_form(); ?>
Above this code in your header.php:
<nav role="navigation" class="site-navigation main-navigation">
And add this CSS in your Custom CSS:

#masthead .woocommerce-product-search {
    display: inline-block;
    margin-top: 10px;
    width: 27%;
}
#masthead .woocommerce-product-search .search-field {
    width: 75%;
}
@media screen and (max-width: 750px){
#masthead #mobile-menu-1 {
    margin-left: 10% !important;
}
#masthead .woocommerce-product-search {
    width: 41%;
}
#masthead .cart-button {
    margin-left: 25%;
}}
@media screen and (max-width: 463px){
#masthead #mobile-menu-1 {
    margin-left: 5% !important;
}
#masthead .woocommerce-product-search .search-field {
    width: 55%;
}
#masthead .woocommerce-product-search {
    width: 37%;
}
#masthead .cart-button {
    margin-left: 20%;
}}
.widget-area .woocommerce.widget_product_search {
    display: none;
}

Hope that helps.

Thank you.

Dear Sam,

Thank you very much. it’s really good now.you can see the result in the link that I provided in the previous post.
Just one more thing. I want the product search bar to be next to cart icon. I mean almost in the middle of the header (it’s now in the right side of the header)
I would really appreciate if you help me do this one more thing.

Thanks

Hello,

You need to add this CSS also for adjusting that:

.cart-button {
    display: block;
    margin-right: 30px;
}
form {
    float: left !important;
}
.site-navigation {
    float: right;
}

Hope that helps.

Thank you.

Dear Sam,
Thank you again. its very kind of you. It’s So much better now but I really need the “product search bar” to be on the left side of “cart button”. its now on the right side of the cart button. I’m really sorry for so much bothering you. and it would have been perfect if the product search bar could be a bit longer.

I really thank you and sorry for so so much trouble making for you

Hello mehdib84,

It’s totally okay with your questions.

You have added your product search bar code:

<?php get_product_search_form(); ?>

Below this code:

<?php fruitful_get_cart_button_html(); ?>

in the header.php, you need to move your product search bar code:

<?php get_product_search_form(); ?>

above this code:

<?php fruitful_get_cart_button_html(); ?>

Hope that helps.

Please let us know if you need any other help.

• This reply was modified 8 years, 4 months ago by Sam.
• This reply was modified 8 years, 4 months ago by Sam.

thank you sam.
but it’s not what I meant. now the search bar is above cart button, while I need it in the left side of it.
this is what happened when I made the changes that you said

please help me solve this
thank you again

• This reply was modified 8 years, 4 months ago by mehdib84.
• This reply was modified 8 years, 4 months ago by mehdib84.
• This reply was modified 8 years, 4 months ago by mehdib84.

Hello,

You need to made the above changes then add this CSS in your Custom CSS:

.woocommerce-product-search {
    float: left;
}
.cart-button {
    clear: none;
}

Hope that helps.

Thank you.

thank you sam. it was a great help. thank you so much

It is a pleasure helping you. ??

Let me know if you need any other help in future.