Avisos
Vaciar todo

Como añadir al carrito de compra en la miniatura del producto en la categoría de producto en woocommerce  

 
Jose
 Jose
Usuario activo

Hola que tal,

Estoy intentando que al pasar el pulsor por la imagen de una miniatura de producto en woocommerce en la pagina de categorías salga el botón de añadir al carrito pero no se como hacerlo, la web que tengo como referencia es la siguiente: https://www.mimbreyplastico.com/comprar/cestas-de-mimbre/ si te fijas cuando pasas el pulsor por un producto sale un botón de añadir al carrito . Mi web es la siguiente: https://cesteriaesga.com/categoria-producto/cestas/cestas-de-mimbre/cestas-de-mimbre-para-setas/

Contenido solo visible a usuarios registrados

Citar
Respondido : 14/11/2024 10:48 am
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Jose.

Añade lo siguiente al plugin de Fragmentos de código que veo que utilizas:

add_action('woocommerce_before_shop_loop_item_title', function () {
global $product;
echo '<div class="add-to-cart-bottom">';
echo woocommerce_template_loop_add_to_cart();
echo '</div>';
}, 10);

 

Añade lo siguiente en Apariencia -> Personalizar -> CSS Adicional:

/* Contenedor del botón */
.add-to-cart-bottom {
position: absolute;
bottom: 10px; /* Separación desde la parte inferior */
left: 50%;
transform: translateX(-50%); /* Centra el botón horizontalmente */
opacity: 0; /* Oculto inicialmente */
visibility: hidden; /* Oculto inicialmente */
z-index: 10;
transition: opacity 0.3s ease, visibility 0.3s ease;
white-space: nowrap; /* Evita que el texto se divida en varias líneas */
overflow: hidden; /* Oculta cualquier contenido que exceda el ancho del botón */
text-overflow: ellipsis; /* Añade puntos suspensivos si el texto es demasiado largo */
}

/* Mostrar el botón al hacer hover */
.woocommerce ul.products li.product:hover .add-to-cart-bottom {
opacity: 1;
visibility: visible;
}

/* Estilo del botón */
.add-to-cart-bottom .button {
background-color: transparent; /* Sin fondo */
color: #0071a1; /* Color del texto */
border: 2px solid #0071a1; /* Borde del botón */
padding: 8px 16px;
border-radius: 5px;
text-transform: uppercase;
font-weight: bold;
transition: background-color 0.3s ease, color 0.3s ease;
}

.add-to-cart-bottom .button:hover {
background-color: #0071a1; /* Fondo al pasar el cursor */
color: #fff; /* Texto en blanco */
}
.woocommerce ul.products li.product {
position: relative;
overflow: hidden; /* Asegura que los elementos no sobresalgan */
}

Vacia la cache y lo revisas.

 

Un Saludo

ResponderCitar
Respondido : 14/11/2024 12:04 pm