Place Product Search box on header 1

[mariospavlou]

Hello ,

I am trying to put product search box on header but I can’t place it where I want.
I have added the the_widget( ‘WC_Widget_Product_Search’ ); into the sf-header.php but I am getting the search box at top of everything. see attachment 1 but I want to place it like the attachment 2.

Can you help me with that please ?

Thanks
Marios

[Kyle – SUPPORT]

Hi

It’s possible because you have at least got it into the header, but you need to have knowledge of html/css so that position it where you want it.

Unfortunately as it’s not part of the current theme functionality, we can not support you with that. You will need to add extra divs and css to position it there, and it is beyond the customisations that we can support.

– Kyle

[mariospavlou]

Hi kyle,

I have the knowledge of html/css but because the swift framework is custom I can’t do much without any guidelines.

The only thing I need is to tell me how I can place this

<div class="widget woocommerce widget_product_search"><form role="search" method="get" id="searchform" action="http://incarunlimited.com/">
			<div>
				<label class="screen-reader-text" for="s">Search for:</label>
				<input type="text" value="" name="s" id="s" placeholder="Search for products">
				<input type="submit" id="searchsubmit" value="Search">
				<input type="hidden" name="post_type" value="product">
			</div>
		</form></div>

inside header-left span4

 
<div class="header-left span4"><nav class="header-menu">
<ul class="menu">
<li class="tb-welcome">Welcome mariospavlou</li>
<li class="hs-woo-custom clearfix"><a class="swift-search-link" href="#"><i class="fa-search-plus"></i><span>VEHICLE AND BRAND FILTER</span></a></li>
</ul>
</nav>
<div class="widget woocommerce widget_product_search"><form role="search" method="get" id="searchform" action="http://incarunlimited.com/">
			<div>
				<label class="screen-reader-text" for="s">Search for:</label>
				<input type="text" value="" name="s" id="s" placeholder="Search for products">
				<input type="submit" id="searchsubmit" value="Search">
				<input type="hidden" name="post_type" value="product">
			</div>
		</form></div></div>

[Kyle – SUPPORT]

You need to open up sf-header.php and find this:

