eCommerce
Bienvenidos al foro de eCommerce, un espacio interactivo enfocado en WooCommerce, ideal para... Ver más
organizador:
- Organizado por
-
-
Que aparezca botón fijo de agregar al carrito al hacer scroll en móvil
-
Que aparezca botón fijo de agregar al carrito al hacer scroll en móvil
Hola Jefferson,
Hace tiempo que quiero implementar en los ecommerce que tengo realizados con divi y woocommerce, la funcionalidad de que en la versión móvil, cuando haces scroll hacia abajo y desaparece el botón de añadir al carrito, aparezca otro botón fijo en la parte interior que te permita añadir al carrito ese producto en cualquier momento. Lo he visto en otras webs y es algo importante tener siempre visible esa posibilidad. Tienes algún curso o clase sobre esto? Si no es así podrías indicarme como realizarlo?
Gracias y saludos
Albert -
1 Respuesta
-
Hola Albert, un gusto saludarte.
Gracias por tu mensaje y por tu interés en mejorar la funcionalidad de tus eCommerce con Divi y WooCommerce. La funcionalidad que describes es muy útil para mejorar la experiencia del usuario en dispositivos móviles. A continuación, te explicaré cómo puedes implementar un botón fijo de “Añadir al carrito” en la parte inferior de la pantalla cuando se hace scroll hacia abajo.
Paso 1: Añadir el Botón Fijo
Editar el Archivo functions.php: Ve al archivo functions.php de tu tema hijo (child theme) para agregar un código que renderice el botón en la parte inferior de la pantalla, o puedes usar plugins como “code snippet” para agregar el código también:
// Añadir el botón fijo al footer
function add_fixed_add_to_cart_button() {
if (is_product()) {
global $product;
?>
<div id="fixed-add-to-cart">
<a href="add_to_cart_url()); ?>"><?php echo esc_html($product->single_add_to_cart_text()); ?>
</div>
<?php
}
}
add_action('wp_footer', 'add_fixed_add_to_cart_button');
Paso 2: Añadir Estilos CSS
Añadir CSS Personalizado: Ve a Apariencia > Personalizar > CSS Adicional y añade el siguiente código CSS para estilizar y posicionar el botón, estos valores los puedes cambiar por los que desees para personalizar tu botón:
#fixed-add-to-cart {
display: none;
position: fixed;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
z-index: 999;
background-color: #ff6f61; /* Cambia esto por el color que desees */
padding: 10px 20px;
border-radius: 50px;
}
#fixed-add-to-cart a {
color: #fff;
text-decoration: none;
font-size: 16px;
font-weight: bold;
}
@media screen and (max-width: 768px) {
#fixed-add-to-cart {
display: block;
}
}
Paso 3: Añadir JavaScript para Mostrar/Ocultar el Botón
Añadir JavaScript Personalizado: Ve a Divi > Opciones del Tema > Integración y añade el siguiente código JavaScript en la sección “Agregar código a la <head> de tu blog”:
<script>
jQuery(document).ready(function($) {
$(window).scroll(function() {
if ($(window).scrollTop() > 300) { // Ajusta este valor según tus necesidades
$('#fixed-add-to-cart').fadeIn();
} else {
$('#fixed-add-to-cart').fadeOut();
}
});
});
</script>
Con estos pasos, habrás implementado un botón fijo de “Añadir al carrito” que aparecerá en la parte inferior de la pantalla cuando el usuario haga scroll hacia abajo en la versión móvil. Este botón mejorará la accesibilidad y la experiencia del usuario en tus tiendas online.
Actualmente, no tenemos un curso específico que cubra esta funcionalidad, pero con los pasos anteriores deberías poder implementarlo sin problemas. Si necesitas más asistencia o tienes alguna otra pregunta, estamos acá para ayudar 😊🖐
Inicia sesión para responder.
