Vista rápida en WooCommerce: modal de producto por AJAX

Navegar por un catálogo de WooCommerce se convierte a menudo en un bucle agotador: hacer clic en un producto, esperar a la página, mirarla, volver atrás, hacer clic en el siguiente, esperar de nuevo. Cada bucle es una carga de página completa y un cambio de contexto, y cada bucle es una oportunidad para que la clientela pierda el hilo o el interés. La vista rápida rompe ese bucle. Abre lo esencial en un modal que arranca directamente desde la vista de lista, de modo que los clientes pueden comparar opciones y comprar sin el constante ir y venir. Esta guía explica qué es la vista rápida, por qué ayuda, qué necesita una buena implementación y cómo el plugin gratuito Peek la añade a WooCommerce.

Qué es la vista rápida

La vista rápida muestra los detalles más importantes de un producto en un modal que se abre desde la lista de la tienda o del archivo, sin navegar a la página de producto completa. La clientela hace clic en un botón de la tarjeta de producto, un diálogo se abre sobre la página, revisa el producto, lo añade al carrito o cierra el diálogo y sigue navegando exactamente donde lo dejó en la lista.

Un modal de vista rápida útil lleva los detalles que un cliente necesita para decidir:

• la imagen del producto y las miniaturas de la galería
• el título y el SKU
• el precio, incluido cualquier precio de oferta
• el estado de stock
• una descripción breve
• el formulario de carrito, incluida la selección de variante en productos variables
• un enlace a la página de producto completa para todo lo que el modal no muestra

El propósito no es reemplazar la página de producto. La página de producto sigue existiendo para quien quiera ver la descripción completa, las valoraciones y cada detalle. La vista rápida está pensada para el momento mucho más frecuente, más temprano en el recorrido de compra, cuando la clientela revisa una categoría y sopesa varios productos entre sí. En ese momento, abrir un modal ligero es notablemente más rápido que comprometerse con una carga de página completa por cada candidato.

Por qué ayuda

La vista rápida elimina la fricción de navegación justo en el punto en el que los clientes comparan opciones, y eso tiene algunos efectos concretos.

Comparación más rápida. Revisar cinco productos en cinco modales es más rápido y menos disruptivo que cargar cinco páginas completas una tras otra y volver a abandonarlas. La lista permanece en pantalla todo el tiempo, de modo que la clientela conserva su posición de desplazamiento y su orientación.

Menos rebotes. Cada carga de página completa es un momento en el que la atención puede desviarse o una conexión lenta puede frustrar. Mantener a la clientela en la vista de lista preserva el flujo de navegación, en lugar de dispersarla por varias páginas y pestañas.

Un camino más corto al carrito. Cuando añadir al carrito está en el modal, la clientela compra sin ninguna carga de página adicional. Abre, elige una talla, añade al carrito y sigue.

El detalle importante es: la vista rápida solo compensa si el modal puede completar la acción. Un modal que se limita a mostrar información, sin función de carrito o sin selección de variante, solo añade un paso antes de enviar a la clientela finalmente a la página completa de todos modos. Eso es más lento que no tener vista rápida en absoluto. Todo el valor del patrón depende de que la clientela pueda terminar lo empezado dentro del diálogo.

Qué necesita una buena vista rápida

Tanto si construye una vista rápida usted mismo como si la compra o la instala: los mismos fundamentos deciden si beneficia o perjudica. Use esto como lista de comprobación:

• Añadir al carrito real con variantes. La clientela debería poder elegir una talla o color y añadir el producto al carrito sin abandonar el modal. Todo lo demás es un aperitivo, no una vista rápida real.
• Carga bajo demanda. El contenido del modal solo debería cargarse cuando un cliente abre realmente un producto, para que la página de lista se mantenga ligera para todos los que nunca abren ninguno. Obtener el contenido por AJAX, sin jQuery en el propio código del plugin, mantiene el consumo de recursos bajo.
• Sin salto de diseño. El modal debería estar oculto hasta que se abre y superponerse a la página, en lugar de desplazar contenido, para que abrirlo nunca reflote la lista. Los saltos de diseño son molestos para la clientela y un inconveniente para las Core Web Vitals.
• Accesible. El soporte de teclado y un control de foco limpio no son extras opcionales. El diálogo debería atrapar el foco mientras esté abierto, cerrarse con Escape y devolver el foco al botón que lo abrió al cerrar, con los roles ARIA correctos para que la tecnología asistiva lo anuncie como diálogo.
• Contenido configurable. Las tiendas son distintas. Debería poder decidir qué partes aparecen en el modal y dónde aparece el botón que lo abre, en lugar de aceptar un diseño fijo.

