Customize Storefront theme header

To remove the search box, you can use this code:

remove_action('storefront_header', 'storefront_product_search', 40);


It’d be better to follow this https://github.com/woocommerce/theme-customisations

For the social links and “My account”, I think you should follow this https://docs.woocommerce.com/document/create-a-social-icon-menu/

Or you still want to stick with “before” and “after” your logo. You can use this code:
https://gist.github.com/htdat/6d8d7201430890699d6a19ee2ea6af8a (you should use this one)


add_action( 'storefront_header', 'htdat_above_logo', 15 );
function htdat_above_logo() { ?>
<div style="clear: both; text-align: left;">
<span style="margin: 0 0.5em;">Facebook!</span>
<span style="margin: 0 0.5em;">Twitter!</span>
</div>
<?php
}
add_action( 'storefront_header', 'htdat_below_logo', 41 );
function htdat_below_logo() { ?>
<div style="clear: both; text-align: left;">
<span style="margin: 0 0.5em;">My account</span>
<span style="margin: 0 0.5em;">Register!</span>
</div>
<?php
}


This code is based on https://docs.woocommerce.com/document/add-static-content-to-the-storefront-header/

• This reply was modified 7 years, 12 months ago by Dat Hoang.
• This reply was modified 7 years, 12 months ago by Dat Hoang. Reason: well, too bad to handle the code

Hi Dat,

Apology for late reply. Also, thank you very much for taking care of this topic. I remove Search Bar via Theme Customization plugin. Now, I am bit confused where should I put the code you provided. I understand, add_action functions should be placed into storefront-template-hooks.php file. But where do I put the htdat_above_logo() and htdat_below_logo() functions. Can you please explain?

Thanks again.
Prasun

Both of my code should be added into the Theme Customization plugin.
Don’t edit the theme files, you may lose your edit after updating the theme.

Hi Dat,

Thanks for your code. It’s working fine. Only problem is that alignment is not working properly. I added Register My Account as Secondary Menu and it appears same line as of Logo. But the social Icons are placed above logo. Looks bit odd
https://yeauxbaby.com/

Is it possible to declare 3rd menu named social menu and placed it in the sameline as logo?

Regards
Prasun

If so… you should follow this https://docs.woocommerce.com/document/create-a-social-icon-menu/

You don’t need to use my code at all ??

Nope. I assigned My Account | Register Menu in the secondary menu position. I want Social Menus should be before the logo and in same line as logo and secondary menu. Your code worked fantastic. Only thing I need to place the social icons in the same line as Logo and Secondary menu and the logo to be Centre of the page.

Well. You achieved it somehow ??

View post on imgur.com

?? Yes. Need to edit CSS.

.site-header .site-branding { clear: none;}

Thanks for your great help with adding the Social Menu.

Hi ! i am trying 2017 free theme, when i go to appearance- header-image-edit and try to paste new image, it does not upload, the comment is “is it writable on your server”
i am total beginner, can you help ?

Odd, this isn’t working for me. It’s as if it comes before the functions of the main theme. So if I try to remove and element then add it with a different priority (see below), I end up with two of them. Any ideas?

remove_action( 'storefront_header', 'storefront_product_search', 40 );
add_action( 'storefront_header', 'storefront_product_search', 10 );

Note: Have tried adding this using a child theme, and using the theme customisation module, it does the same. If I add the code to the bottom of the main storefront functions file it works.

Hi all,
@prasun1519 I am trying to add some text after logo . I see you have made this perfectly. Can you please share a code how can I make it on my site.
Nevermind
I have used https://docs.woocommerce.com/document/create-a-social-icon-menu/#prettyPhoto ??

• This reply was modified 7 years, 3 months ago by adminim.

Please let me see your site url

Hello,

I ask your help to reproduce the format of the header of my site with storefront like this website https://www.easycash.fr by adding three buttons just at the bottom of the form search:

Thank you in advance.