Seleccionar página

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


VER CURSOS

 

 

 

 

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.

QUIERO CSS HERO

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.

 

cambiar color botón añadir al carrito con 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”

 

cambiar color botón añadir al carrito de woocommerce

 

 

👉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.

 

cambiar color hover boton añadir al carrito de woocommerce

 

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”.

 

 

 

Compártelo ya!!

ACCEDE A TODOS MIS CURSOS POR SOLO 10€/MES

1.- CURSO CLAVES PARA CREAR UNA TIENDA ONLINE DE ÉXITO (9 Clases)
2.- CURSO PRESTASHOP (56 Clases)
3.- CURSO WOOCOMMERCE (39 Clases)
4.- CURSO ACTUALIZACIONES Y SEGURIDAD PRESTASHOP (7 Clases)
5.- CURSO ACTUALIZACIONES Y SEGURIDAD WORDPRESS (9 Clases)
6.- CURSO SEO TIENDAS ONLINE (12 Clases)
7.- CURSO PLANTILLA WAREHOUSE (26 Clases)
8.- CURSO PLANTILLA FLATSOME (36 Clases)
9.- MC: GOOGLE ANALYTICS PARA ECOMMERCE
10.- CURSO SUSCRIPTORES PRESTASHOP (7 Clases)
11.- CURSO BLOG PRESTASHOP (12 Clases)
12.- CURSO WORDPRESS (44 Clases)
ETC. ETC.
*** ADEMÁS TIENES MI SOPORTE VÍA EMAIL***

IR A LOS CURSOS

You have Successfully Subscribed!

Abrir chat
¿Dudas sobre mis cursos o servicios?
🙋🏻‍♂️** ¿Alguna duda sobre mis cursos o servicios? Soy Joaquín, cuéntame y te ayudo encantado
**Accede a TODOS mis cursos por solo 10 €/mes desde cursotiendaonline.com