Fíjese en lo que no aparece en esta lista: reemplazar la página de producto o meter a presión valoraciones, productos similares y la descripción completa en el modal. La vista rápida funciona porque está enfocada. Sobrecargarla solo recrea la página que quería saltarse.

Cómo lo resuelve Peek

Peek for WooCommerce es un plugin gratuito de código abierto que añade exactamente eso. Coloca un botón de vista rápida en sus bucles de producto de tienda y archivo, y un clic en él abre un modal AJAX accesible en el que la clientela puede previsualizar un producto, elegir opciones y añadir al carrito sin abandonar la lista.

Qué muestra el modal

El modal presenta la imagen destacada y las miniaturas de la galería, el título, el SKU, el precio, el estado de stock y la descripción breve, el formulario nativo de carrito de WooCommerce y un enlace a la página de producto completa. Como usa el propio formulario de carrito de WooCommerce, los productos variables funcionan correctamente: el modal carga el script de variantes de WooCommerce, de modo que la clientela puede elegir una variante antes de añadir al carrito, tratándose la cantidad igual que en la página de producto. Cada una de estas partes se puede encender o apagar en la página de ajustes, de modo que puede mantener el modal tan sobrio o tan completo como quiera, y el número de miniaturas de galería es configurable de cero a doce.

Construido para velocidad y accesibilidad

Peek es deliberadamente ligero. Su propio script de frontend es JavaScript puro sin dependencia de jQuery, diferido y cargado en el pie, de modo que no bloquea el renderizado. El script de variantes de WooCommerce, basado en jQuery, solo se carga cuando un producto tiene realmente variantes y lo necesita. El contenido del modal se obtiene bajo demanda desde el propio sitio web a través del admin-ajax.php de WordPress, con la acción peek_quick_view del plugin, de modo que la lista se mantiene ligera hasta que un cliente abre algo, y ningún dato de cliente o de producto abandona jamás su servidor.

El modal permanece oculto hasta que se abre y se desplaza internamente, de modo que abrirlo superpone la página en lugar de reflotarla, lo que significa: ningún salto acumulativo de diseño. La accesibilidad se trata con el mismo cuidado: al abrirse, el foco salta al diálogo y queda atrapado allí, el diálogo se cierra con Escape o un clic en el fondo y devuelve el foco al botón que lo abrió al cerrar, y usa role="dialog" con aria-modal, para que la tecnología asistiva lo trate correctamente.

Configuración

Poner la vista rápida en producción lleva solo unos minutos:

1. Instale Peek mediante Plugins → Instalar, o súbalo a /wp-content/plugins/peek. WooCommerce debe estar instalado y activo.
2. Actívelo.
3. Abra el menú Peek en wp-admin para configurar el botón y el contenido del modal.

En la página de ajustes puede activar o desactivar la vista rápida, fijar la etiqueta y el estilo del botón que la abre (texto, un icono o icono más texto, conservando la variante de solo icono un nombre accesible) y elegir dónde aparece el botón. Por defecto se muestra en la página de la tienda y en los bucles de archivo de productos como categorías, etiquetas y taxonomías; también puede extenderlo a los bucles de productos similares y ventas adicionales en las páginas de producto individual. La misma zona controla la envoltura del modal (título, etiqueta del botón de cierre, texto de carga y de error, texto del enlace “Ver producto” y etiqueta del SKU, además de interruptores para el encabezado del modal, el botón de cierre y el cierre al hacer clic en el fondo) y le permite seleccionar qué partes se presentan en el modal. Los ajustes en línea facilitan empezar con lo mínimo y añadir detalles más tarde.

Colocar un botón en cualquier lugar

El botón no se limita a la colocación automática en el bucle. Peek ofrece un shortcode con el que puede poner un botón de vista rápida en cualquier diseño: [peek_quick_view id="123"] o el alias más corto [peek id="123"]. Acepta los atributos opcionales text y style para adaptar el botón a su entorno, y el modal junto con sus recursos se cargan automáticamente allí donde aparezca el shortcode. Esto es útil para páginas de aterrizaje, páginas de inicio personalizadas o un bloque construido a mano con productos seleccionados, donde el botón estándar del bucle no basta.

Lo que no hace

Peek se concentra en el modal de vista rápida y los ajustes que lo rodean. No modifica las páginas de producto individual, y no se conecta con ningún servicio externo: sus únicos datos guardados son dos opciones de WordPress para su configuración, ambas eliminadas de forma limpia cuando se borra el plugin. Las funciones de merchandising que van más allá de un modal de un solo producto, como un carrusel de productos similares o los swatches de variantes, están en la edición PRO en lugar del plugin gratuito, lo que se trata más abajo.

