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

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

Esta versión no incluye una pantalla de ajustes para el checkout multipaso. El único ajuste es multistep_enabled dentro de la opción polski_pro_checkout, que hay que escribir directamente, por ejemplo con WP-CLI:

wp option patch update polski_pro_checkout multistep_enabled 1

Un valor de 1 activa el diseño multipaso, 0 restaura el checkout predeterminado de WooCommerce.

Nombres de los pasos

Los nombres de los cuatro pasos están fijados en el plugin (Dirección, Envío, Pago, Revisión) y se traducen mediante el dominio de texto polski-pro. No se pueden cambiar desde un ajuste.

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

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)

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

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

Clase CSS del body

Cuando el checkout multipaso está activo, se añade una clase al elemento <body>:

polski-multistep-checkout

Esto 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

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

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

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

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

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 1
• shipping_* - paso 2
• order_* - paso 4

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

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

El checkout no se divide en pasos

1. Comprueba si la opción polski_pro_checkout[multistep_enabled] está establecida en 1
2. Vacía la caché (plugins de caché, CDN, caché del navegador)
3. Revisa la consola del navegador en busca de errores de JavaScript
4. Verifica que no haya conflicto con otros plugins que modifiquen el checkout

El formulario no avanza al siguiente paso

1. Comprueba si todos los campos obligatorios están completados
2. Verifica los mensajes de validación debajo de los campos
3. Revisa la consola del navegador - los errores de AJAX pueden bloquear la validación

Los estilos no funcionan correctamente

1. Comprueba si la clase polski-multistep-checkout está presente en el elemento <body>
2. Verifica que los estilos del plugin no estén siendo sobrescritos por el tema (usa el inspector)
3. Añade estilos personalizados con mayor especificidad de selector

Recursos relacionados

• Casillas legales
• NIF-IVA en el checkout
• Informar de un problema

Esta página tiene únicamente carácter informativo y no constituye asesoramiento legal. Consulta a un abogado antes de la implementación. Polski for WooCommerce es software de código abierto (GPLv2) proporcionado sin garantía.