CSS adicional en WordPress: dónde añadirlo y cómo cambiar el color de un botón

Antes de escribir CSS: quizá baste un ajuste

El color de botón más fácil es el que pones sin código. Revisa primero esto:

• Tema de bloques: Apariencia → Editor → Estilos. En los ajustes de bloques o elementos encontrarás los botones y podrás cambiar su fondo y el color del texto para todo el sitio.
• Tema clásico: Apariencia → Personalizar. Muchos temas tienen ahí una sección de colores o de botones.
• Tienda WooCommerce: los botones de Añadir al carrito suelen tomar el color del tema, así que a menudo basta un cambio en los estilos del tema.

Necesitas CSS cuando no existe esa opción, o cuando quieres cambiar un botón concreto.

Dónde está el CSS adicional en tu tema

El CSS del Editor del sitio y el CSS de Personalizar son dos lugares distintos. Lo explica la nota del equipo de WordPress sobre el CSS en los estilos globales. Si tienes un tema de bloques pero en su día añadiste CSS en Personalizar, conviene pasarlo a un solo sitio, para que dentro de un año sepas dónde buscar.

Cómo cambiar el color de un botón paso a paso

1. Abre la página con el botón, haz clic derecho sobre él y elige Inspeccionar. Verás la clase del elemento, por ejemplo wp-block-button__link o button.
2. Ve al lugar del CSS adicional según la tabla de arriba.
3. Añade una regla, por ejemplo:

.wp-block-button__link {
  background-color: #1f6f5c;
  color: #ffffff;
}
.wp-block-button__link:hover {
  background-color: #17574a;
}

4. Mira la vista previa. Si el color no ha cambiado, una regla del tema es más fuerte. Pon delante de la clase el nombre de una zona, por ejemplo .site-footer, en lugar de forzar la regla con important de entrada.
5. Publica o guarda los cambios.
6. Revisa la página en una ventana privada y en el móvil. El color del texto debe leerse bien sobre el fondo nuevo.

Los colores del ejemplo son solo ejemplos. Más formas de hacerlo, incluidos un tema hijo y un plugin, están en la guía de Hostinger sobre CSS personalizado en WordPress.

Qué más arreglan unas pocas líneas de CSS

El color de los botones es lo que más se pide, pero el mismo campo ayuda con otros pequeños arreglos de estilo:

• Ocultar un elemento, por ejemplo la fecha bajo las entradas o el nombre del autor, con una regla display: none. El elemento sigue en el código de la página, solo que no se ve.
• Espaciados, cuando un encabezado se pega a una imagen o los botones quedan demasiado juntos en el móvil.
• Tamaño de letra en un sitio concreto, por ejemplo el pie de página, sin cambiar toda la tipografía del tema.
• Color de los enlaces en el contenido de las entradas, cuando el color del tema es demasiado pálido sobre fondo blanco.
• Diseño en el móvil, con una regla que lleva una condición de ancho de pantalla y solo se aplica en pantallas estrechas.

Dos hábitos te ahorrarán búsquedas dentro de unos meses. Encima de cada regla, añade un comentario entre /* y */, por ejemplo «botones verdes, octubre de 2026». Y guarda todos tus arreglos en un solo sitio, no un poco en Personalizar, un poco en los estilos del editor y otro poco en los ajustes de un plugin maquetador. Así ves fácilmente qué regla hace qué, y quitas sin miedo las que ya no necesitas.

Una advertencia sobre ocultar cosas. Si así ocultas un texto importante para los clientes, por ejemplo los gastos de envío, desaparece de la pantalla, pero no de las obligaciones de la tienda. Ese tipo de contenido arréglalo en su origen.

Cuando el CSS adicional no basta

El CSS adicional cambia el aspecto, no el contenido ni la estructura HTML. Con él no puedes añadir texto nuevo al pie de página ni mover un botón a otra sección. Para eso necesitas las plantillas del Editor del sitio o los archivos de un tema hijo de WordPress. Se describen en el WordPress Theme Handbook.

Si después de guardar no cambia nada aunque el CSS sea correcto, a menudo la culpa es de la caché. El orden para vaciarla lo describimos en la entrada los cambios no se ven en WordPress.

Cómo cambia el chat el CSS con vista previa

El plugin TellMyShop para WordPress y WooCommerce permite a tu chat (Claude o ChatGPT) leer tu CSS adicional actual y añadir o sustituir una parte. Antes de guardar comprueba que las llaves cuadran, y te avisa si se cargan estilos desde otros dominios. En un tema de bloques también cambia colores y tipografía en los estilos globales.