Revisa la tienda en todos los dispositivos
Una revisión responsive de la tienda es una prueba de compra completa en distintos tamaños de área de visualización, no un análisis visual de la página de inicio. Las opciones del producto, las superposiciones, los teclados, los avisos y las tablas de la cuenta pueden cambiar drásticamente el espacio utilizable.
Prepara la revisión
Usa ejemplos reales del catálogo:
- un título de producto largo;
- un producto variable con muchas opciones;
- un producto con varias imágenes de galería;
- un producto en oferta;
- un producto agotado;
- un carrito con varias líneas;
- un pago con envío y validación;
- una cuenta con pedidos y direcciones.
Prueba con la sesión iniciada y sin iniciar. Usa al menos un teléfono o tablet real además del redimensionamiento del navegador.
Revisa los archivos de productos
En anchos de teléfono, tablet y escritorio, comprueba que:
- los encabezados y los contadores de resultados no choquen entre sí;
- la navegación por categorías siga siendo comprensible;
- las tarjetas de producto mantengan un orden legible de imagen, título, precio y acción;
- los títulos largos no oculten los precios ni los botones;
- los controles de filtro se abran, se desplacen, se borren y se cierren;
- la paginación o la carga infinita no desplace al visitante de forma inesperada;
- la vista rápida o las ventanas emergentes de producto encajen en el área de visualización;
- el contenido sin resultados ofrezca un siguiente paso.
Revisa las páginas de producto individual
Prueba el deslizamiento de la galería, la navegación por miniaturas, los selectores de variación, la cantidad, añadir al carrito, la lista de espera, la lista de deseos, solicitar información, las pestañas o acordeón, los productos relacionados y la barra fija de añadir al carrito.
Abre el teclado en pantalla dentro de cada formulario o selector. Confirma que los controles fijos no cubran el campo enfocado, el aviso de WooCommerce, la interfaz de consentimiento ni la acción de pago.
Revisa el carrito y el pago
Comprueba el carrito desplegable o lateral en estados vacío y con contenido. En las páginas de Carrito y Pago, verifica las líneas de pedido, las cantidades, los cupones, el envío, los totales, las etiquetas de los campos, la validación, el texto legal, los controles de pago y la confirmación del pedido.
Las tablas pueden convertirse en filas apiladas en pantallas estrechas. Confirma que cada valor conserve una etiqueta clara y que las acciones destructivas no queden demasiado cerca de las acciones principales.
Revisa Mi cuenta
Prueba el panel de control, los pedidos, los detalles del pedido, las descargas, las direcciones, los datos de la cuenta, los endpoints personalizados y las listas de deseos. Usa una cuenta con suficientes registros para poner de manifiesto la paginación y los valores largos.
Los endpoints restringidos por permisos deben permanecer ausentes e inaccesibles para el rol de cliente incorrecto en cualquier ancho.
Revisión con teclado y asistencia
Usa la página sin puntero:
- sigue el foco por la navegación, los filtros, las galerías, las ventanas emergentes, el carrito y el pago;
- confirma que el foco sea visible;
- abre y cierra cada superposición;
- verifica que el foco regrese al elemento desencadenante;
- lee los errores de formulario y los avisos de WooCommerce en contexto;
- confirma que los controles tengan nombres comprensibles;
- evita el movimiento que impida completar la tarea.
Registra y corrige los fallos
Para cada problema, registra la URL exacta, el área de visualización, el estado del cliente, el estado del producto o del pedido y la acción que lo causó. Corrige primero el componente o el ajuste del tema responsable; evita un parche de CSS específico de la página que se limite a ocultar el síntoma en otro sitio.
La revisión estará completa cuando la misma tarea del cliente pueda terminarse en teléfono, tablet y escritorio sin que falte información ni haya una acción obstruida.