Agregar topbar al tema storefront sin plugins

El tema Storefront es uno de los temas más populares de WooCommerce. A día de hoy cuenta con 200.000 instalaciones activas y valoraciones de 4,5 sobre 5, así como un excelente rendimiento en general.

Pero claro, no puede ser en un tema que «gane en todo». A Storefront le falta una característica importante: la barra superior (o topbar). Es una pena, porque la mayoría de los temas de comercio electrónico tienen un área de widgets dedicada o bien un lugar donde puede agregar contenido en las opciones del tema que se visualiza como un «top bar».

Es por ello que vamos a arreglar eso. Aquí te mostramos cómo agregar una barra superior con un fondo atsu tema Storefront. ¡Disfruta y comparte!

/**
 * @snippet       Top Bar For Storefront Theme
 */
 
add_action( 'storefront_before_header', 'bbloomer_storefront_top_bar' );
 
function bbloomer_storefront_top_bar() {
   ?>
   <div class="sf-top-bar">
      <div class="col-full">
         Your text here   
      </div>
   </div>
   <?php
}

y un poco de estilo para que no se vea tan mal.

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