ReInSpirit

  • Contacto
  • Blog
  • Servicios
    • Alojamiento Web
    • Desarrollo y diseño web
  • Descuento E T
  • Sobre Nosotros

Como Cambiar el Color de los Botones en WooCommerce

10 febrero, 2021 por Pedro Mendez 19 comentarios

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.

..Entradas Relacionadas

  • Configurador Premium de productos para WooCommerce
  • Plugins WordPress buscador de piezas de vehiculos en WooCommerce
  • Plugin Disparador de Ventas para WooCommerce
  • Mostrar Productos de WooCommerce al Estilo Carrusel
  • 📱 Plugin Recordatorio de Email y SMS para WooCommerce

Archivado en:Wordpress Etiquetado con:css, woocommerce

Sobre el autor

Pedro Mendez. Webmaster apasionado de WordPress. Autodidacta empedernido buscando siempre nuevas fuentes de conocimientos.

Comentarios

  1. Lola dice

    20 abril, 2017 en 9:03 PM

    Excelente!! muchas gracias!

    Responder
  2. Rosa Elemil Martínez dice

    15 junio, 2017 en 11:03 PM

    Gracias amigo!

    Responder
  3. Lucian dice

    16 noviembre, 2017 en 3:28 AM

    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

    Responder
  4. Alejandra Villarreal dice

    17 mayo, 2018 en 7:35 PM

    Gracias!

    Responder
    • Pedro Mendez dice

      17 mayo, 2018 en 7:39 PM

      No hay de que! 😉

      Responder
  5. jorge dice

    2 noviembre, 2018 en 9:28 PM

    Muy buenos datos, muchas gracias!!!

    Responder
    • Pedro Mendez dice

      5 noviembre, 2018 en 4:06 PM

      A ti Jorge por comentar. Saludos!

      Responder
  6. Ubald dice

    13 enero, 2019 en 10:12 AM

    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

    Responder
    • Pedro Mendez dice

      14 enero, 2019 en 12:03 PM

      Hola Ubald,
      Para los valores rgba no sirve este código. Para eso hay que buscar otra solución mas compleja. Saludos!

      Responder
  7. Juan Rodriguez dice

    3 marzo, 2019 en 7:02 PM

    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.

    Responder
    • Pedro Mendez dice

      4 marzo, 2019 en 11:52 AM

      Hola Juan,
      Me puedes enviar un pantallazo o algo? No sé exactamente a que te refieres. Saludos!

      Responder
  8. Isabel dice

    14 marzo, 2019 en 3:35 PM

    Hola,
    Pero, cómo cambio el color y el texto del botón “Finalizar Compra”???

    Responder
    • Pedro Mendez dice

      14 marzo, 2019 en 5:06 PM

      Cual es tu sitio web?

      Responder
  9. isabel hernaiz dice

    5 abril, 2019 en 5:46 PM

    Hola,
    El sitio es: https://irdviajes.cl

    Responder
    • Pedro Mendez dice

      7 abril, 2019 en 2:50 PM

      ¿Que color lo quieres poner? Ahora lo veo rojo y hace juego con los demás botones de la web

      Responder
  10. Juan dice

    29 mayo, 2019 en 12:56 AM

    Buenisimo che! Muchisimas gracias por la información, me ha valido de mucho.. Abrazo desde Argentina

    Responder
    • Pedro Mendez dice

      31 mayo, 2019 en 6:28 PM

      Hola Juan,
      Me alegro de que te haya sido útil. Un abrazo!

      Responder
  11. Jerry Tapia dice

    19 abril, 2020 en 1:14 AM

    Como puedo cambiar el color de texto de las páginas de woocommerce? o el fondo de los recuadros, ya que el fondo es blanco y el texto también es blanco, he buscado como y no logro encontrar donde hago ese ajuste. En la página de carrito, pagar y demás enlazadas a mi WooCommerce es lo mismo, texto y fondo es blanco.

    Responder
    • Pedro Mendez dice

      19 abril, 2020 en 2:16 PM

      Pues visto lo visto lo mejor que puedes hacer es cambiar de plantilla. Busca una que te guste el diseño que tiene, la instalas y listo.

      Responder

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.


Descarga gratis la guía

guia 14 plugins

Política de privacidad


Más un correo a la semana con algún truco y consejo. ¿Te apuntas?

También con regalos y ofertas

icono Twittericono Facebookicono YouTube

Archivos

Categorías

  • Blogging (5)
  • Comercio Eléctronico (44)
  • Diseño (40)
  • Email Marketing (3)
  • Genesis (4)
  • Google (14)
  • herramientas (23)
  • hosting (8)
  • Marketing en Internet (12)
  • Prestashop (4)
  • Programación (4)
  • Redes Sociales (9)
  • SEO (25)
  • Sin categoría (22)
  • Trabajo (7)
  • Wordpress (483)

© Copyright 2021 ReInSpirit.com · Todos los derechos reservados ·Aviso legal·Política de Privacidad·Dos Hermanas (Sevilla)

Utilizamos herramientas y servicios de terceros que utilizan cookies. Saber más...