Cómo cambiar forma y color del botón de añadir al carrito con ASTRA

En este post te voy a mostrar cómo cambiar la forma y color del botón de añadir al carrito usando el tema Astra y Woocommerce.

Te hablo tanto del botón de añadir al carrito que se muestra en la ficha de producto como de los botones que se muestran en la página tienda o las categorías, debajo de cada producto.

Es normal que quieras poner un color más afín a tus colores corporativos, un color especial para tus CTAs, y quitar el color azul por defecto que Astra incluye en todos los botones.

ACCEDE A TODOS MIS CURSOS ONLINE POR SOLO 10€/MES

VER CURSOS

Cómo cambiar la forma del botón de añadir al carrito con Astra

Para cambiar la forma del botón de añadir al carrito con el tema Astra accede a la administración de WordPress y después ve en el menú lateral a: “Apariencia > Personalizar”

A continuación, dirígete a: “Global > Botones”

En la parte superior, justo debajo de “Preajustes del botón” podrás elegir entre diferentes formas para el botón: rectangular, con esquinas con un poco de curva y con semicircunferencia en los laterales.

En la parte superior tienes botones rellenos y en la inferior botones sin color de fondo o relleno.

NOTA: Te recomiendo los colores rellenos, porque he encontrado algún problema con los que no tienen rellenos, por lo menos en la versión de Astra que he probado

Finalmente haz clic en “Publicar” para guardar los cambios.

Cómo cambiar el color del botón de añadir al carrito con Astra

Para cambiar el color de los botones habrás de ir como en el apartado anterior a: “Apariencia > Personalizar” y después a: “Global > Botones”.

En la parte superior del menú lateral, justo debajo de las diferente formas o tipologías de botón tienes los siguientes selectores:

• Color de texto: haz clic en la esfera situada a la izquierda y establece el color del texto que aparece dentro del botón. Es decir, del texto “Añadir al carrito”
• Color de fondo: clic en el círculo situado más a la izquierda y establece el color de fondo del botón.
• Color del borde: con este selector podrás establecer un color para la línea de borde del botón. Lo más habitual es dejarla transparente o del mismo color del fondo del botón.

Establecer el color al pasar el ratón sobre el botón (color on hover)

Y te estarás preguntando

¿Para qué sirve la segunda esfera que hay en los tres selectores? Es decir, la esfera situada a la derecha.

Pues bien, esta esfera sirve para establecer un color “on hover”, que traducido al español significa un color al poner el ratón sobre el botón (sin hacer clic).

Así, que podrás establecer un color “on hover” para los tres parámetros de colores del botón: texto, relleno y borde.

El efecto puede ser interesante para llamar la atención del cliente en caso de que el color del botón no sea demasiado llamativo.

Finalmente guarda los cambios haciendo clic en el botón “Publicar” situado arriba del todo.