WooCommerce: How to Add a Top Bar to Storefront Theme

The Storefront theme is one of the most popular WooCommerce themes. As of today, it has 200,000 active installations and 4.5/5 ratings, as well as a great overall performance.

But sure, you can’t win them all. Storefront is missing an important feature: the top bar. That’s a pity, because most ecommerce themes have either a dedicated widget area or somewhere you can add content in the theme options.

So, let’s go fix that. Here’s how to add a top bar with a background to your Storefront theme. Enjoy!

PHP Snippet: Add Top Bar to Storefront Theme

/**
 * @snippet       Top Bar For Storefront Theme
 * @how-to        Get tutoraspire.com FREE
 * @author        Tutor Aspire
 * @compatible    WooCommerce 6
 * @donate $9     https://www.tutoraspire.com
 */

add_action( 'storefront_before_header', 'tutoraspire_storefront_top_bar' );

function tutoraspire_storefront_top_bar() {
?>


Your text here


 

And a bit of CSS for styling the top bar:

.sf-top-bar {
text-align: center;
padding: 0.2em 0;
background: #E11F27;
color: white;
}