Uso de Peek

Flujo recomendado

1. Elige un estilo de botón que contraste con la tarjeta de producto.
2. Selecciona la posición debajo de la tarjeta o sobre la imagen.
3. Deja en el diálogo sólo la información necesaria para decidir la compra.
4. Verifica el resultado con teclado, móvil y un producto variable.

En la posición estándar, Peek usa woocommerce_after_shop_loop_item con prioridad 21. En la superposición usa woocommerce_before_shop_loop_item con prioridad 8. El resultado depende de que el tema conserve esos hooks de WooCommerce.

Shortcodes

Usa cualquiera de los dos nombres:

[peek]
[peek_quick_view]

Para señalar otro producto y personalizar el control:

[peek id="123" text="Vista rápida" style="outline"]

id debe ser un ID de producto válido. Sin ese atributo, el shortcode intenta obtener el producto actual. text cambia la etiqueta sólo en esa instancia y style aplica una variante disponible del botón.

Experiencia del comprador

Al pulsar el botón, el navegador envía una solicitud a admin-ajax.php con la acción peek_quick_view y un nonce. Tras recibir el contenido:

• el diálogo anuncia su título y descripción mediante ARIA;
• el foco pasa al modal y queda dentro de él;
• Escape lo cierra;
• el fondo puede cerrarlo si has activado esa opción;
• el foco regresa al botón original;
• una región viva comunica cambios importantes.

Para productos variables, Peek inicia el formulario wc-add-to-cart-variation de WooCommerce. Así se mantienen las reglas de atributos, precio, imagen, stock y disponibilidad definidas por WooCommerce y sus extensiones compatibles.

Contenido y conversión

Una vista rápida funciona mejor cuando reduce decisiones, no cuando reproduce una página completa. Suele bastar con imagen, precio, stock, una descripción breve y el formulario de compra. Conserva el enlace al producto para quien necesite especificaciones, reseñas o contenido más largo.

Accesibilidad y movimiento

Prueba el recorrido completo con Tab, Shift+Tab, Enter y Escape. La superposición debe poder activarse sin hover. Peek respeta prefers-reduced-motion, por lo que las transiciones se reducen cuando el sistema lo solicita.

Personalización para desarrolladores

Puedes insertar una nota antes del carrito sin sustituir el diálogo:

add_action( 'peek_quick_view_before_cart', function ( $product, $settings ) {
    if ( $product->is_in_stock() ) {
        echo '<p class="peek-delivery-note">' . esc_html__( 'Ready to dispatch.', 'my-plugin' ) . '</p>';
    }
}, 10, 2 );

Consulta la lista completa en Configuración, hooks para desarrolladores.

Rendimiento

El contenido del producto se solicita sólo al abrir la vista rápida. El modal oculto no ocupa espacio y el script propio es pequeño, sin jQuery y diferido. La compatibilidad con variaciones puede cargar el script nativo de WooCommerce porque es la fuente de verdad del formulario variable.

Si ya utilizas el módulo equivalente en Polski for WooCommerce, conserva una sola implementación. Consulta la vista rápida de Polski para comparar la configuración.