Truco Astra: Botón de añadir al carrito sobre la imagen del producto al pasar el cursor

Si te gustan las personalizaciones de tu tienda online es fantástico poder modificar dónde se ve cada elemento de tu Ecommerce, como el botón de añadir al carrito.

En este caso vamos a ver cómo podemos cambiar de sitio el botón de añadir al carrito para que, en vez de estar fuera de la imagen del producto, aparezca sobre la imagen del producto al pasar el cursor sobre ella, junto al botón de vista previa.

¿Qué necesitamos?

Una vez tengamos WooCommerce instalado y nuestros productos, y activado el tema Astra y la extensión Pro ya podemos empezar…

Activar la vista previa

El primer paso es activar la funcionalidad de vista previa de Astra Pro, que encontrarás en el personalizador de WordPress, en la sección WooCommerce -> Catálogo de productos.

Es importante que esté activa sobre la imagen.

Desactivar el botón de añadir al carrito

Curiosamente, para mostrar el botón de añadir al carrito donde nosotros queramos primero hay que desactivarlo.

Para ello ve, de nuevo, a la sección WooCommerce -> Catálogo de productos del personalizador, y haz clic en el icono del ojo para desactivar el botón de añadir al carrito.

Si no hacemos este paso veremos el botón 2 veces, pues ahora lo que haremos será cargar el botón, pero ya bajo nuestro control.

Crear la función de añadir al carrito personalizada

Añade el siguiente código al final del archivo functions.php del tema hijo de Astra y guarda los cambios:

/* Añadir al carrito al pasar cursor sobre imagen */
add_action( 'after_setup_theme', function(){
add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 7 );
});

Añadir el CSS para que el botón se muestre al pasar el cursor sobre la imagen

Y llegamos al último paso, en el que añadiremos el CSS necesario para que el botón de añadir al carrito se muestre junto al de vista previa, al pasar el cursor sobre la imagen de los productos.

Para ello ve de nuevo al personalizador y añade lo siguiente en la sección de CSS adicional:

//Añadir al carrito junto a vista previa al pasar el cursor
.astra-shop-thumbnail-wrap > a.add_to_cart_button {
position: absolute;
opacity: 0;
bottom: 0;
left: 0;
width: 50%;
text-align: center;
min-height: 2em;
background: rgba(0,0,0,.7);
border-radius: 0;
color: #fff;
font-weight: 400;
padding: 5px 10px 2px;
margin: 0!important;
}
.astra-shop-thumbnail-wrap:hover > a.add_to_cart_button {
opacity: 1;
}
.astra-shop-thumbnail-wrap > a.add_to_cart_button:hover {
background-color: #000;
}
.astra-shop-thumbnail-wrap .ast-quick-view-text {
left: auto;
right: 0;
width: 50%;
}
.astra-shop-thumbnail-wrap a.added_to_cart {
display: none!important;
}
@media only screen and (max-width: 921px) {
.astra-shop-thumbnail-wrap > a.add_to_cart_button,
.astra-shop-thumbnail-wrap .ast-quick-view-text {
width: 100%;
}
.astra-shop-thumbnail-wrap > a.add_to_cart_button {
bottom: 28px;
}
}

Y ya está, habremos pasado de esto…

A esto otro…

 

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en los emoticonos para valorarlo!

Promedio de puntuación 5 / 5. Total de votos: 3

Hasta ahora ¡no hay votos!. Sé el primero en valorar este contenido.

Ya que has encontrado útil este contenido...

¡Sígueme en los medios sociales!

¡Siento que este contenido no te haya sido útil!

¡Ayúdame a mejorar este contenido!

Por favor, dime, ¿cómo puedo mejorarlo?

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

Sobre el autor

5 comentarios en “Truco Astra: Botón de añadir al carrito sobre la imagen del producto al pasar el cursor”

  1. Hola Fernando, excelente información.

    Quisiera preguntarte si estas funciones son posibles realizarlas en DIVI. Necesito poner mi botón de añadir al carrito y el de Añadir a la lista de deseos dentro de la imagen del producto.

    Te agradezco mucho si me puedes ayudar con esta consulta.

  2. Hola. Probé realizar el tutorial que presenta en este post pero no me funciona. El carrito si se agrega, pero no el css. Me puede ayudar a encontrar donde estoy fallando?

Deja un comentario

Tu dirección de correo electrónico no será publicada.

Información base sobre privacidad:
  • Responsable: Fernando Tellado ([email protected])
  • Fin del tratamiento: Moderación de comentarios para evitar spam
  • Legitimación: Tu consentimiento
  • Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal
  • Derechos: Acceso, rectificación, portabilidad, olvido

 

Ir arriba
Ir al contenido