Customize Sticky Header

Hi,

How can I customize the sticky header to have some custom elements in it.
In the Header Builder, I can see a settings section for the sticky header, but nothing where I can specify which elements to include in it.

Help appreciated.

Hello,

Thank you so much for purchasing our theme and contacting our support center.

If you are using sticky header clone so it has a fixed structure of logo, menu, and icons. The only way to customize it is to place the following code to the functions.php in the child theme and edit the code

add_filter( 'woodmart_header_clone_template', function( $template ) {
    $template = '
        <div class="whb-sticky-header whb-clone whb-main-header">
            <div class="<%cloneClass%>">
                <div class="container">
                    <div class="whb-flex-row whb-general-header-inner">
                        <div class="whb-column whb-col-left whb-visible-lg">
                            <%.site-logo%>
                        </div>
                        <div class="whb-column whb-col-center whb-visible-lg">
                            <%.main-nav%>
                        </div>
                        <div class="whb-column whb-col-right whb-visible-lg">
                            <%.woodmart-header-links%>
                            <%.search-button%>
                            <%.whb-wishlist-icon%>
                            <%.woodmart-shopping-cart%>
                            <%.full-screen-burger-icon%>
                        </div>
                        <%.whb-mobile-left%>
                        <%.whb-mobile-center%>
                        <%.whb-mobile-right%>
                    </div>
                </div>
            </div>
        </div>
    ';

    return $template;
} );

Kind Regards
XTemos Studio

Thanks a lot for the reply!

Some follow up questions:

1. If I want a specific item in the sticky header, like a phone number with an icon, how can I add that.
For example, I can see that you have shown a <%.search-button%> within the <div class=”whb-column whb-col-right whb-visible-lg”>.
How can I add a phone number in this div?

2. The elements you have shown look like some kind of shortcodes. Is there a way I can find out what exactly the shortcode refers to?
For example, how do I know which element <%.search-button%> refers to?

3. Is there a way to assign my own shortcodes to custom components?

If I can know #2 and #3, then I believe I will also be able to answer #1 above.

Thanks a lot for your help!

1. Replace search-button with a class name of the element from the header you want to show in the sticky header.

2. It refers to the element with CSS class search-button.

3. First answer should help you.

Regards

Hi! i’ve tried edit function.php with the code above, but now my stickheader it’s blank / shows nothing. I wanna edit to be like that: in the left the main menu, searchbar in the midle, and in the right the icons login/logout and cart icon, how can I do?

Hello,

Try to use the following code snippet

add_filter( 'woodmart_header_clone_template', function() {
	return '
    <div class="whb-sticky-header whb-clone whb-main-header <%wrapperClasses%>">
        <div class="<%cloneClass%>">
            <div class="container">
                <div class="whb-flex-row whb-general-header-inner">
                    <div class="whb-column whb-col-left whb-visible-lg">
                        <%.wd-header-main-nav%>
                    </div>
                    <div class="whb-column whb-col-center whb-visible-lg">
                         <%.wd-header-search:not(.wd-header-search-mobile)%>
                    </div>
                    <div class="whb-column whb-col-right whb-visible-lg">
                        <%.wd-header-my-account%>
						<%.wd-header-wishlist%>
                        <%.wd-header-compare%>
                        <%.wd-header-cart%>
                        <%.wd-header-fs-nav%>
                    </div>
                    <%.whb-mobile-left%>
                    <%.whb-mobile-center%>
                    <%.whb-mobile-right%>
                </div>
            </div>
        </div>
    </div>
';
} );

Kind Regards

The same problem, I can not find a way to customize the header of the home page after I import Prebuild website.

Tried the code above but still not work

Hello @Dylan,

Please, create a new topic and describe your problem in detail. Also, provide us with your admin access so we can check it on your website.

Kind Regards

[Author]

Posts