Introducción
Este tutorial explica, con todo lujo de detalles, cómo lograr botones consistentes entre WooCommerce y el resto del sitio usando únicamente CSS y buenas prácticas en WordPress. Aprenderás a definir una base visual (colores, bordes, tamaño), a aplicar esa base a los botones del tema y a los de WooCommerce, a gestionar estados (hover, focus, disabled), y a desplegar el CSS de forma segura desde un child theme o mediante el Personalizador.
Estrategia general
- Definir variables CSS (colores, radios, sombras, tamaños) en :root para mantener coherencia y facilitar cambios globales.
- Crear una clase base para botones (por ejemplo .btn) con estilos accesibles y responsive.
- Mapear y sobrescribir selectores específicos de WooCommerce para que utilicen la misma base visual.
- Probar estados (hover, focus, active, disabled) y asegurar contraste y accesibilidad.
- Incorporar el CSS mediante un child theme o el Personalizador (Appearance → Customize → Additional CSS). Para producción, registrar y encolar un archivo CSS desde functions.php del child theme.
Por qué usar variables CSS
Las variables (custom properties) permiten cambiar la apariencia con un único lugar. También facilitan temas oscuros/claro o variaciones por campaña sin duplicar código.
Variables y base del botón
A continuación un ejemplo de variables y clase base. Pégalo en tu archivo CSS del child theme o en el Personalizador.
:root{
--btn-bg: #0073aa / color principal /
--btn-color: #ffffff / texto /
--btn-bg-hover: #005f8d / hover /
--btn-border: rgba(0,0,0,0.08)
--btn-radius: 6px
--btn-padding-y: 0.6rem
--btn-padding-x: 1rem
--btn-font-size: 0.95rem
--btn-font-weight: 600
--btn-transition: 0.15s ease-in-out
--btn-shadow: 0 1px 0 rgba(0,0,0,0.02)
--disabled-opacity: 0.5
}
/ Clase base que puede usarse en tu tema o añadirse dinámicamente /
.btn{
display: inline-flex
align-items: center
justify-content: center
gap: 0.5rem
padding: var(--btn-padding-y) var(--btn-padding-x)
font-size: var(--btn-font-size)
font-weight: var(--btn-font-weight)
color: var(--btn-color)
background-color: var(--btn-bg)
border: 1px solid var(--btn-border)
border-radius: var(--btn-radius)
text-decoration: none
cursor: pointer
transition: background-color var(--btn-transition), transform var(--btn-transition), box-shadow var(--btn-transition)
box-shadow: var(--btn-shadow)
white-space: nowrap
vertical-align: middle
}
/ Estados /
.btn:hover,
.btn:focus{
background-color: var(--btn-bg-hover)
transform: translateY(-1px)
outline: none
}
.btn:active{
transform: translateY(0)
box-shadow: none
}
.btn[disabled],
button.btn[disabled],
input.btn[disabled],
.btn.is-disabled{
opacity: var(--disabled-opacity)
cursor: not-allowed
transform: none
box-shadow: none
}
Haciendo que WooCommerce use la misma base
WooCommerce tiene sus propios selectores y prioridades. Lo habitual es que use clases como .button, .single_add_to_cart_button, y selectores tipo a.button. Aquí se muestra cómo mapearlos a tu clase base y, cuando sea necesario, aumentar la especificidad para sobrescribir estilos del tema o del propio plugin.
/ Aplicar la estética .btn a los botones de WooCommerce /
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button{
/ Usa la misma base visual pero sin duplicar mucho código /
padding: var(--btn-padding-y) var(--btn-padding-x)
font-size: var(--btn-font-size)
font-weight: var(--btn-font-weight)
color: var(--btn-color) !important
background-color: var(--btn-bg) !important
border-radius: var(--btn-radius) !important
border: 1px solid var(--btn-border) !important
box-shadow: var(--btn-shadow) !important
text-decoration: none
transition: background-color var(--btn-transition), transform var(--btn-transition)
}
/ Estados específicos de WooCommerce /
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover{
background-color: var(--btn-bg-hover) !important
transform: translateY(-1px)
}
/ Botón de añadir al carrito en las fichas de producto /
.woocommerce .single_add_to_cart_button,
.woocommerce .add_to_cart_button{
/ si quieres una variante primaria, asegúrate de que tenga mayor especificidad /
background-color: var(--btn-bg) !important
color: var(--btn-color) !important
}
/ Botones secundarios (por ejemplo Ver carrito) /
.woocommerce .button.alt{
background-color: transparent !important
color: var(--btn-bg) !important
border: 1px solid var(--btn-bg) !important
}
Variantes (tamaños y estilo alternativo)
Crea variantes reutilizables para pequeñas, grandes y bloques full-width. Evita añadir demasiadas variantes céntrate en pequeñas y grande y en una variante outline/ghost.
/ Tamaños /
.btn--sm{ padding: 0.35rem 0.6rem font-size: 0.85rem }
.btn--lg{ padding: 0.9rem 1.4rem font-size: 1.05rem }
/ Full width (útil en formularios móviles) /
.btn--block{ display: block width: 100% }
/ Outline / Ghost /
.btn--outline{
background: transparent
color: var(--btn-bg)
border: 1px solid var(--btn-bg)
}
.btn--outline:hover{ background: rgba(0,0,0,0.04) color: var(--btn-bg-hover) }
Estado accesible: focus visible y contraste
Garantiza que el foco sea claramente visible y accesible para teclado y lectores de pantalla.
/ Enfoque claro para teclado /
.btn:focus-visible,
.woocommerce .button:focus-visible{
box-shadow: 0 0 0 3px rgba(0,115,170,0.18)
outline: none
}
/ Asegúrate de contraste en hover/activo para accesibilidad WCAG /
Cómo desplegar el CSS correctamente
Hay dos opciones recomendadas: 1) añadir el CSS en la sección Appearance → Customize → Additional CSS para cambios rápidos 2) en un child theme, crear un archivo CSS y encolarlo desde functions.php para un control completo. Ejemplo de encolado en functions.php:
Evitar conflictos y priorizar bien
- No abuses de !important. Úsalo solo en casos puntuales para sobrescribir reglas de plugins o tema que no puedas controlar. Preferible aumentar especificidad antes que usar !important masivamente.
- Aumenta especificidad con selectores compuestos si hace falta: por ejemplo .site .woocommerce .button en lugar de solo .woocommerce .button.
- Comprueba la cascada y el orden de carga: si otro estilo sigue pisando tus reglas, revisa si se carga después ajusta prioridad del enqueue o usa más especificidad.
- Inspecciona con DevTools para detectar qué reglas están sobrescribiendo tu CSS y su origen (archivo/linea).
Consideraciones para botones con iconos y texto dinámico
Si tus botones incluyen iconos (SVG o ltigt/ltspangt en el HTML), mantén la alineación con flexbox y controla el tamaño del icono:
.btn svg,
.btn i{
width: 1em
height: 1em
display: inline-block
vertical-align: middle
fill: currentColor / para que herede el color del texto /
}
Cómo adaptar a botones específicos de WooCommerce
Algunos botones requieren tratamiento especial:
- Botón Añadir al carrito en listado (ajax): suele tener clase .add_to_cart_button. Controla los estados loading/added. WooCommerce añade clase added tras añadir puedes personalizar su aspecto.
- Botones en el checkout: los campos del checkout pueden tener inputs y botones personalizados. Asegúrate de que button e input[type=submit] reciban tu estilo.
/ Ejemplo: estado added en botones ajax /
.woocommerce a.add_to_cart_button.added{
background-color: #008e60 / verde de confirmación /
cursor: default
transform: none
}
Responsive: adaptar paddings y tamaños en móviles
En pantallas pequeñas conviene ajustar paddings y a veces hacer botones full-width.
@media (max-width: 600px){
:root{
--btn-padding-y: 0.55rem
--btn-padding-x: 0.8rem
--btn-font-size: 0.95rem
}
.btn--mobile-block,
.woocommerce .button{
display: block
width: 100%
text-align: center
}
}
Pruebas y comprobaciones finales
- Revisar botones en páginas clave: index, shop, single product, cart, checkout, cuentas.
- Comprobar estados keyboard-only (tabulación) y lector de pantallas: asegúrate de que el foco es evidente y los textos de los botones son comprensibles (no solo icons).
- Verificar en varios navegadores (Chrome, Edge, Firefox, Safari) y dispositivos.
- Si usas caché y optimizadores de CSS, limpia la caché después de cambiar estilos y asegúrate de que el archivo correcto se está cargando.
Resolución de problemas comunes
- Mis cambios no se aplican: verifica el orden de encolado y la especificidad limpia caché usa DevTools para localizar la regla que prevalece.
- WooCommerce sigue mostrando otro color: aumenta especificidad o aplica !important solo en el selector afectado.
- Los botones pierden íconos o padding: comprueba reglas que restablecen display o padding en selectores globales (por ejemplo reset CSS del tema).
Ejemplo completo y práctico
Un ejemplo mínimo que podrías colocar en un archivo botones-globales.css para aplicar en todo el sitio y en WooCommerce:
:root{
--btn-bg: #1e73be
--btn-color: #fff
--btn-bg-hover: #155d8f
--btn-radius: 8px
--btn-padding-y: 0.65rem
--btn-padding-x: 1.1rem
--btn-font-size: 1rem
--btn-font-weight: 600
--btn-transition: 0.12s ease
--btn-shadow: 0 2px 6px rgba(0,0,0,0.06)
}
/ Base /
.btn,
a.button,
button,
input[type=submit]{
display: inline-flex
align-items: center
justify-content: center
gap: 0.5rem
padding: var(--btn-padding-y) var(--btn-padding-x)
font-size: var(--btn-font-size)
font-weight: var(--btn-font-weight)
color: var(--btn-color)
background: var(--btn-bg)
border: 1px solid rgba(0,0,0,0.06)
border-radius: var(--btn-radius)
text-decoration: none
cursor: pointer
transition: background var(--btn-transition), transform var(--btn-transition)
box-shadow: var(--btn-shadow)
}
/ WooCommerce /
.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button{
color: var(--btn-color) !important
background: var(--btn-bg) !important
border-radius: var(--btn-radius) !important
}
/ Hover / focus /
.btn:hover, .woocommerce .button:hover{ background: var(--btn-bg-hover) !important transform: translateY(-1px) }
.btn:focus-visible, .woocommerce .button:focus-visible{ box-shadow: 0 0 0 4px rgba(30,115,190,0.18) outline: none }
/ Tamaño móvil /
@media (max-width: 600px){
.btn, .woocommerce .button{ width: 100% display: block }
}
Conclusión práctica
Con un sistema de variables, una clase base y unas pocas reglas específicas para WooCommerce puedes unificar el aspecto de los botones en todo el sitio. Mantén el CSS modular, evita el uso masivo de !important y prioriza la accesibilidad (foco claro y contraste). En la mayoría de casos, encolar un archivo CSS en un child theme con prioridad adecuada y revisar la cascada resolverá los problemas de incompatibilidad.
Leave a Reply