Cerrar video

Mostrar el botón añadir al carrito al pasar el cursor (estado hover) sobre los productos en divi

por | Mar 2, 2021 | Tutorial gratuito | 3 Comentarios

Cómo mostrar el botón añadir al carrito al pasar el cursor (estado hover) sobre los productos en divi.

Este tutorial no es tan complicado de realizar pero realmente te puede ser útil si deseas mostrar el botón de “añadir al carrito” sobre los productos en tu tienda de woocommerce hecha con divi.

Por defecto es una opción que no se puede realizar o habilitar desde el módulo tienda de divi, así que en este breve tutorial te mostraré cómo realizarlo con dos fragmentos de código, el primero; un fragmento de código PHP para mostrar el botón y el segundo; un fragmento de código CSS para colocar el botón por encima de los productos y que este solamente se muestre en su estado hover, es decir, al pasar el cursor sobre cada producto de la tienda.

Mostrar el botón añadir al carrito al pasar el cursor (estado hover) sobre los productos en divi

A continuación te dejo los dos fragmentos que necesitamos y si no sabes dónde colocarlos te invito a darle play al video…

1. Fragmento PHP para mostrar el botón “Añadir al carrito” al módulo tienda:

// Agregar botón de "añadir al carrito" en los productos del módulo tienda
add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 20 );

2. Código CSS para mostrar el botón “añadir al carrito” al pasar el cursor sobre cada producto.

/* Mostrar botón añadir al carrito en hover */
.woocommerce ul.products li.product {
    overflow: hidden;
}

.woocommerce ul.products li.product:hover .button {
    visibility: visible;
    transform: translatey(0px);
    transition: 0.35s;
    opacity: 1;
}

.woocommerce ul.products li.product .button {
    font-size: 12px;
    line-height: 15px;
    padding: 8px 12px;
    min-height: 15px;
    font-weight: bold;
    text-transform: uppercase;
}

@media (min-width: 768px) {
    .woocommerce ul.products li.product .button {
        position: absolute;
        bottom: 70px;
        margin-left: 10px !important;
        visibility: hidden;
        transform: translatey(0);
        transition: 0.35s;
        opacity: 0;
    }
	
    .woocommerce ul.products li.product:hover .button {
        transform: translatey(-10px) !important;
	}
}

3 Comentarios

  1. Santiago

    Hola Oscar!!
    He añadido el primer código al archivo “functions.php” y no funciona. Tal vez hago algo mal…Muchas gracias desde España

    Responder
    • Oscar Viedma

      Hola Santiago, debe funcionar tanto en el archivo functions.php cómo con el plugin Code Snippets.

      Responder
      • Santiago

        Gracias amigo Óscar, ya me funciona, pero con un pequeño detalle, que en una categoría de productos en lugar de “añadir al carrito”, me aparece “leer más”…
        Veo tus videos y me gustan mucho. Eres un tipo Genial!!!
        Es posible añadir “leer más” en Hover?
        Gracias otra vez

        Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Tutoriales Exclusivos

Tutoriales exclusivos OV Divi

Lleva tus sitios web creados con divi al siguiente nivel.

Accede a tutoriales exclusivos y únicos de divi y saca el máximo provecho del mejor tema y constructor visual para WordPress.

$6 USD / mes

Pin It on Pinterest