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
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