if ($header_layout == "header-1") {
		
		$header_output .= '<header id="header" class="clearfix">'. "\n";
		$header_output .= '<div class="container">'. "\n";
		$header_output .= '<div class="row">'. "\n";
		$header_output .= '<div class="header-left span4">'.sf_woo_links('header-menu', 'logo-left').'</div>'. "\n";
		$header_output .= sf_logo('span4 logo-center');
		$header_output .= '<div class="header-right span4">'.sf_aux_links('header-menu', TRUE).'</div>'. "\n";
		$header_output .= '</div> <!-- CLOSE .row -->'. "\n";
		$header_output .= '</div> <!-- CLOSE .container -->'. "\n";
		$header_output .= '</header>'. "\n";
		$header_output .= sf_mobile_search();
		$header_output .= '<div id="main-nav">'. "\n";
		$header_output .= sf_main_menu('main-navigation', 'full');
		$header_output .= '</div>'. "\n";

– Kyle

[mariospavlou]

I found that one and I have place the search box as below but the search box is not placed at the header as expected.
Do I need to edit anything else ?

if ($header_layout == "header-1") {
		
		$header_output .= '<header id="header" class="clearfix">'. "\n";
		$header_output .= '<div class="container">'. "\n";
		$header_output .= '<div class="row">'. "\n";
		$header_output .= '<div class="header-left span4">'.sf_woo_links('header-menu', 'logo-left').'</div>'. "\n";
		$header_output .= sf_logo('span4 logo-center');
		$header_output .= '<div class="header-right span4">'.sf_aux_links('header-menu', TRUE).'</div>'. "\n";
		$header_output .=  the_widget( 'WC_Widget_Product_Search' );
		$header_output .= '</div> <!-- CLOSE .row -->'. "\n";	
		$header_output .= '</div> <!-- CLOSE .container -->'. "\n";
		$header_output .= '</header>'. "\n";
		$header_output .= sf_mobile_search();
		$header_output .= '<div id="main-nav">'. "\n";
		$header_output .= sf_main_menu('main-navigation', 'full');
		$header_output .= '</div>'. "\n";

[mariospavlou]

or did I placed
$header_output .= the_widget( 'WC_Widget_Product_Search' );
in the wrong place ?

[Kyle – SUPPORT]

Try this:

if ($header_layout == "header-1") {
		
		$header_output .= '<header id="header" class="clearfix">'. "\n";
		$header_output .= '<div class="container">'. "\n";
		$header_output .= '<div class="row">'. "\n";
		$header_output .= '<div class="header-left span4">'.sf_woo_links('header-menu', 'logo-left') "\n";
		$header_output .= the_widget( 'WC_Widget_Product_Search' );.'</div>'.
		$header_output .= sf_logo('span4 logo-center');
		$header_output .= '<div class="header-right span4">'.sf_aux_links('header-menu', TRUE).'</div>'. "\n";
		$header_output .= '</div> <!-- CLOSE .row -->'. "\n";
		$header_output .= '</div> <!-- CLOSE .container -->'. "\n";
		$header_output .= '</header>'. "\n";
		$header_output .= sf_mobile_search();
		$header_output .= '<div id="main-nav">'. "\n";
		$header_output .= sf_main_menu('main-navigation', 'full');
		$header_output .= '</div>'. "\n";

You may need to add extra divs to separate the search box from the links.

– Kyle

[mariospavlou]

I have try that one but it kills my site and I am getting a blank page.
Are you sure about that piece of code ?
` $header_output .= ‘<div class=”header-left span4″>’.sf_woo_links(‘header-menu’, ‘logo-left’) “\n”;
$header_output .= the_widget( ‘WC_Widget_Product_Search’ );.'</div>’.`

[Mohammad – SUPPORT]

Hi,
Please find this code

$header_output .= the_widget( 'WC_Widget_Product_Search' );.'</div>'

Replace with 
$header_output .= the_widget( 'WC_Widget_Product_Search' ).'</div>';

Hopefully it should work 100% .

With Best Regards
Swift Ideas

[mariospavlou]

It still killing my site and I am getting black page. Below is the full block of code

$header_output .= '<header id="header" class="clearfix">'. "\n";
		$header_output .= '<div class="container">'. "\n";
		$header_output .= '<div class="row">'. "\n";
		$header_output .= '<div class="header-left span4">'.sf_woo_links('header-menu', 'logo-left') "\n";
		 //$header_output .= '<div class="header-left span4">'.sf_woo_links('header-menu', 'logo-left');
        $header_output .= the_widget( 'WC_Widget_Product_Search' ).'</div>'.;
		$header_output .= sf_logo('span4 logo-center');
		$header_output .= '<div class="header-right span4">'.sf_aux_links('header-menu', TRUE).'</div>'. "\n";
		$header_output .= '</div> <!-- CLOSE .row -->'. "\n";	
		$header_output .= '</div> <!-- CLOSE .container -->'. "\n";
		$header_output .= '</header>'. "\n";
		$header_output .= sf_mobile_search();
		$header_output .= '<div id="main-nav">'. "\n";
		$header_output .= sf_main_menu('main-navigation', 'full');
		$header_output .= '</div>'. "\n";

[Mohammad – SUPPORT]

Hi,

Find this code 
$header_output .= the_widget( 'WC_Widget_Product_Search' ).'</div>'.;

Replace with
$header_output .= the_widget( 'WC_Widget_Product_Search' ).'</div>';

It will resolve the issue easily .

Thanks 🙂
With Best Regards
Swift Ideas

[mariospavlou]

Hi unfortunately the search box it’s still on top.

[Mohammad – SUPPORT]

Hi,
Please roll back all changes ,attach a marked screenshot and provide website so i can suggest you winning solution .

Thanks 🙂
With Best Regards
Swift Ideas

[mariospavlou]

This reply has been marked as private.

[mariospavlou]

This reply has been marked as private.