Cómo cambiar el color de fondo del aviso global de tienda en WooCommerce

Publicado por Fernando Tellado el 18 Abr, 2017

WooCommerce tiene una funcionalidad muy interesante para mostrar un aviso global en forma de barra fija, que puedes usar para simplemente avisar de que estás en pruebas con un sencillo texto o incluso para destacar ofertas, pues admite HTML.

Para activarla solo tienes que ir a WooCommerce > Ajustes y, en la pestaña General, activar el aviso global para, a continuación, personalizar tu texto, y como te he comentado incluso usar HTML a voluntad.

Lo que no tienes es la posibilidad de personalizar su aspecto, que siempre heredará del tema activo, en el mejor de los casos.

Pero es fácil cambiarlo, solo tienes que abrir el Personalizador de WordPress y en la sección de CSS Adicional añadir un poco de CSS a tu gusto, con los colores que elijas, por ejemplo:

//Cambiar color de fondo del aviso global en la tienda
.woocommerce-demo-store .demo_store {
   background-color: red; //cambia el color a tu gusto o ponlo en hexadecimal p.ej. #7C4360
}

//Cambiar color de fondo del aviso global en la tienda

.woocommerce-demo-store .demo_store {

background-color: red; //cambia el color a tu gusto o ponlo en hexadecimal p.ej. #7C4360

}

Como puedes ver en el código de ejemplo puedes usar tanto el nombre del color como su valor hexadecimal, lo que prefieras. Lo que consigues es pasar de esto…