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?

• WooCommerce
• Tema Astra (gratis)
• Extensión Astra Pro (premium)

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…

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