Ofrecer una experiencia de compra fluida y eficiente es esencial para retener a los clientes y aumentar las conversiones. Una de las características que puede marcar una gran diferencia es la capacidad de los usuarios de visualizar rápidamente los detalles de un producto sin tener que abandonar la página actual. Esto no solo ahorra tiempo a los clientes, sino que también reduce la fricción en el proceso de compra, lo que puede traducirse en un aumento de las ventas.
Aunque existen numerosos plugins de «quick view» o «vista rápida» disponibles en el repositorio de WordPress, muchos de ellos suelen incluir demasiado código innecesario o requieren la versión pro para acceder a ciertas funcionalidades avanzadas. La ventaja de utilizar el código que presento aquí es que se carga el producto en un iframe, lo que no solo ahorra mucho código, sino que también mejora el rendimiento de tu sitio al mantener el contenido aislado y optimizado.
El código añade un botón de «Vista Rápida» en las páginas de archivo de productos de WooCommerce. Al hacer clic en este botón, se abre un popup que muestra un iframe con los detalles del producto, incluyendo la galería de imágenes, el precio, la descripción, las valoraciones y, si el producto es variable, la posibilidad de seleccionar las variaciones disponibles. Desde este popup, los usuarios pueden añadir el producto al carrito directamente, todo sin abandonar la página actual.
Implementación del Botón de Vista Rápida y el Popup
El código se divide en varias partes esenciales para lograr esta funcionalidad:
- Agregar el botón de Vista Rápida: Se inserta un botón junto al botón de «Añadir al carrito» en las páginas de archivo de productos.
- Crear el popup de Vista Rápida: Se define la estructura HTML del popup que mostrará el contenido del producto.
- Incluir scripts de JavaScript: Se añaden scripts para manejar la apertura y cierre del popup y ajustar el contenido del iframe.
- Incluir estilos CSS: Se definen los estilos necesarios para el popup y el botón de Vista Rápida.
El siguiente código tienes que agregarlo en el functions.php de tu tema hijo o utilizar un plugin como CODE SNIPPETS.
// Añadir botón de Vista Rápida junto al botón Añadir al carrito
function add_quick_view_button() {
global $product;
echo '<a href="#" class="button quick-view-button" data-product_url="' . get_permalink($product->get_id()) . '" style=""> Ver Producto</a>';
}
add_action('woocommerce_after_shop_loop_item', 'add_quick_view_button', 15);
// Crear el popup de Vista Rápida
function quick_view_popup_html() {
?>
<div id="quick-view-popup" style="display:none;">
<div class="quick-view-content">
<a href="#" class="close-quick-view">X</a>
<iframe id="quick-view-iframe" src="" width="100%" height="600px"></iframe>
</div>
</div>
<?php
}
add_action('wp_footer', 'quick_view_popup_html');
// Incluir scripts de JavaScript
function enqueue_quick_view_scripts() {
?>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('.quick-view-button').on('click', function(e) {
e.preventDefault();
var product_url = $(this).data('product_url');
$('#quick-view-iframe').attr('src', product_url);
$('#quick-view-popup').fadeIn();
});
$('.close-quick-view').on('click', function(e) {
e.preventDefault();
$('#quick-view-popup').fadeOut();
});
$('#quick-view-iframe').on('load', function() {
var iframe = this;
var iframeContent = $(iframe).contents();
iframeContent.find('header, footer').hide();
iframeContent.find('.woocommerce-product-gallery').wrap('<div class="custom-gallery-wrapper"></div>');
iframeContent.find('.custom-gallery-wrapper').css({
'max-width': '300px', // Ajusta el tamaño según tus necesidades
'margin': '0 auto',
'overflow': 'hidden'
});
iframeContent.find('.woocommerce-product-gallery img').css({
'max-width': '100%',
'height': 'auto'
});
});
</script>
<?php
}
add_action('wp_footer', 'enqueue_quick_view_scripts');
// Incluir estilos CSS
function add_quick_view_styles() {
$custom_css = "
/* Estilos para el popup de Vista Rápida */
#quick-view-popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
max-width: 900px;
background: #fff;
z-index: 9999;
border: 1px solid #ccc;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
padding: 20px;
}
.quick-view-content {
position: relative;
}
.close-quick-view {
position: absolute;
top: 20px;
right: 10px;
text-decoration: none;
color: #333;
font-size: 18px;
}
/* Estilos para el botón de Vista Rápida */
.quick-view-button {
display: inline-block;
padding: 0.5em;
font-size: 1em;
line-height: 1;
border: none;
background: transparent;
cursor: pointer;
vertical-align: middle;
width:150px;
}
";
wp_add_inline_style('wp-block-library', $custom_css);
}
add_action('wp_enqueue_scripts', 'add_quick_view_styles');
Lenguaje del código: PHP (php)Entendiendo el Código
1. Agregar el Botón de Vista Rápida
Para añadir un botón de «Vista Rápida» junto al botón de «Añadir al carrito» en las páginas de archivo de productos, se utiliza el hook woocommerce_after_shop_loop_item. Este código inserta un botón adicional que contiene un enlace a la página del producto. La función add_quick_view_button genera un enlace con la clase quick-view-button y un atributo data-product_url que contiene la URL del producto actual. El hook woocommerce_after_shop_loop_item asegura que el botón se añade después del contenido de cada producto en el loop de la tienda, con una prioridad de ejecución de 15.
2. Crear el Popup de Vista Rápida
Se define la estructura HTML del popup que se utilizará para mostrar el contenido del producto. Este popup estará inicialmente oculto. El contenedor div #quick-view-popup contiene el contenido del popup y está oculto por defecto con display:none. Dentro de este div, hay un enlace con la clase close-quick-view que sirve para cerrar el popup, y un iframe con la clase #quick-view-iframe que se utiliza para cargar la URL del producto seleccionado.
3. Incluir Scripts de JavaScript
Se añaden scripts de JavaScript para manejar la apertura y cierre del popup y para ajustar el contenido del iframe. Cuando el usuario hace clic en el botón de «Vista Rápida», se evita el comportamiento predeterminado del enlace, se obtiene la URL del producto desde el atributo data-product_url, y se carga esta URL en el iframe dentro del popup, que luego se muestra al usuario. También se maneja el evento de clic en el enlace de cierre para ocultar el popup. Una vez que el iframe ha cargado el contenido, se ocultan elementos innecesarios como el encabezado y el pie de página, y se ajusta la galería de productos para mejorar la presentación dentro del popup.
4. Incluir Estilos CSS
Finalmente, se añaden los estilos CSS necesarios para el popup y el botón de Vista Rápida. Los estilos aseguran que el popup esté centrado en la pantalla, tenga un fondo blanco, y esté rodeado por una sombra para destacarse. El contenido del popup tiene una posición relativa para permitir el posicionamiento absoluto del botón de cierre. El botón de Vista Rápida se diseña para parecerse a un botón estándar de WooCommerce, con ajustes adicionales para asegurar que se integre bien con el diseño del tema utilizado.
Conclusión
Implementar una funcionalidad de «Vista Rápida» puede mejorar significativamente la experiencia de compra de tus clientes, permitiéndoles tomar decisiones más rápidas y cómodas. Con el código proporcionado, puedes añadir fácilmente esta característica a tu tienda WooCommerce, optimizando el proceso de compra y potencialmente aumentando tus conversiones. Esta implementación personalizada no solo evita la sobrecarga de código innecesario que suelen tener muchos plugins, sino que también ofrece una solución eficiente al cargar los detalles del producto en un iframe, mejorando el rendimiento y la usabilidad del sitio.
Nos vemos en el siguiente tutorial.
Un saludo.
Deja tus opiniones o dudas en los comentarios.