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

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
}

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…

A esto otro…

Dependiendo del color elegido claro.

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

AVISO: Esta publicación es de hace 3 años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado. ¡Ah! ¿te funciona? pues entonces no he dicho nada :)