Agregar un top bar a la plantilla Storefront

Storefront es una de las plantillas más populares de todos los tiempos para Woocommerce, a día de hoy con más de 200 mil instalaciones y una calificación de 4.5/5 estrellas la situan como la plantilla con mejor rendimiento de la historia.

Pero como es de esperar, no siempre se puede ganar en todo. La plantilla storefront no tiene una “sección” que hoy por hoy es casi fundamental en cualquier ecommerce, estamos hablando de una top bar.

¿Cómo agregar una top bar a la plantilla storefront sin plugins?

Vamos a ello, sin vueltas te explico como agregar esta barra superior donde podrás agregar información importante, como envios gratis, tiempos de despacho, descuentos o cualquier campaña que se te ocurra.

Agregar el siguiente fragmento de código al archivo functions.php

/**
 * @snippet       Top Bar For Storefront Theme
 * @how-to        Get sorostica.com
 * @author        Servando Orótica
 * @compatible    WooCommerce 6
 */
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
}

Además podemos agregar un poco de estilo.

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

Acá puedes encontrar una mini guía para editar el archivo functios.php