Web/ Design/ Vista

Resources for Designers & Developer

Insert Custom Message Between Logo and Search Box – Storefront Theme Woocommerce

Recently i had to customize the header section of the Storefront theme for a client. The client wanted to show some message in between the LOGO/Title and the search box.

Turns out it was easier than i thought! Let me show you how.

By default the Storefront theme header has 2 main divisions on top.

<div class="site-branding"> and <div class="site-search">

We will insert a 3rd division in between these 2.

For this we will need to hook a custom function to the woocommerce action storefront_header. This custom function will output the required markup for the 3rd div.

add_action( 'storefront_header', 'vista_storefront_header_content', 40 );
function vista_storefront_header_content() { ?>
	<div class='custom-header-block'>
        <strong>Contact us today!</strong>
        <br> <em>Give us a call:</em> <strong>+91 99-0349-0874</strong>
	</div>
	<?php
}

Here vista_storefront_header_content is the custom function that is hooked onto storefront_header action. This function outputs a custom div with custom class custom-header-block.

This code goes to end of functions.php file of your theme

Next – we need to define custom-header-block somewhere. Let us define it in a custom css file say custom.css and add that css file to Storefront theme’s header.

Here is the content of custom.css file

@media (min-width: 768px) {
    .woocommerce-active .site-header .site-branding {
        width: 33.913043%;
    }

    .custom-header-block {
        width: 33.913043%;
        float: left;
        margin-right: 4.347826087%;
    }
}

@media (max-width: 668px) {

    .custom-header-block {
        width: 100%;
        clear: both;
        margin: 1em 0;
    }
}

As you can see i am using media queries to define width of the site-branding class as well as the custom-header-block for screen widths exceeding 768px – typical desktop screens. This is needed to position site-branding, custom-header-block and site-search all 3 top blocks horizontally, else the blocks may overlap and appear on top of each other.

The @media (max-width: 468px) query is for mobile devices where we want the 3 blocks to be stacked on top. You may need to adjust the values of the class attributes as per your requirements.

The final output will look something like below

and in mobile devices

Note that the custom bock inserted this way can contain more than a message. It can contain widget/form/slider/banner – anything that you can come up with.

Also, use a child theme if you are customizing the Storefront theme (for that matter any theme). That way when the Storefront theme is updated, you will retain the changes in child theme and besides that is the best recommended practice while customizing a ready made theme.

Comments, feedback are appreciated.