Vamos a ver en este post + VÍDEO, cómo cambiar el color del botón de añadir al carrito de Woocommerce. Pero, no solo esto, verás, que también te aporto la herramienta que te permitirá realizar otras muchas modificaciones en el diseño de Woocommerce.
El color del botón de añadir al carrito lo cambiaremos con el plugin CSS Hero. También cambiaremos otras opciones de diseño como el color del botón cuando colocamos el ratón sobre éste, efectos al poner el ratón y otros muchos. En este post vamos a tocar solo la superficie de lo que se puede hacer en cuanto al diseño del botón de añadir al carrito, pero verás que se puede hacer mucho, mucho más y no solo en este botón, sino en el diseño general de Woocommerce y el diseño en general de la web.
He decidido usar el plugin CSS Hero, debido a que aunque existen otros plugins, no he encontrado una buena compatibilidad de éstos con las plantillas más utilizadas. Hace tiempo escribí un post sobre un plugin para cambiar colores y texto del botón de añadir al carrito que ha quedado anticuado y ya no es compatible. Existen otros plugins pero no funcionan bien con muchas plantillas. Por lo que he decidido apostar en este post por CSS Hero, para intentar fallar lo menos posible y asegurar la durabilidad.
Si lo que te interesa es aprender a cambiar el texto del botón de añadir al carrito en Woocommerce ve al siguiente post: Cómo cambiar el texto del botón de añadir al carrito en Woocommerce
DISFRUTA DE TODOS MIS CURSOS PREMIUM POR SOLO 10€/MES
ÍNDICE - CAMBIAR COLOR BOTÓN AÑADIR AL CARRITO DE WOOCOMMERCE
-
✅ Cambiar color del botón de añadir al carrito con Woocommerce
- 👉Planes de CSS Hero
- 👉¿Por qué usar el plugin CSS Hero para modificar los colores del botón de añadir al carrito de Woocommerce?
- 👉Modificar el color del botón de añadir al carrito de Woocommerce
- 👉Modificar el color del texto del botón de añadir al carrito de Woocommerce
- 👉Modificar el color del botón de añadir al carrito cuando se pone el ratón sobre él
QUIERO CSS HERO
✅ Cambiar color del botón de añadir al carrito con Woocommerce
Para cambiar el color del botón de añadir al carrito con Woocommerce usaremos el plugin CSS Hero.
Si bien, este es un plugin de pago. Es cierto, que es un plugin muy económico y que nos va a servir no solo para cambiar el color del botón de añadir al carrito de Woocommerce. Sino que nos va a servir para hacer cualquier cambio del diseño que no nos permita hacer la plantilla que estemos utilizando. Por lo que lo amortizas seguro. Es decir, podrás realizar otros muchos cambios relacionados con Woocommerce o con WordPress.
👉Planes de CSS Hero
Existen diferentes planes de CSS Hero.
Plan Starter: El precio del plan starter es solo de 29$. Pero, con el descuento actual se queda en 19$, y nos sirve para usar el plugin en 1 sitio web, proporciona 1 año de soporte y actualizaciones del plugin.
Plan Personal: El precio de este plan es de 59$. Pero, con el descuento actual se queda en 39$, y nos sirve para usar el plugin en 5 sitio web, proporciona 1 año de soporte y actualizaciones del plugin.
Plan PRO: El precio de este plan es de 199$. Pero con el descuento actual se queda en 69$, y nos sirve para usar el plugin en 999 sitios web, proporciona 1 año de soporte y actualizaciones del plugin.
Nota: hasta aquí todos son planes de renovación anual. Si no renovamos al finalizar el año, nuestra web seguirá funcionando perfectamente. Lo que pasa, es que no podremos acceder al soporte ni a actualizaciones del plugin
Ahora te muestro un Plan para toda la vida (solo se paga una vez)
Plan Lifetime PRO: Este es un plan para toda la vida. No se tiene que renovar anualmente, se paga una sola vez y es para toda la vida. El precio de este plan es de 599$. Pero, con el descuento actual se queda en 199$, y nos sirve para usar el plugin en 999 sitios web, proporciona soporte de por vida y actualizaciones del plugin de por vida.
QUIERO CSS HERO
👉¿Por qué usar el plugin CSS Hero para modificar los colores del botón de añadir al carrito de Woocommerce?
- Compatibilidad: he visto que otros plugins para personalizar colores del botón de añadir al carrito de Woocommerce tienen problemas de compatibilidad con muchas plantillas. Por el contrario, CSS Hero funciona con la inmensa mayoría de plantillas. Aquí tienes una lista de las más conocidas . Pero, es compatible con muchísimas más, no tan conocidas.
- Permanencia y seguridad: hace un tiempo hice un post sobre un plugin que servía para modificar los colores del botón de añadir al carrito, pero un tiempo después se quedó desactualizado y ya no servía. CSS Hero, al ser de pago tenemos garantías de que no se va a quedar desactualizado y no vamos a echar por tierra nuestro trabajo.
- Opciones: CSS Hero tiene muchas más opciones de diseño para el botón que cualquier otro plugin que exista en el mercado.
- Visión global: CSS Hero también me va a permitir realizar otras muchas modificaciones de diseño sobre Woocommerce, no solo los colores del botón de añadir al carrito.
👉Modificar el color del botón de añadir al carrito de Woocommerce
Para modificar el color del botón de añadir al carrito de Woocommerce, iremos a “Productos > todos los productos”. Ahora, podemos acceder al editor de CSS Hero de dos maneras posibles:
- a.- Editar con CSS Hero: acerca el ratón a uno de los productos y verás que aparece un enlace que dice: “Customize with CSS Hero”. Puedes hacer clic en este enlace para lanzar el personalizador de CSS Hero.
- b.- Vista previa del producto: otra opción es editar el producto y a continuación hacer una previsualización del mismo (vista previa de los cambios). Hecho esto, verás en la parte superior de la pantalla un enlace que dice: “Customize with CSS Hero” para lanzar el editor de CSS Hero.
Una vez lanzado el personalizador de CSS Hero, moveremos el puntero del ratón y lo pondremos sobre el botón de añadir al carrito de Woocommerce, y haremos clic con el botón izquierdo del ratón para modificar el diseño del botón.
En el menú lateral haremos clic sobre la pestaña “BACKGROUND” (significa: fondo) y haremos clic en el rectángulo para la elección del “color”. Escribiremos el código del color que queramos para el botón. A continuación, haremos clic en “SAVE & PUBLISH”
👉Modificar el color del texto del botón de añadir al carrito de Woocommerce
Para modificar el color del texto que hay dentro del botón haremos clic sobre la pestaña “BACKGROUND” para volver al menú principal.
A continuación, haremos clic en la pestaña “TYPOGRAPHY” y a continuación, haremos clic en el selector de “COLOR”. Estableceremos el color que queramos para el texto del botón y haremos clic en “SAVE & PUBLISH”
👉Modificar el color del botón de añadir al carrito cuando se pone el ratón sobre él
Para modificar el color del botón de añadir el carrito en hover. Es decir, el color que toma el botón cuando ponemos el puntero del ratón sobre él. Haremos clic en la parte superior del menú de CSS Hero, concretamente en el selector que dice “STATE” y seleccionaremos HOVER.
A continuación, volveremos al menú principal haciendo clic en “TYPOGRAPHY”. Haremos clic en la pestaña “BACKGROUND” y estableceremos el color de fondo para la posición hover. Posteriormente, guardaremos en “SAVE & PUBLISH”
Para quitar la opción hover “haremos clic otra vez sobre el selector superior” y seleccionaremos “NONE”.
Me encanta el diseño web y el mundo del ecommerce. Apasionado de Prestashop, Woocommerce/Wordpress y de la formación. Me gustaría que este blog te sirviera de ayuda para poner en marcha e ir mejorando y evolucionando tu tienda online. Ya seas un profesional del sector o no, seguro que encontrarás mucha información de valor e interés aquí.
Hola Joaquín,
Gracias por el tutorial. Tengo una consulta: ¿Con este plugin se puede modificar el menú de cualquier plantilla? Por ejemplo, ¿si yo quisiera poner un efecto de cambio de color on hover (fondo y texto) cuando coloco la flecha del mouse sobre algún elemento del menú, se puede hacer? o ¿es mejor hacerlo con otro método?
Gracias de antemano por tu respuesta.
Saludos.
Buenas.
Yo acabo de realizar una prueba para cambiar el color de los items del menú con CSS Hero, y no he tenido problema ninguno. Lo he realizado con Divi, pero en principio se podrá hacer con cualquier plantilla.
Me gustaría también invitarte, si es posible, a que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!!). En la plataforma tienes cursos sobre WordPress, Cursos sobre Divi, Astra Pro, Elementor, Flatsome, Cursos sobre Woocommerce, Cursos sobre SEO, sobre Mailchimp, blog WordPress, etc. etc.
Gracias Joaquín, me ayudaste mucho con la explicación… Saludos
Buenas,
Me alegro que te haya gustado. ***Me gustaría también invitarte, si es posible, a que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!!). En la plataforma tienes cursos sobre WordPress, Cursos sobreDivi, Astra Pro, Elementor, Flatsome, Cursos sobre Woocommerce, Cursos sobre SEO, sobre Mailchimp, blog WordPress, etc. etc.****
Hola!!
Estoy modificando los colores de mi página storefront y no hay manera de cambiar cabiar el color verde de la barra que sale cuado te diriges al carrito y pone «….se ha añadido a tu carrito», el rojo de «Por favor, introduce un código de cupón» y el azul de «¿Tienes un cupón? Haz clic aquí para introducir tu código».
Me encataría que me ayudaras
Mil gracias
Seguro que sí,
utiliza el plugin que se menciona en el post, ya que es perfectamente compatible con storefront
Hola, gracias por el tutorial!
Una consulta, es posible cambiar el tamaño del boton comprar?? Uso DIVI y Woocommerce. El personalizador de módulo no me funciona con esos botones.
Gracias.
Buenas.
Claro, puedes usar el plugin que se comenta en el post
Hola Joaquín!
Muy buen artículo, me ha servido bastante, sobre todo la parte de colocar el botón de «comprar» en la imagen del producto del módulo tienda.
El único pero, y espero que me puedas ayudar, es que en los productos variables el texto aparece en inglés, y eso me choca bastante… ¿cómo puedo poner «seleccionar opciones» en lugar del «select options» que es lo que me aparece? Muchas gracias anticipadas.
Buenas
Utiliza el plugin que se menciona en el post
Excelente trabajo, felicidades, hay alguna manera de cambiar el texto de los botones «añadir al carrito» y el «ver carrito»
Buenas, el de ver carrito tendrías que cambiarlo con las traducciones de woocommerce, usando por ejemplo Loco Translate
y para modificar el precio y color del precio en la ficha del producto?? (exclusivamente en la ficha de producto no en todo el catálogo de producto sólo en el propio producto cuando entras en cada uno de ellos)
Buenas
Puedes usar el plugin css hero también para eso