Ofrecer una experiencia de usuario excepcional es crucial para atraer y retener clientes. En este artículo, veremos una solución elegante y eficiente para mejorar la experiencia de compra en tu tienda WooCommerce: un botón fijo en el footer con un icono de carrito que muestra un popup con los detalles del carrito. Esta funcionalidad no solo mejora la usabilidad del sitio, sino que también reduce la dependencia de plugins adicionales, haciendo que tu sitio sea más ligero y rápido.
El botón fijo permite a los clientes acceder fácilmente a su carrito desde cualquier página del sitio, brindándoles una experiencia de compra más fluida y cómoda. Al hacer clic en el botón, aparece un popup que muestra todos los productos en el carrito, con detalles como la imagen, título, cantidad y precio de cada producto, así como el total del pedido. Además, los clientes pueden eliminar productos directamente desde el popup y acceder rápidamente a las páginas de carrito y finalización de compra mediante botones dedicados.
Una de las principales ventajas de implementar esta funcionalidad es la mejora en la interacción del cliente con el sitio. Los compradores pueden revisar y gestionar su carrito de manera más eficiente sin tener que navegar lejos de la página en la que se encuentran, lo cual puede ayudar a reducir la tasa de abandono del carrito. Además, al proporcionar una forma rápida y accesible de ver y modificar el carrito, se crea una experiencia de compra más intuitiva y agradable.
Otra ventaja significativa es la reducción en el uso de plugins adicionales. Muchos plugins de carrito pueden ser pesados y afectar negativamente el rendimiento de tu sitio web. Al incorporar esta funcionalidad directamente en el código de tu tema, evitas la carga adicional de plugins, lo que resulta en un sitio más rápido y receptivo. Esto no solo mejora la experiencia del usuario, sino que también puede beneficiar tu SEO y reducir los costos de mantenimiento a largo plazo.
El siguiente código tienes que agregarlo en el functions.php de tu tema hijo o utilizar un plugin como CODE SNIPPETS.
// Agregar FontAwesome para los iconos
function agregar_font_awesome() {
wp_enqueue_style( 'font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css' );
}
add_action( 'wp_enqueue_scripts', 'agregar_font_awesome' );
// Agregar estilos y scripts personalizados
function agregar_estilos_scripts_personalizados() {
?>
<style>
.footer-cart-button {
position: fixed;
bottom: 20px;
right: 20px;
background-color: #333;
color: #fff;
padding: 10px 15px;
border-radius: 50px;
cursor: pointer;
z-index: 999;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
}
.footer-cart-button i {
font-size: 20px;
}
.footer-cart-button .cart-count {
position: absolute;
top: -10px;
right: -10px;
background: red;
color: white;
border-radius: 50%;
padding: 2px 6px;
font-size: 12px;
}
.footer-cart-popup {
display: none;
position: fixed;
bottom: 70px;
right: 20px;
width: 300px;
max-height: 400px; /* Limitar la altura del popup */
background: #fff;
border: 1px solid #ddd;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
z-index: 1000;
padding: 15px;
border-radius: 5px;
font-size: 12px; /* Reducir el tamaño de la tipografía */
overflow-y: auto; /* Agregar scroll vertical */
}
.footer-cart-popup ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer-cart-popup li {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
align-items: center;
}
.footer-cart-popup li img {
max-width: 40px;
margin-right: 10px;
}
.footer-cart-popup .cart-product-info {
display: flex;
align-items: center;
flex-grow: 1;
margin-right: 10px; /* Agregar margen entre el precio y el icono de eliminar */
}
.footer-cart-popup .cart-product-info a {
text-decoration: none;
color: #000;
}
.footer-cart-popup .cart-product-info a:hover {
text-decoration: underline;
}
.footer-cart-popup .remove-product {
color: #2872FA;
cursor: pointer;
}
.footer-cart-popup .footer-cart-total {
margin-top: 10px;
font-weight: bold;
text-align: right;
}
.footer-cart-popup .footer-cart-buttons {
display: flex;
justify-content: space-between;
margin-top: 15px;
}
.footer-cart-popup .footer-cart-buttons a {
text-decoration: none;
background-color: #333;
color: #fff;
padding: 10px 15px;
border-radius: 5px;
text-align: center;
flex: 1;
margin: 0 2px; /* Reducir margen entre botones */
white-space: nowrap; /* Evitar que el texto se divida en varias líneas */
}
.shake {
animation: shake 0.5s;
}
@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
</style>
<script>
jQuery(document).ready(function($) {
// Función para actualizar el contenido del carrito en el popup
function actualizarPopupCarrito() {
$.ajax({
url: '<?php echo admin_url('admin-ajax.php'); ?>',
type: 'POST',
data: {
action: 'actualizar_popup_carrito'
},
success: function(response) {
$('.footer-cart-popup').html(response);
}
});
}
// Mostrar y ocultar popup al hacer clic en el botón del carrito
$('.footer-cart-button').on('click', function() {
$('.footer-cart-popup').toggle();
});
// Eliminar producto del carrito
$(document).on('click', '.remove-product', function(e) {
e.preventDefault();
var product_id = $(this).data('product_id');
$.ajax({
url: '<?php echo admin_url('admin-ajax.php'); ?>',
type: 'POST',
data: {
action: 'remove_from_cart',
product_id: product_id
},
success: function(response) {
actualizarPopupCarrito();
actualizarCantidadCarrito();
}
});
});
// Actualizar la cantidad de productos en el botón del carrito
function actualizarCantidadCarrito() {
$.ajax({
url: '<?php echo admin_url('admin-ajax.php'); ?>',
type: 'POST',
data: {
action: 'actualizar_cantidad_carrito'
},
success: function(response) {
$('.footer-cart-button .cart-count').text(response);
}
});
}
// Actualizar la cantidad de productos y el contenido del popup al cargar la página
actualizarCantidadCarrito();
actualizarPopupCarrito();
// Detectar cuando se agrega un producto al carrito
$('body').on('added_to_cart', function() {
$('.footer-cart-button').addClass('shake');
setTimeout(function() {
$('.footer-cart-button').removeClass('shake');
}, 500);
actualizarCantidadCarrito();
actualizarPopupCarrito();
});
});
</script>
<?php
}
add_action( 'wp_footer', 'agregar_estilos_scripts_personalizados' );
// Agregar botón de carrito en el footer
function agregar_boton_carrito_footer() {
?>
<div class="footer-cart-button">
<i class="fas fa-shopping-cart"></i>
<span class="cart-count"><?php echo WC()->cart->get_cart_contents_count(); ?></span>
</div>
<div class="footer-cart-popup"></div>
<?php
}
add_action( 'wp_footer', 'agregar_boton_carrito_footer', 30 );
// Acción para eliminar producto del carrito
function remove_product_from_cart() {
$product_id = intval($_POST['product_id']);
foreach ( WC()->cart->get_cart() as $cart_item_key => $cart_item ) {
if ( $cart_item['product_id'] == $product_id ) {
WC()->cart->remove_cart_item( $cart_item_key );
break;
}
}
echo 'Producto eliminado';
wp_die();
}
add_action( 'wp_ajax_remove_from_cart', 'remove_product_from_cart' );
add_action( 'wp_ajax_nopriv_remove_from_cart', 'remove_product_from_cart' );
// Acción para actualizar el contenido del popup del carrito
function actualizar_popup_carrito() {
ob_start();
?>
<ul>
<?php
foreach ( WC()->cart->get_cart() as $cart_item_key => $cart_item ) {
$_product = $cart_item['data'];
$product_permalink = $_product->get_permalink();
echo '<li>';
echo '<div class="cart-product-info">';
echo $_product->get_image();
echo '<span><a href="' . $product_permalink . '">' . $_product->get_name() . '</a> x ' . $cart_item['quantity'] . '</span>';
echo '</div>';
echo '<span style="margin-right: 5px;">' . WC()->cart->get_product_subtotal( $_product, $cart_item['quantity'] ) . '</span>';
echo '<a href="#" class="remove-product" data-product_id="' . $cart_item['product_id'] . '"><i class="fas fa-trash"></i></a>';
echo '</li>';
}
?>
</ul>
<div class="footer-cart-total">
<?php _e( 'Total:', 'woocommerce' ); ?> <?php echo WC()->cart->get_cart_total(); ?>
</div>
<div class="footer-cart-buttons">
<a href="<?php echo wc_get_cart_url(); ?>">Ir al Carrito</a>
<a href="<?php echo wc_get_checkout_url(); ?>">Finalizar Compra</a>
</div>
<?php
echo ob_get_clean();
wp_die();
}
add_action( 'wp_ajax_actualizar_popup_carrito', 'actualizar_popup_carrito' );
add_action( 'wp_ajax_nopriv_actualizar_popup_carrito', 'actualizar_popup_carrito' );
// Acción para actualizar la cantidad de productos en el carrito
function actualizar_cantidad_carrito() {
echo WC()->cart->get_cart_contents_count();
wp_die();
}
add_action( 'wp_ajax_actualizar_cantidad_carrito', 'actualizar_cantidad_carrito' );
add_action( 'wp_ajax_nopriv_actualizar_cantidad_carrito', 'actualizar_cantidad_carrito' );
// Cargar jQuery
/*
function load_cdn_jquery() {
if (!wp_script_is('jquery', 'enqueued')) {
wp_enqueue_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js', [], null, true);
}
}
add_action('wp_enqueue_scripts', 'load_cdn_jquery');
*/
Lenguaje del código: PHP (php)Entendiendo el Código
1. Agregar FontAwesome
La primera parte del código agrega la biblioteca FontAwesome al sitio web, permitiendo el uso de iconos en el botón del carrito y otros elementos. Esto se hace mediante la función wp_enqueue_style, que carga el CSS de FontAwesome desde una CDN, asegurando que los iconos estén disponibles para su uso.
2. Agregar Estilos y Scripts Personalizados
En esta sección, se añaden estilos CSS personalizados y scripts JavaScript para gestionar la funcionalidad del botón y el popup del carrito. Los estilos definen la apariencia del botón fijo en el footer, incluyendo su posición, colores, y bordes redondeados. También se especifica el estilo del popup, incluyendo su tamaño máximo, bordes, y comportamiento de desplazamiento para manejar contenido extenso.
El script JavaScript adjunto se encarga de varias funciones clave:
- Mostrar y ocultar el popup del carrito: Al hacer clic en el botón del carrito, se alterna la visibilidad del popup.
- Eliminar productos del carrito: Se añade un evento de clic al icono de eliminación en el popup. Cuando se hace clic, se envía una solicitud AJAX para eliminar el producto correspondiente del carrito y actualizar el contenido del popup.
- Actualizar la cantidad de productos en el botón del carrito: Se utiliza AJAX para obtener y mostrar la cantidad actual de productos en el carrito en un globo sobre el botón.
- Actualizar el contenido del popup: Cada vez que se agrega o elimina un producto, el contenido del popup se actualiza dinámicamente mediante una solicitud AJAX.
3. Agregar el Botón del Carrito en el Footer
Esta parte del código agrega el botón del carrito fijo en el footer de todas las páginas del sitio. El botón incluye un icono de carrito y un globo que muestra la cantidad de productos en el carrito. Este botón es clave para la funcionalidad, ya que permite a los usuarios acceder rápidamente al contenido de su carrito desde cualquier página.
4. Acción para Eliminar Producto del Carrito
Se define una acción AJAX (remove_from_cart) para manejar la eliminación de productos del carrito. Esta acción recibe el ID del producto a eliminar, busca el producto en el carrito y lo elimina. Luego, devuelve una respuesta para indicar que la operación fue exitosa.
5. Acción para Actualizar el Contenido del Popup del Carrito
Otra acción AJAX (actualizar_popup_carrito) se encarga de generar el contenido HTML del popup del carrito, incluyendo la lista de productos, el total del pedido, y los botones para ir al carrito y finalizar la compra. Esta acción se llama cada vez que se agrega o elimina un producto, garantizando que el contenido del popup esté siempre actualizado.
6. Acción para Actualizar la Cantidad de Productos en el Carrito
Finalmente, se define una acción AJAX (actualizar_cantidad_carrito) que obtiene y devuelve la cantidad actual de productos en el carrito. Esta acción se llama al cargar la página y cada vez que se modifica el contenido del carrito, asegurando que el globo sobre el botón del carrito muestre la cantidad correcta de productos.
Conclusión
Implementar un botón fijo en el footer que despliega un popup con los detalles del carrito en una tienda WooCommerce es una mejora significativa en la experiencia del usuario. Esta funcionalidad permite a los clientes gestionar sus compras de manera más eficiente y accesible, reduciendo la necesidad de navegar entre páginas para revisar su carrito. Además, al integrar esta funcionalidad directamente en el código del tema, se evita la sobrecarga de plugins adicionales, manteniendo el sitio ligero y rápido.
Nos vemos en el siguiente tutorial.
Un saludo.
Deja tus opiniones o dudas en los comentarios.