Vamos a ver en este post + VÍDEO, cómo cambiar el color del botón de añadir al carrito de Woocommerce. Así como, cambiar el texto del botón de añadir al carrito. 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.

El texto del botón añadir al carrito de Woocommerce lo cambiaremos con un plugin Button customizer for 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”.

 

 

 

✅ Modificar el texto del botón de añadir al carrito de Woocommerce.

 

Para modificar el texto que aparece en el botón de añadir al carrito de Woocommerce, vamos a usar un plugin gratuito denominado: Custom Buttons for WooCommerce – Add To Cart

IR AL PLUGIN

 

Una vez instalado podemos acceder a la configuración del plugin desde: “Woocommerce > Button Customizer”

 

La configuración del módulo es muy sencilla. Vamos a echar un vistazo a las opciones:

Enable Customizer: debemos marcar esta opción para que el plugin “funcione”. Si desmarcamos este checkbox el plugin quedará “desactivado”.

Change button on: estableceremos donde queremos que se muestre el texto personalizado. En la ficha de productos (single product) o en la página de tienda y categorías (shop & Archive Page). Si marcamos los 2 checkbox, pues el texto personalizado para el botón de añadir al carrito de Woocommerce se mostrará en tanto en la ficha de producto, en la página de tienda, como en cualquier otro sitio donde se listen los productos (categorías, página de inicio, etc.)

Simple product: aquí pondremos el texto que queremos que aparezca en el botón de añadir al carrito en el caso de productos simples

Variable product: aquí pondremos el texto que queremos que aparezca en el botón de añadir al carrito en el caso de productos variables o con combinaciones.

A continuación tenemos otras opciones menos habituales para cambiar el texto en productos de afiliados, packs de productos, productos reservables con el plugin Woocommerce booking, etc.

 

cambiar textos botones añadir al carrito