Para cambiar el color de los botones de WooCommerce, tendremos que cambiar o reemplazar el estilo css predeterminado de los botones. Además para hacer esto tendremos que añadir css personalizado a nuestro tema de wordpress.
Hay tres maneras de hacer esto:
1– Añade el css personalizado en el archivo style.css del tema o child theme que estés utilizando.
2– Incluye el css en el apartado Custom CSS de los ajustes del tema (si lo tiene).
3– También puedes utilizar algún plugin para inyectar el css personalizado a las páginas web.
Si tienes pensado utilizar un plugin de WordPress para inyectar el css a las páginas del sitio web de WooCommerce. Puedes descargar el complemento: Simple Custom CSS. También de esta forma evitarás perder los cambios en el diseño si actualizas el tema.
Para utilizar el plugin una vez que lo tengas instalado y activado, te diriges al apartado Custom CSS.
Código para cambiar el color del botón en WooCommerce
Aquí te dejo un video para que veas como se hace si prefieres este formato:
Pega el código css siguiente en el área de texto y pulsa en “Update Custom Css”.
.woocommerce #content input.button.alt:hover, .woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover, .woocommerce-page #content input.button.alt:hover, .woocommerce-page #respond input#submit.alt:hover, .woocommerce-page a.button.alt:hover, .woocommerce-page button.button.alt:hover, .woocommerce-page input.button.alt:hover {
background:red !important;
background-color:red !important;
color:white !important;
text-shadow: transparent !important;
box-shadow: none;
border-color:#ca0606 !important;
}
.woocommerce #content input.button:hover, .woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce-page #content input.button:hover, .woocommerce-page #respond input#submit:hover, .woocommerce-page a.button:hover, .woocommerce-page button.button:hover, .woocommerce-page input.button:hover {
background:red !important;
background-color:red !important;
color:white !important;
text-shadow: transparent !important;
box-shadow: none;
border-color:#ca0606 !important;
}
.woocommerce #content input.button, .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce-page #content input.button, .woocommerce-page #respond input#submit, .woocommerce-page a.button, .woocommerce-page button.button, .woocommerce-page input.button {
background: red !important;
color:white !important;
text-shadow: transparent !important;
border-color:#ca0606 !important;
}
.woocommerce #content input.button.alt:hover, .woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover, .woocommerce-page #content input.button.alt:hover, .woocommerce-page #respond input#submit.alt:hover, .woocommerce-page a.button.alt:hover, .woocommerce-page button.button.alt:hover, .woocommerce-page input.button.alt:hover {
background: red !important;
box-shadow: none;
Ahora dirígete a la página de tu tienda WooCommerce de un producto o a la página del carrito, y verás que los botones entán en color rojo. Si queires cambiar el color de los botones, cambia el “backgroud: red !important” al color que tengas pensado para tu sitio web. Pulsa en Actualizar para que se realicen los cambios y estará listo para funcionar.
8 Recursos CSS y JS para Incluir un Efecto Liquido en la Web
Plugin para crear Bucles de Productos con WooCommerce
Cambiar el Cursor con CSS para Mejorar Experiencia de Usuario
5 Plugins Comparativa de Precios & Productos para WooCommerce
6 Plugins para Envío Gratis con Condiciones en WooCommerce
Excelente!! muchas gracias!
Gracias amigo!
hola como puedo hacer para cambiar el fondo del globo o circulo que dice oferta el color o modelo de marco de circulo y ademas como puedo hacer para justificar las imagenes de un solo tamaño en la tienda y ademas para que esten justificados los productos espero me puedas ayudar llevo dias en eso gracias de ante mano. Saludos a todos
Gracias!
No hay de que! 😉
Muy buenos datos, muchas gracias!!!
A ti Jorge por comentar. Saludos!
Buenas! Excelente articulo, realmente útil para los que empezamos en este apasionante mundo.
¿Como puedo sustituir el rojo por un valor rgba? Al hacer el cambio de “red” por rgba(1,2,3,4) me da errores.
Muchas gracias
Hola Ubald,
Para los valores rgba no sirve este código. Para eso hay que buscar otra solución mas compleja. Saludos!
Saludos.
Excelente aporte. Me gustaria poder cambiar el fondo del recueadro de “Cantidad” en Woocommerce. El fondo gris con las letras blancas se presta a pasar desapercibido y no consigo la forma de cambiarlo. No he conseguido a nadie hablar de esa tema.
Muchas gracias.
Hola Juan,
Me puedes enviar un pantallazo o algo? No sé exactamente a que te refieres. Saludos!
Hola,
Pero, cómo cambio el color y el texto del botón “Finalizar Compra”???
Cual es tu sitio web?