En este tutorial veremos cómo añadir una barra informativa debajo del header de nuestra tienda si usamos el tema Storefront.
Cómo personalizar Storefront
Como sabemos, Storefront es un tema gratuito creado por los principales desarrolladores de WooCommerce, lo cual garantiza una profunda integración con nuestra tienda.
Es una plantilla flexible y limpia que además nos permite realizar modificaciones tanto a nivel de diseño, como en lo que a funcionalidades se refiere, por lo que conseguiremos ajustarla bastante bien a nuestro negocio y requisitos.
Podemos realizar estas adaptaciones de varias maneras, a través del personalizador, con plugins, código e incluso mediante widgets. En este tutorial vamos a añadir una barra informativa a nuestra tienda usando precisamente esta última forma.
Por cierto, si os interesa aprender sobre este theme, tenemos varios cursos disponibles en boluda.com. Os recomendamos echarle un vistazo al curso de Storefront, y al curso intermedio de Storefront. Dicho todo esto, ¡vamos a empezar!
Añadir barra informativa en WooCommerce
Como hemos comentado, Storefront tiene varias widget areas propias, una debajo del encabezado (bellow header), otra en la barra lateral (sidebar), y cuatro más que nos permiten incluir funcionalidades en el pie de página (footer).
Esto significa que podríamos añadir elementos en cualquiera de ellas y personalizar el aspecto de nuestra tienda de forma sencilla.
Aprovechando estas zonas especiales que nos ofrece el tema, vamos a incluir una barra informativa justo debajo de la cabecera. Esta barra puede contener el texto que nos interese según nuestros clientes y clientes potenciales. Veamos los pasos a seguir.
Lo primero que tenemos que hacer es ir al escritorio de WordPress, “Apariencia/Widgets”. De inmediato se abrirá una pantalla con los widgets disponibles y las zonas o áreas donde podríamos incluirlos.
El área que nos interesa en esta ocasión corresponde al título “Bajo la cabecera”. Si usáis widgets de forma frecuente ya sabréis cual es el siguiente paso.
Widget area especial de Storefront
Para agregar un texto a cualquier área tenemos a nuestra disposición dos widgets, uno es el de “Texto” y otro es el de “HTML personalizado”. Elegiremos entre uno u otro según queramos usar texto plano, o darle formato. En este caso vamos a elegir el widget del tipo HTML ya que así podremos modificar el estilo de nuestra barra fácilmente.
Así que sólo tenemos que buscar el widget y arrastrarlo dentro del área “Bajo la cabecera”. Una vez tenemos nuestro widget HTML colocado, vamos a hacer una prueba para que podáis ver dónde quedaría.
Añadir widget HTML personalizado a widget area "Bajo la cabecera"
Para ello desplegamos el widget e introducimos un texto cualquiera, por ejemplo un pequeño fragmento de código HTML. Después haremos clic sobre guardar.
Código HTML de prueba
Como vemos en la siguiente imagen, nuestro HTML se colocaría justo debajo del encabezado de la tienda, concretamente entre el contenido principal y el header.
Tienda con HTML personalizado en widget "Bajo la cabecera"
¡Ya lo hemos logrado! Nuestro código HTML se muestra correctamente justo dónde queríamos. Evidentemente, ahora podríamos mover el Widget a la Widget Area que quisiéramos, para elegir dónde mostrarlo. Pero en este caso, al tratarse de un aviso, tiene más sentido mostrarlo en la parte superior de la web. :)
Dándole formato a nuestro aviso
Bien, pues ahora que ya sabemos dónde se localizaría exactamente nuestro código, vamos a incluir un fragmento HTML más realista y útil para nuestros visitantes y futuros clientes. Puede ser algo similar a esto, aunque dependerá de cada caso:
HTML personalizado para añadir barra con información adicional
Recordad, como hemos dicho arriba, que podemos personalizar el texto en función de nuestro negocio y de lo que estemos anunciando, e igualmente al tratarse de código HTML también podremos jugar con la estructura y estilos.
En este caso hemos resaltado tres aspectos de nuestra tienda ficticia dirigidos especialmente a potenciales clientes: “Productos nuevos cada semana”, “10% de descuento en tu primera compra” y “Gastos de envío gratuitos”. Los hemos enmarcado además dentro de un “div” con una clase personalizada para que resulte más sencillo modificar el aspecto de nuestra barra.
Esta clase “informational-bar” tendríamos que definirla en la hoja de estilos o bien en el apartado "CSS adicional" que encontramos en el personalizador de WordPress. En este caso, podría ser algo parecido a éste:
.informational-bar {
text-align: center;
background: #428bca;
font-weight: bold;
color: white;
}
.informational-bar span {
padding-left: 2% !important;
}
Si tenéis interés en aprender HTML o CSS para tener mayor control sobre el diseño de vuestra tienda, os recomendamos el curso de HTML y el curso de CSS, que no sólo os servirá para este caso sino también para cualquier otro que tengáis entre manos.
En todo caso, una vez hayáis elegido los colores corporativos, tipos y tamaños de fuentes y otros detalles de formato, tendremos el resultado final:
Tienda Storefront con barra para información destacada
¡Y ya lo tenemos! ¿Queda bien, verdad? Como veis es muy sencillo colocar nuestra barra con información adicional en un lugar bastante visible de la tienda, así que os recomendamos elegir bien la información que queréis añadir en función de lo que os interese destacar y los puntos fuertes de vuestro negocio.
Resumen y conclusión
Storefront es el theme oficial de WooCommerce y se integra perfectamente con nuestra tienda ofreciéndonos varias posibilidades de personalización. En este tutorial hemos visto cómo podemos incluir una barra informativa para destacar los aspectos que nos interesen de nuestra tienda.
Para hacerlo, simplemente tuvimos que añadir un pequeño fragmento de código HTML en un widget personalizado que colocamos en el widget area “Bajo la cabecera”. Al ser código podíamos además incluir clases para modificar el aspecto de nuestra barra de información fácilmente. Si os interesa el tema, os recomendamos el curso de CSS y el curso de HTML.
Y esto es todo, esperamos que os haya sido útil. Si queréis aprender sobre esta plantilla, ya sabéis que tenemos disponible el curso de Storefront y el curso intermedio de Storefront. Si os suscribís tendréis acceso a los 4 cursos que mencionamos y a muchos más. En boluda.com hay más de 2789 a vuestra disposición :)