Consejos prácticos para una vista rápida que vende

Un plugin proporciona el mecanismo; cómo lo configure decide lo bien que funciona. Algunas indicaciones:

• Incluya siempre el añadir al carrito. Es la única función que hace que una vista rápida merezca la pena. Si desactiva el formulario de carrito para “mantener el modal ordenado”, ha construido un camino más lento a la página de producto. Déjelo encendido.
• Mantenga el modal enfocado. Muestre galería, precio, estado de stock y el formulario de carrito. Resista el impulso de volcar la descripción completa del producto. La página completa está a un clic mediante el enlace “Ver producto” para quien quiera más.
• Adapte el botón a su tema. Un botón de solo icono encaja en una cuadrícula densa guiada por imágenes; un botón de icono más texto es más claro en un catálogo poco poblado. Elija el estilo que sea reconocible como botón de un vistazo, porque una vista rápida que nadie nota es una vista rápida que nadie usa.
• Sea deliberado con el alcance. Cargar el botón solo en los bucles de tienda y archivo mantiene las cosas sencillas. Extenderlo a los bucles de productos similares y ventas adicionales en las páginas de producto puede aumentar las ventas cruzadas, pero enciéndalo solo donde realmente ayuda a la clientela, en lugar de por reflejo en todas partes.
• Fije un número razonable de miniaturas de galería. Unas pocas miniaturas dan una impresión del producto sin que el modal se sienta como una galería completa. Ajuste el número a sus fotos de producto.

Peek frente a WooCommerce estándar

El núcleo de WooCommerce no tiene vista rápida en absoluto: cada producto requiere una carga de página completa para revisarlo. Esta es la diferencia específica para la vista rápida:

Función	WooCommerce estándar	Peek
Ver producto sin abandonar la lista	No	Modal AJAX desde los bucles de tienda y archivo
Galería, precio, SKU, estado de stock, descripción breve en el modal	no aplica	Sí, cada parte conmutable
Añadir al carrito en el modal	no aplica	Sí, con el formulario nativo de WooCommerce
Productos variables en el modal	no aplica	Sí, mediante el script de variantes de WooCommerce
Carga bajo demanda	no aplica	Sí (AJAX, sin jQuery en el código del plugin)
Salto de diseño al abrir	no aplica	Ninguno; el modal permanece oculto hasta abrirse
Modal accesible	no aplica	Trampa de foco, Escape, cierre por fondo, diálogo ARIA
Colocación manual del botón	no aplica	Shortcode [peek_quick_view] / [peek]
Vistos recientemente, carrusel, swatches, analíticas	No	Sí (Peek Pro)
Coste	Gratis (núcleo, sin vista rápida)	Gratis (GPL); Pro añade merchandising y analíticas

Gratis frente a PRO

El plugin gratuito Peek es una vista rápida completa, no un aperitivo: el modal AJAX, el añadir al carrito nativo con variantes, la página de ajustes completa, el shortcode y el trabajo de accesibilidad están todos incluidos. Peek Pro es una extensión que requiere el plugin gratuito instalado y activo, y construye sobre esa base con merchandising y medición en el modal para tiendas que quieren impulsar más la conversión. Añade productos vistos recientemente (con seguimiento por cookie, un shortcode [peek_recently_viewed] y una opción de inserción automática), un carrusel de productos similares al pie del modal, swatches de variantes que reemplazan los desplegables de variantes por chips de color, imagen o etiqueta, secciones de modal personalizadas para contenidos como información de envío o sellos de confianza antes o después del carrito, una navegación anterior y siguiente entre productos dentro del modal, controles de estilo en el color de marca, así como analíticas de vista rápida que registran aperturas del modal, acciones de carrito desde el modal y conversiones de compra por producto, con un panel y exportación a CSV. Peek Pro se entrega a través de Freemius en lugar del directorio de WordPress.org.

La versión corta

La vista rápida acelera la navegación llevando el producto a la clientela en lugar de enviar a la clientela al producto. Solo funciona si el modal puede llevar realmente la tarea hasta el final, así que los puntos innegociables son: añadir al carrito real con variantes, contenido cargado bajo demanda sin jQuery, sin salto de diseño y un diálogo operable con teclado. El plugin gratuito Peek cubre todo eso con un modal AJAX accesible, una página de ajustes completa y un shortcode para la colocación manual; Peek Pro añade productos vistos recientemente, un carrusel de artículos similares, swatches de variantes, secciones personalizadas, navegación y estilo del modal, así como analíticas de vista rápida, cuando esté listo para hacer merchandising y medir en el modal.