Un cliente profesional llega al pago y quiere dejar su número de IVA con el pedido. Tu tienda acepta esa información, pero no tiene dónde recogerla. Un campo de texto personalizado le da un lugar claro para introducirla.
Esta guía explica cómo añadir un campo personalizado al pago de WooCommerce con HookSpark Checkout Customizer Premium. Añadiremos un campo opcional «Número de IVA» a facturación, guardaremos un borrador y comprobaremos el valor de un pedido de prueba.
La guía utiliza el editor Premium de campos clásicos de la versión de desarrollo distribuida 0.4.0-alpha.4. Free no incluye este editor. Los pasos no se aplican al bloque de pago de WooCommerce. Prueba una versión de desarrollo en un entorno de pruebas antes de utilizarla en pedidos de clientes.
Qué hace realmente este campo de número de IVA
El ejemplo recoge un texto. No consulta una base de datos fiscal, verifica mediante VIES, cambia impuestos, concede exenciones de IVA ni emite facturas. Tu proceso fiscal y de facturación sigue siendo responsable de esas operaciones.
La tienda ficticia vende cuadernos a particulares y empresas. Su personal puede utilizar el número de IVA facilitado dentro de un proceso existente de tramitación. Los particulares pueden dejarlo vacío. Antes de copiar la configuración, identifica quién utilizará la respuesta y dónde la encontrará.
Los formatos de números de IVA varían según el país. Utilizamos texto para admitir prefijos o letras en lugar de suponer que todos son un número italiano de once dígitos. Un campo genérico también acepta información incorrecta: recogerla es distinto de verificarla.
Decide si esa pregunta corresponde al pago
Añade un campo al pago cuando la información afecte a todo el pedido y tu equipo tenga un uso concreto para ella. Si describe un producto, recógela en su ficha. El grabado de una botella pertenece a la botella; consulta nuestro ejemplo de campo de grabado.
El artículo de investigación de Baymard Institute E-Commerce Checkouts Need to Mark Both Required Fields and Optional Fields Explicitly, publicado el 2 de octubre de 2018, recomienda identificar claramente ambos tipos de campo. Sus resultados ayudan a revisar la claridad del formulario; no demuestran una mejora de conversión de HookSpark.
En este ejemplo, Opcional es un ajuste real, no una palabra añadida a la etiqueta mientras el servidor sigue exigiendo una respuesta. Comprueba que tu tema muestre esa indicación. No hagas obligatorio el número de IVA para todos solo porque algunos clientes deban facilitarlo.
1. Confirma el tipo de pago y la edición
Prepara una tienda de pruebas con WooCommerce y Checkout Customizer Premium. Confirma que la página utilice el shortcode clásico [woocommerce_checkout] y que Checkout Customizer esté activo con un diseño clásico. Focus y Compact se basan en bloques y no sirven para este ejemplo.
La guía inicial explica la configuración. Si una extensión fiscal o de facturación ya gestiona campos equivalentes, revisa esa integración antes de crear otro. Dos campos para la misma respuesta pueden dejar al personal sin saber cuál utilizar.
2. Añade el campo de facturación personalizado
- Abre HookSpark → Checkout Customizer → Checkout fields.
- En Custom fields(«Campos personalizados»), haz clic en Add field.
- Configura Etiqueta del campo a Número de IVA.
- Elige Text como Field type y Facturación como Section.
- Configura Visibility and requirement a Opcional.
- Selecciona Full row para Field width.
- Establece un Display order adecuado y comprueba su posición en la vista previa.
- Haz clic en Save draft.
El editor crea una clave estable del campo. La clave identifica los datos del pedido; la etiqueta pública es el texto que ve el cliente. Conserva la definición al cambiar la etiqueta en lugar de eliminarla y crear un campo distinto.
El editor distribuido admite texto, correo, teléfono, texto largo, desplegable y casilla. El número de IVA utiliza texto en este ejemplo. Un desplegable necesita opciones y un correo valida un formato de dirección; ninguno sustituye la verificación fiscal.
| Ajuste | Valor | Motivo |
|---|---|---|
| Etiqueta del campo | Número de IVA | Identifica la información que se recoge. |
| Field type | Text | Admite letras y un prefijo de país. |
| Section | Facturación | Conserva la respuesta con los datos de facturación. |
| Visibility and requirement | Opcional | Los particulares pueden dejarlo vacío. |
| Field width | Full row | Da espacio al valor y a la etiqueta. |
Elegir Envío solo recogería el campo cuando el comprador utilice una dirección de envío distinta. Es otro ámbito y no corresponde a este ejemplo de facturación.
3. Revisa el borrador antes de aplicarlo
Guardar el borrador no cambia el pago activo. Con un carrito preparado, abre Templates & editor y revisa el borrador guardado. Localiza el campo nuevo, comprueba que se indique que es opcional y revisa su posición en escritorio y móvil.
Cuando esté listo, haz clic en Apply to checkout. Se activa todo el borrador guardado, incluidos los demás ajustes de distribución y marca. Revísalos antes: la acción no se limita al campo nuevo.
Abre el pago activo en otra sesión de comprador. Confirma que el campo aparezca en facturación y que sigan funcionando dirección, envío y pago. La vista previa no demuestra por sí sola que se pueda enviar un pedido.
4. Prueba el campo vacío y completado
Realiza pedidos de prueba con un método adecuado para tu entorno. Utiliza datos claramente ficticios: el valor ilustrado EXAMPLE-VAT demuestra almacenamiento, no un identificador fiscal válido.
- Déjalo vacío: con los demás datos obligatorios completos, el campo opcional de IVA no debe impedir el pedido.
- Introduce un valor: completa otro pedido de prueba y compara la respuesta enviada con los datos de campo personalizado mostrados en sus detalles.
- Comprueba el correo del pedido: los valores se incluyen en la salida de pedido del plugin. Revisa el correo mediante la captura del entorno de pruebas, sin enviar mensajes a clientes reales.
- Revisa el móvil: confirma que quepan etiqueta, indicación opcional y valor y que se entiendan los errores de los campos obligatorios existentes.
- Repite las vías reales de compra: prueba como invitado y con cuenta, con los países y pasarelas utilizados por tu tienda.
Ver la respuesta en el pedido de WooCommerce no demuestra que una factura PDF, una exportación contable u otro plugin vayan a utilizarla. Esos sistemas necesitan su propia asignación compatible. Verifica ese paso por separado antes de depender del campo para facturar.
¿Qué ocurre si después cambias el nombre o lo quitas?
El plugin guarda la etiqueta y la respuesta con el pedido. Los cambios posteriores de configuración no modifican la respuesta guardada de un pedido anterior.
Oculto conserva la definición para reutilizarla y deja de recoger el dato en futuras compras. Remove field from draft quita la definición del borrador. Ninguna de las dos acciones borra valores de pedidos anteriores.
Si la configuración aplicada no es correcta, Restore previous recupera la configuración activa anterior y conserva el borrador. Comprueba el pago restaurado antes de aceptar pedidos reales.
Preguntas frecuentes
¿Puedo añadir el campo sin escribir PHP?
Sí. El editor clásico Premium ofrece los controles descritos. Esta guía no necesita un fragmento de código.
¿Puedo exigir el número de IVA solo a empresas?
No con el editor distribuido utilizado aquí. Esta versión no incluye reglas condicionales. Hacer obligatorio el campo lo exigiría a todos dentro de su ámbito. Déjalo opcional en este ejemplo de clientes mixtos.
¿El campo valida los números de IVA?
No. Recoge texto y guarda la respuesta. Esta configuración no consulta VIES, comprueba la situación fiscal ni aplica exención de IVA automáticamente.
¿Puedo recoger un codice fiscale italiano?
Puedes llamar «Codice fiscale» a un campo de texto y recoger la respuesta. El editor no verifica por ello su dígito de control, identidad ni validez fiscal. Utiliza los requisitos y la integración que correspondan a tu proceso real.
¿Por qué no aparece el campo?
Confirma que hayas aplicado el borrador, activado un diseño clásico y utilizado Premium. Revisa la sección y la visibilidad. Un campo personalizado de Envío solo se recoge con una dirección de envío distinta.
Centra el pago en respuestas útiles
Añade un campo, identifica quién necesita la respuesta y prueba todo el pedido. Compensa la nueva pregunta revisando la información que ya no utilizas. Nuestra guía para quitar campos innecesarios del pago explica esa tarea complementaria.
Descubre Checkout Customizer y utiliza la guía de campos de pago para revisar los controles compatibles.
Una vez creado el campo, la guía del campo obligatorio en el checkout WooCommerce explica Required, la aplicación del borrador y la prueba del valor ausente con su corrección en el checkout clásico.