Replace product search in header with site search.

Hey Guys,

This issues seems to have fixed itself. The site box is now displaying as it should. Looks just like the product search box.

When we tested it on a phone we noticed the search box was hidden behind the bar at the bottom of the screen that calls it. If you tap on the search button the search box appears but only a small part of the top of it can be seen.

As a matter of fact I just shrunk down chrome and is is doing the same thing. I am not sure this has anything to do with the script for switching out the search boxes.

• This reply was modified 5 years ago by Jim.

Try this CSS

.storefront-handheld-footer-bar ul li.search .site-search {
    margin-bottom: 40px;
}

Looks ok on Chrome, not sure how it’ll look on a mobile device though.

Hey Jarret,

Thanks. Yes that pulls it above the bottom bar but there is a small white bar that stretched across the bottom of the screen that makes it look a little off. It is right on the top of the search box.

Thanks for that css. We are starting to look it over now but it will take awhile to learn it on this theme.

When testing this on the demo the search box comes up in a solid bar.

Ok, We have remedied our catching issues by now doing our css testing in the customizer. The CSS code is not causing the issue with the bar it is the PHP.

//Remove the current Storefront Search
add_action( 'init', 'marce_remove_storefront_header_search' );
function marce_remove_storefront_header_search() {
	remove_action( 'storefront_header', 'storefront_product_search', 	40 );
}

// Add a default WordPress Search
add_action( 'storefront_header', 'marce_add_regular_wp_search', 40 );
function marce_add_regular_wp_search() {
	$searchform = get_search_form( false );
	echo 	"<div class='site-search'>" . $searchform .  "</div>";
}

• This reply was modified 5 years ago by Jim.
• This reply was modified 5 years ago by Jim.
• This reply was modified 5 years ago by Jim.

If you want the search box on smaller screens to show up in a solid bar replace the code I gave you with this

.storefront-handheld-footer-bar ul li.search .site-search {
    margin-bottom: 0px;
    padding-bottom: 60px;
}

Regarding the ?nocache thing, if you want to force the cache to clear, you’ll need to modify that text to something different. Your browser will eventually start caching that particular text as well most likely. So you can do something like ?nocachea/?nocacheb/?nocachec etc etc

We have shut down all of the code for now. We would be more than happy to continue testing if someone has an idea about the underlying cause of the issue. ( Why is switching the search boxes causing the issue on the hand held version? )

Unfortunately, Our Caching issues persist. But, I was able to check this on a different browser ( fire fox ) and it is working properly with the code removed.

Chrome is still only showing a small portion of the search bar.

@jarretc Thanks allot for your help.

I suspect other people are interested in doing this so hopefully they can get something out of this thread and the CCS code you provided.

Thanks again.

• This reply was modified 5 years ago by Jim.
• This reply was modified 5 years ago by Jim.

For someone with a much better grasp of this than we have. I think this might be a very simple issue, but I do not know how to resolve it.

There is a glaring difference between the product search box and the site search box. The product search box only has the box, it does not have the search button.

Also, when you go down to the hand held size the search button is removed from the site search box.

I suspect removing that button from the site search box, and then swapping them out would work seamlessly.

• This reply was modified 5 years ago by Jim.

Hi @smokingblends

I’m not seeing the site search on your site at all right now, did you remove it altogether? I’ll be happy to take a look. ??

Hey Mark,

@senff Yes we did remove the site search box. It is glitching because the product search box does not have a search button. When you swap it out with the site search box that does, it causes problems.

Do you know of a way to remove the search button from the site search box?

This is strange. I just installed the site search box in the left footer row so you could see the search button and it is not there.

When it is swapped out with the product search it is.

I will turn the code back on. The site search should not be swapped out with the product search in the header.

• This reply was modified 5 years ago by Jim.

Sorry Mark,

The code has been turned back on and the site search box is swapped out with the product search in the header.

When you shrink down the browser to a hand held size and click on the search Icon that appears in the bar at the bottom of the page, the search box will not rise above the bar. Only a small part of it is now visible.

• This reply was modified 5 years ago by Jim.
• This reply was modified 5 years ago by Jim.

Do you know of a way to remove the search button from the site search box?

To remove the “Search” button from all (site) search forms, you can use this CSS code:

.search-form .search-submit {
  display: none;
}

When you shrink down the browser to a hand held size and click on the search Icon that appears in the bar at the bottom of the page, the search box will not rise above the bar. Only a small part of it is now visible.

It looks like some custom CSS is overriding the standard style for Storefront, that’s causing this:

.site-search form {
    position: absolute;
}

You can either remove that from your code, or override this by adding the following code:

.storefront-handheld-footer-bar .site-search form {
  position: initial;
}

• This reply was modified 5 years ago by Senff.

I owe you and @jarretc an apology. We gave some incorrect information here resulting from our testing being skewed by the caching issues.

I tested the code below and found that it did not result in the glitch. However, that is because of the caching issues. I thought I retested it and got the same result.

This code goes with the PHP to swap out the boxes. It seems to move the search button from the bottom of the search field to the side of it.

After testing it again today, we found it is causing the glitch at the bottom of the screen.

.site-search form {
position: absolute;
}

GUYS, ARE YOU SEEING THE PRODUCT SEARCH AT THE BOTTOM LIKE WE ARE? We have tested it on several browsers. The site search is in the header but product search is in the bar when you go the hand held?

Just checked it in proxy.

• This reply was modified 5 years ago by Jim.
• This reply was modified 5 years ago by Jim.
• This reply was modified 5 years ago by Jim.
• This reply was modified 5 years ago by Jim.

Here is a screenshot of how the search form looks on my end on mobile, which seems to be correct:

https://cld.wthms.co/QhVct5

Hey Mark,

Yes when the CSS code is removed and the code to remove the button is added, the glitch at the bottom of the screen is fixed.

Unfortunately, The search box is product search and not site search.

The PHP code is only swapping the boxes in the header. Considering how may people are surfing the web on handheld it is essentially worthless.

Do you have any idea how to modify this code so it will swap out the search boxes on all screen sizes?

//Remove the current Storefront Search
add_action( 'init', 'marce_remove_storefront_header_search' );
function marce_remove_storefront_header_search() {
	remove_action( 'storefront_header', 'storefront_product_search', 	40 );
}

// Add a default WordPress Search
add_action( 'storefront_header', 'marce_add_regular_wp_search', 40 );
function marce_add_regular_wp_search() {
	$searchform = get_search_form( false );
	echo 	"<div class='site-search'>" . $searchform .  "</div>";

Thanks for your help.

• This reply was modified 5 years ago by Jim.
• This reply was modified 5 years ago by Jim.

Hi @smokingblends,

There could be potential here on mobile to remove the handheld menu that is fixed across the bottom of the screen. Then with some CSS you could show the desktop search box that is using the correct search form.

I see how the product search is added to said handheld menu, but there’s not a super easy way to simply remove it. At the moment there is an action that will remove the handheld footer bar in its entirety though.

Hi @smokingblends,

Actually to follow up again, there could be a second route here to remove the search link and add in our own custom link. As these docs outline. –> https://docs.woocommerce.com/document/customize-the-links-in-the-handheld-footer-bar/