Estilizar los avisos de WooCommerce (success, error, info) con CSS — tutorial completo
WooCommerce usa avisos (notices) para comunicar éxito, errores o información al usuario. Estilizar esos avisos mejora la experiencia, la accesibilidad y la coherencia visual con tu tema. En este tutorial detallado verás cómo identificar la estructura HTML que usa WooCommerce, qué selectores emplear, ejemplos prácticos de CSS (varios estilos), cómo asegurarte de que tus reglas se apliquen correctamente y buenas prácticas de accesibilidad y rendimiento.
Requisitos y dónde aplicar el CSS
- Un tema hijo (recomendado) o acceso a Apariencia → Personalizar → CSS adicional.
- Opcional: un archivo CSS propio en tu tema hijo y/o encolar ese CSS desde functions.php para garantizar orden de carga.
- Conocer las clases principales de los avisos de WooCommerce: .woocommerce-message, .woocommerce-error y .woocommerce-info.
Estructura HTML típica de los avisos
Estos son los ejemplos más habituales que genera WooCommerce (pueden variar según versión):
ltdiv class=woocommercegt
ltul class=woocommerce-errorgt
ltligtHa ocurrido un error: ejemplo de mensaje.lt/ligt
lt/ulgt
ltdiv class=woocommerce-messagegt
ltpgtPedido realizado correctamente. lta href=#gtVer pedidolt/agtlt/pgt
lt/divgt
ltdiv class=woocommerce-infogt
ltpgtLa sesión ha expirado, por favor inicia sesión de nuevo.lt/pgt
lt/divgt
lt/divgt
Reglas CSS base para identificar y resetear estilos
Antes de diseñar, conviene neutralizar reglas no deseadas y definir una base común. Usa selectores que sean lo suficientemente específicos para sobrescribir las reglas por defecto de WooCommerce.
/ Base común para todos los avisos /
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-error,
.woocommerce .woocommerce-info {
margin: 1.2rem 0
padding: 0.9rem 1rem
border-radius: 6px
font-size: 0.95rem
line-height: 1.4
display: block / algunos avisos pueden ser ul/li /
box-sizing: border-box
}
/ Si el aviso viene como lista (ul > li), quitamos el margin del li /
.woocommerce .woocommerce-error ul,
.woocommerce .woocommerce-message ul,
.woocommerce .woocommerce-info ul {
margin: 0
padding: 0
list-style: none
}
Estilos recomendados por tipo (ejemplos prácticos)
A continuación encontrarás varios estilos listos para copiar y adaptar.
1) Estilo sutil y moderno (borde y fondo suave)
.woocommerce .woocommerce-message {
background: #e6f4ea / verde muy suave /
border-left: 4px solid #26a65b
color: #155724
}
.woocommerce .woocommerce-error {
background: #fdecea
border-left: 4px solid #e53935
color: #721c24
}
.woocommerce .woocommerce-info {
background: #eef6ff
border-left: 4px solid #2f80ed
color: #1f3a93
}
/ enlaces dentro de los avisos /
.woocommerce .woocommerce-message a,
.woocommerce .woocommerce-error a,
.woocommerce .woocommerce-info a {
text-decoration: underline
color: inherit
font-weight: 600
}
2) Con iconos (pseudo-elemento ::before y caracteres Unicode)
Usar iconos con pseudo-elementos evita depender de fuentes externas. Respeta el flujo y la accesibilidad: deja espacio para el icono.
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-error,
.woocommerce .woocommerce-info {
position: relative
padding-left: 3.2rem / espacio para el icono /
}
/ iconos con Unicode /
.woocommerce .woocommerce-message::before {
content: 2713 / ✓ /
position: absolute
left: 1rem
top: 50%
transform: translateY(-50%)
font-size: 1.2rem
color: #1e7e34
}
.woocommerce .woocommerce-error::before {
content: 2716 / ✖ /
position: absolute
left: 1rem
top: 50%
transform: translateY(-50%)
font-size: 1.2rem
color: #c82333
}
.woocommerce .woocommerce-info::before {
content: 2139 / ℹ /
position: absolute
left: 1rem
top: 50%
transform: translateY(-50%)
font-size: 1.1rem
color: #0b5fff
}
3) Aviso tipo “toast” flotante (estilo liviano para notificaciones en el front)
/ Container que podrías añadir vía HTML o JS si no existe, elige un contenedor /
.woocommerce .toast-notice {
position: fixed
right: 1rem
top: 1rem
z-index: 9999
max-width: 360px
box-shadow: 0 8px 20px rgba(0,0,0,0.12)
border-radius: 10px
overflow: hidden
}
/ Reutilizamos clases de tipo /
.woocommerce .toast-notice.woocommerce-message { background: #f0fff4 border: 1px solid #bfeccf color: #1b5e20 }
.woocommerce .toast-notice.woocommerce-error { background: #fff5f5 border: 1px solid #f1b0b0 color: #7a1414 }
.woocommerce .toast-notice.woocommerce-info { background: #f2f8ff border: 1px solid #bcd7ff color: #0b4db5 }
/ transición suave (respetar reduced motion) /
@media (prefers-reduced-motion: no-preference) {
.woocommerce .toast-notice {
transition: transform 220ms cubic-bezier(.2,.8,.2,1), opacity 180ms
}
}
Consideraciones de contraste y accesibilidad
- Comprueba contraste de color (texto/fondo) para cumplir WCAG (relación mínima 4.5:1 para texto normal cuando sea posible).
- Si los avisos se generan dinámicamente, asegúrate de que el markup incluya los atributos ARIA apropiados: role=alert o aria-live=polite según la severidad. (El role se gestiona normalmente desde el HTML/PHP/JS CSS no añade roles).
- Respeta preferencia de motion con @media (prefers-reduced-motion: reduce) y evita animaciones que distraigan.
Cómo asegurarte de que tu CSS tiene prioridad
- Coloca tu CSS en el tema hijo y que se cargue después de los estilos de WooCommerce. La forma más fiable es encolar un archivo CSS en functions.php del tema hijo.
- Si no puedes controlar el orden, usa selectores más específicos en lugar de !important. Ejemplo: .woocommerce .woocommerce-message en vez de solo .woocommerce-message.
- Como último recurso, usa !important solo en reglas puntuales y justificadas (p. ej. cuando otra hoja se carga con mayor prioridad y no puedes modificarla).
Ejemplo: encolar un archivo CSS en functions.php (tema hijo)
/ functions.php del tema hijo /
add_action(wp_enqueue_scripts, mi_tema_enqueue_wc_notices, 20)
function mi_tema_enqueue_wc_notices() {
// El tercer parámetro array() permite expresar dependencias el 4º es la versión
wp_enqueue_style(
mi-wc-notices,
get_stylesheet_directory_uri() . /css/wc-notices.css,
array(), // si quieres que cargue después de woocommerce puedes poner woocommerce-general aquí
1.0
)
}
Personalizaciones avanzadas
- Color dinámico: puedes usar variables CSS si tu tema las soporta (:root { –success: #26a65b } y luego usar var(–success)).
- Iconos SVG: si quieres iconos más detallados, puedes usar background-image con SVG inline en data-uri o insertar un SVG en el HTML del aviso si sobrescribes la plantilla.
- Sobrescribir plantillas de WooCommerce: si necesitas cambiar el HTML de los avisos (por ejemplo para añadir un contenedor específico o atributos ARIA), copia la plantilla correspondiente a tu tema hijo (woocommerce/templates/notices/…) y modifícala con cuidado.
Ejemplo: estilo completo, accesible y responsivo
/ Estilo completo recomendado /
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-error,
.woocommerce .woocommerce-info {
margin: 1rem 0
padding: 1rem 1.25rem
border-radius: 8px
font-size: 0.97rem
line-height: 1.45
position: relative
box-shadow: 0 2px 8px rgba(14, 21, 30, 0.04)
}
/ Tipografía y espacio para icono /
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-error::before,
.woocommerce .woocommerce-info::before {
position: absolute
left: 1rem
top: 50%
transform: translateY(-50%)
font-size: 1.15rem
}
/ Colores /
.woocommerce .woocommerce-message {
background: linear-gradient(180deg, #f2fbf6, #e9f8ee)
border: 1px solid rgba(38,166,91,0.12)
color: #14532a
}
.woocommerce .woocommerce-message::before { content: 2713 color: #16a34a }
.woocommerce .woocommerce-error {
background: linear-gradient(180deg, #fff4f4, #feecec)
border: 1px solid rgba(229,57,53,0.12)
color: #7c1414
}
.woocommerce .woocommerce-error::before { content: 2716 color: #d32f2f }
.woocommerce .woocommerce-info {
background: linear-gradient(180deg, #f5fbff, #eef7ff)
border: 1px solid rgba(47,128,237,0.12)
color: #08306b
}
.woocommerce .woocommerce-info::before { content: 2139 color: #2563eb }
/ Evitar que el icono tape el texto en móviles /
@media (max-width: 480px) {
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-error,
.woocommerce .woocommerce-info {
padding-left: 3.6rem
font-size: 0.95rem
}
}
/ Respeto a preferencia de reducción de movimiento /
@media (prefers-reduced-motion: reduce) {
.woocommerce .toast-notice,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-error,
.woocommerce .woocommerce-info {
transition: none !important
animation: none !important
}
}
Pruebas y despliegue
- Aplica los estilos en tu entorno de pruebas o en el tema hijo.
- Visita páginas donde aparezcan avisos: carrito, checkout, añadir al carrito, my-account, acciones que disparen errores y mensajes de éxito.
- Prueba con diferentes tamaños de pantalla y verifica contraste de color (herramientas como Lighthouse, a11y extensions o contrast checker).
- Si usas caché o un plugin de optimización, limpia la caché de CSS/JS para ver los cambios.
Consejos finales
- Mantén consistencia entre los avisos y el resto del diseño (tipografías, esquemas de color y bordes).
- No abuses de animaciones: en avisos, la claridad y la legibilidad importan más que el efecto visual.
- Si necesitas más personalización estructural (p. ej. añadir botones o contenedores especiales), hazlo mediante la sobrescritura de plantillas de WooCommerce en un tema hijo, no editando archivos del plugin.
Con estas pautas y ejemplos tienes todo lo necesario para diseñar avisos de WooCommerce claros, accesibles y visualmente integrados con tu tema. Ajusta colores, tamaños e iconos según la identidad visual de tu proyecto y comprueba siempre el contraste y la experiencia en móviles.
Leave a Reply