Multi-step checkout
El módulo divide el checkout en cuatro pasos: dirección, envío, pago y resumen. El cliente ve una barra de progreso y avanza por cada paso.
Pasos del checkout
Section titled “Pasos del checkout”El checkout multipaso consta de cuatro pasos:
| Paso | Nombre predeterminado | Contenido |
|---|---|---|
| 1 | Dirección | Formulario de datos de facturación y dirección de envío |
| 2 | Envío | Selección del método de envío y opciones de entrega |
| 3 | Pago | Selección del método de pago y datos de pago |
| 4 | Resumen | Revisión del pedido, casillas legales, botón “Realizar pedido” |
El cliente puede volver a los pasos anteriores sin perder los datos introducidos. Avanzar al siguiente paso requiere completar correctamente el formulario actual.
Configuración
Section titled “Configuración”Ve a WooCommerce > Ajustes > Polski > Módulos PRO > Checkout.
Activación del módulo
Section titled “Activación del módulo”El checkout multipaso se controla mediante la opción:
polski_pro_checkout[multistep_enabled]Un valor de 1 activa el diseño multipaso, 0 restaura el checkout predeterminado de WooCommerce.
Nombres de los pasos
Section titled “Nombres de los pasos”Los nombres predeterminados de los pasos se pueden cambiar en los ajustes:
| Ajuste | Valor predeterminado |
|---|---|
| Título del paso 1 | Dirección |
| Título del paso 2 | Envío |
| Título del paso 3 | Pago |
| Título del paso 4 | Resumen |
Los nombres de los pasos se muestran en la barra de progreso sobre el formulario de checkout.
Validación entre pasos
Section titled “Validación entre pasos”El plugin valida los datos después de cada paso antes de permitir avanzar al siguiente:
- Paso 1 (Dirección) - campos obligatorios: nombre, apellidos, dirección, ciudad, código postal, teléfono, correo electrónico
- Paso 2 (Envío) - selección del método de envío obligatoria
- Paso 3 (Pago) - selección del método de pago obligatoria
- Paso 4 (Resumen) - deben marcarse las casillas legales obligatorias
Los mensajes de validación aparecen en línea debajo del campo correspondiente.
Implementación técnica
Section titled “Implementación técnica”WooCommerce Checkout Blocks (React)
Section titled “WooCommerce Checkout Blocks (React)”Para las tiendas que usan WooCommerce Checkout Blocks (editor de bloques), el módulo utiliza React para renderizar los pasos. Los componentes se integran con la WooCommerce Store API y mantienen plena compatibilidad con las extensiones de Checkout Blocks.
El renderizado ocurre en el lado del cliente. El plugin se registra como una extensión de Checkout Blocks y modifica el diseño del formulario sin interferir en la lógica de WooCommerce.
Fallback clásico (shortcode)
Section titled “Fallback clásico (shortcode)”Para las tiendas que usan el checkout clásico (shortcode [woocommerce_checkout]), el módulo proporciona un fallback de JavaScript. El script divide el formulario existente en secciones y añade navegación entre ellas.
El fallback clásico:
- no requiere React
- funciona con temas y personalizaciones de checkout existentes
- admite los mismos cuatro pasos que la versión Blocks
- utiliza jQuery para la manipulación del DOM
Detección del modo
Section titled “Detección del modo”El plugin detecta automáticamente si el checkout usa Checkout Blocks o el shortcode clásico y carga la implementación adecuada. No se requiere ninguna configuración manual del modo.
Estilos
Section titled “Estilos”Clase CSS del body
Section titled “Clase CSS del body”Cuando el checkout multipaso está activo, se añade una clase al elemento <body>:
polski-multistep-checkoutEsto permite aplicar estilos CSS exclusivamente a las páginas con el checkout multipaso:
body.polski-multistep-checkout .woocommerce-checkout { max-width: 720px; margin: 0 auto;}Clases de los pasos
Section titled “Clases de los pasos”Cada paso recibe su propia clase CSS:
.polski-checkout-step { /* estilos comunes de los pasos */ }.polski-checkout-step--active { /* paso activo */ }.polski-checkout-step--completed { /* paso completado */ }.polski-checkout-step--address { /* paso de dirección */ }.polski-checkout-step--shipping { /* paso de envío */ }.polski-checkout-step--payment { /* paso de pago */ }.polski-checkout-step--review { /* paso de resumen */ }Barra de progreso
Section titled “Barra de progreso”La barra de progreso se renderiza como un elemento <ol> con la clase .polski-checkout-progress. Cada elemento de la lista corresponde a un paso:
.polski-checkout-progress { /* contenedor de la barra */ }.polski-checkout-progress__step { /* paso individual en la barra */ }.polski-checkout-progress__step--active { /* paso activo en la barra */ }.polski-checkout-progress__step--done { /* paso completado en la barra */ }Compatibilidad con otros módulos
Section titled “Compatibilidad con otros módulos”Casillas legales
Section titled “Casillas legales”Las casillas legales de la versión gratuita de Polski for WooCommerce se trasladan automáticamente al paso 4 (Resumen). El cliente debe marcarlas antes de realizar el pedido.
Campo NIF-IVA
Section titled “Campo NIF-IVA”El campo NIF-IVA se muestra en el paso 1 (Dirección), según la configuración de visualización condicional del módulo NIF-IVA.
Campos personalizados
Section titled “Campos personalizados”Los campos añadidos por otros plugins (p. ej. mediante el hook woocommerce_checkout_fields) se asignan automáticamente al paso adecuado según su sección:
billing_*- paso 1shipping_*- paso 2order_*- paso 4
Accesibilidad (a11y)
Section titled “Accesibilidad (a11y)”El checkout multipaso admite:
- navegación por teclado (Tab, Enter, Escape)
- atributos ARIA (
aria-current,aria-label,role="tablist") - anuncio de los cambios de paso por parte de los lectores de pantalla
- foco visible en los elementos interactivos
Rendimiento
Section titled “Rendimiento”El módulo carga scripts y estilos solo en la página de checkout. En otras páginas de la tienda no añade ningún recurso. Los scripts se cargan con el atributo defer para no bloquear el renderizado de la página.
Problemas frecuentes
Section titled “Problemas frecuentes”El checkout no se divide en pasos
Section titled “El checkout no se divide en pasos”- Comprueba si la opción
polski_pro_checkout[multistep_enabled]está establecida en1 - Vacía la caché (plugins de caché, CDN, caché del navegador)
- Revisa la consola del navegador en busca de errores de JavaScript
- Verifica que no haya conflicto con otros plugins que modifiquen el checkout
El formulario no avanza al siguiente paso
Section titled “El formulario no avanza al siguiente paso”- Comprueba si todos los campos obligatorios están completados
- Verifica los mensajes de validación debajo de los campos
- Revisa la consola del navegador - los errores de AJAX pueden bloquear la validación
Los estilos no funcionan correctamente
Section titled “Los estilos no funcionan correctamente”- Comprueba si la clase
polski-multistep-checkoutestá presente en el elemento<body> - Verifica que los estilos del plugin no estén siendo sobrescritos por el tema (usa el inspector)
- Añade estilos personalizados con mayor especificidad de selector