Seleccionar página

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.

 

Si quieres MÁS sobre ASTRA, WORDPRESS, WOOCOMMERCE, TIENDAS ONLINE Y SEO, APÚNTATE a MI ACADEMIA ONLINE: cursotiendaonline.com
IR A MI ACADEMIA

 

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”

 

Menu apariencia > personalizar Astra

 

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

 

Cambiar forma botones con Astra

 

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

Si quieres MÁS sobre ASTRA, WORDPRESS, WOOCOMMERCE, TIENDAS ONLINE Y SEO, APÚNTATE a MI ACADEMIA ONLINE: cursotiendaonline.com
IR A MI ACADEMIA

 

 

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.

 

Cambiar color botones de Astra

 

Si quieres MÁS sobre ASTRA, WORDPRESS, WOOCOMMERCE, TIENDAS ONLINE Y SEO, APÚNTATE a MI ACADEMIA ONLINE: cursotiendaonline.com
IR A MI ACADEMIA

 

Paleta de colores botones con el tema Astra

 

 

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.

 

Colores del botón al pasar el ratón con Astra

 

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.

 

 

Compártelo ya!!
Curso gratis de wordpress y divi

▷LLÉVATE EL CURSO WORDPRESS Y DIVI GRATIS

Aprende a crear una página web con Wordpress y Divi

22 vídeos gratis

Consentimiento

Vé a tu buzón de correo y confirma la suscripción. Si no encuentras el correo de confirmación mira en la carpeta de SPAM.

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