Customize Sticky Header

This topic has 7 replies, 3 voices, and was last updated 1 year, 9 months ago by Artem Temos.

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
September 20, 2018 at 1:53 am #78050

tajji
Participant

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.

September 20, 2018 at 6:19 am #78077
Artem Temos
Keymaster
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
September 20, 2018 at 6:33 pm #78261

tajji
Participant

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!

September 21, 2018 at 6:18 am #78315

Artem Temos
Keymaster

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

May 23, 2022 at 8:21 pm #378174

discopegre
Participant

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?

May 24, 2022 at 9:52 am #378286
Artem Temos
Keymaster
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
February 16, 2023 at 8:53 pm #443712

Dylan
Participant

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

February 17, 2023 at 10:05 am #443813

Artem Temos
Keymaster

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