Cómo personalizar campos del checkout de WooCommerce
25/11/2019
Contenidos del Post
WooCommerce trae por defecto una página de checkout con los campos básicos, cabe recordar que uno de los aspectos fundamentales con el fin de conseguir una conversión es que el formulario contenga el mínimo indispensable de campos a rellenar.
En el caso de que se necesite editar o añadir nuevos campos, Woocommerce no incluye ninguna opción relacionada que permita modificar o añadir campos de la página de checkout. Para esto podemos usar el plugin Checkout Field Editor for WooCommerce.
El plugin permite personalizar campos del checkout de WooCommerce de una manera bastante completa y entre las opciones podemos tanto añadir como quitar los campos que no queremos que se muestren. También podemos indicar si el campo ocupa una fila completa o media mediante clases de css.
Instalar el plugin Checkout Field Editor for WooCommerce
Para instalar Checkout Field Editor for WooCommerce nos dirigimos a la sección de Plugins > Añadir nuevo. Buscamos el plugin mediante el buscador, instalamos y lo activamos.
Para personalizar campos del checkout de WooCommerce nos dirigimos a WooCommerce > formularios de pago.
En la pantalla del editor de campos tenemos tres pestañas:
Billing Fields: En esta pestaña se puede editar o añadir campos al formulario de Facturación en el checkout de Woocommerce.
Shipping Fileds: En esta pestaña podremos editar o añadir campos al formulario de envío en el checkout de Woocommerce.
Additional Fields: En esta pestaña podremos personalizar los campos que aparecen en el formulario de registro como “Información Adicional”.
Crear campos del formulario en el checkout
Para crear un nuevo campo primero tienes que seleccionar entre las pestañas Billing Fields, Shipping Fields o Additional Fields de la parte superior dónde quieres hacer los cambios.
En el campo que quieras editar haz clic en el botón azul “Añadir un campo” y se abrirá una ventana emergente con las opciones para configurar:
- Tipo: Desde aquí elegimos el tipo de campo que queremos añadir al formulario. Entre las opciones tenemos: Texto, Contraseña, Correo Electrónico, Teléfono, (Seleccionar) Desplegable, Área de Texto y Radio.
- Nombre: Para identificar el campo le damos un nombre (sin acentos).
- Etiqueta: Nombre del campo que aparecerá en el formulario.
- Marcador de posición: Podemos indicar un texto para que aparezca dentro de un campo de texto por defecto.
- Default Value: Podemos establecer un estado predeterminado para algunos tipos de campo.
- Validation: Podemos crear reglas de validación para que los campos email contengan una dirección de correo correcta o que en el campo número de teléfono solo se pueda introducir números y no letras.
- Class: Podemos darle una clase de css al campo con el fin de hacer que ocupe toda la fila (form-row-wide), la primera mitad de la fila (form-row-first) o la última mitad de la fila (form-row-last)
- Opciones: Si el tipo de campo es selector desplegable o radio aparecerá esta casilla donde definir las opciones del desplegable.
Después de estos campos aparecen una serie de checkbox para marcar o desmarcar:
- Obligatorio (campo obligatorio de rellenar)
- Activado (campo activo para mostrar o desactivado para ocultar)
- Display in Emails (Si está activado el campo aparecerá en emails)
- Display in order detail pages (Si está activado el campo se mostrará en la ficha de pedido de Woocommerce)
Haz click en “Save” y a continuación haz clic en “Guardar los cambios” en la pantalla de “Formularios de Pago”.
Modificar campos del formulario en el checkout
Para personalizar campos del checkout de WooCommerce primero tienes que seleccionar entre las pestañas Billing Fields, Shipping Fields o Additional Fields de la parte superior dónde quieres hacer los cambios.
En el campo que quieras editar haz clic en el botón azul “Añadir un campo” y se abrirá una ventana emergente con las opciones para configurar. Si el campo ya venía creado por defecto con WooCommerce hay algunas opciones que no se pueden modificar.
- Tipo: Desde aquí elegimos el tipo de campo que queremos añadir al formulario. Entre las opciones tenemos: Texto, Contraseña, Correo Electrónico, Teléfono, (Seleccionar) Desplegable, Área de Texto y Radio.
- Nombre: Para identificar el campo le damos un nombre (sin acentos).
- Etiqueta: Nombre del campo que aparecerá en el formulario.
- Marcador de posición: Podemos indicar un texto para que aparezca dentro de un campo de texto por defecto.
- Default Value: Podemos establecer un estado predeterminado para algunos tipos de campo.
- Validation: Podemos crear reglas de validación para que los campos email contengan una dirección de correo correcta o que en el campo número de teléfono solo se pueda introducir números y no letras.
- Class: Podemos darle una clase de css al campo con el fin de hacer que ocupe toda la fila (form-row-wide), la primera mitad de la fila (form-row-first) o la última mitad de la fila (form-row-last)
- Opciones: Si el tipo de campo es selector desplegable o radio aparecerá esta casilla donde definir las opciones del desplegable.
Después de estos campos aparecen una serie de checkbox para marcar o desmarcar:
- Obligatorio (campo obligatorio de rellenar)
- Activado (campo activo para mostrar o desactivado para ocultar)
- Display in Emails (Si está activado el campo aparecerá en emails)
- Display in order detail pages (Si está activado el campo se mostrará en la ficha de pedido de Woocommerce)
Haz click en “Save” y a continuación haz clic en “Guardar los cambios” en la pantalla de “Formularios de Pago”.
Eliminar, Mostrar u Ocultar campos del formulario
Primero tienes que seleccionar entre las pestañas Billing Fields, Shipping Fields o Additional Fields de la parte superior dónde quieres hacer los cambios.
Después seleccionamos el campo que queremos editar y clicamos sobre “Desactivar” si lo queremos ocultar o sobre “Activar” si lo queremos volver a mostrar.
A continuación, clic en el botón: “Save Changes” para guardar los cambios.
Para eliminar campos el primer paso vuelve a ser el mismo de seleccionar entre las pestañas Billing Fields, Shipping Fields o Additional Fields de la parte superior dónde quieres hacer los cambios.
Después seleccionamos el campo que queremos eliminar y clicamos sobre “Eliminar”.
A continuación, clic en el botón: “Save Changes” para guardar los cambios.
Cambiar posición de los campos en el registro de Woocommerce
Podemos jugar con la posición de los campos del formulario, para ello ponemos el cursor sobre el icono de la izquierda de tres rayas del campo que queremos cambiar de orden. El cursor cambiará a una forma de “cruz” y haciendo clic en el botón izquierdo y sin soltar, podremos arrastrar toda la fila y ponerla en el orden que queramos.
Suelta el botón del ratón para colocarlo en su nueva posición.
Recuerda hacer clic en el botón: “Save Changes” para guardar los cambios.
Conclusión
Son varias las razones por las que modificar y quitar campos de la página de checkout de WooCommerce. Puede ser que vendas productos digitales por lo que campos como la dirección de envío son irrelevantes para lo que vendes o puede que ocurra el caso contrario y necesites tener campos específicos que no se contemplan en una instalación básica de WooCommerce.
Espero que te haya resultado útil. Puede dejarnos un comentario con tus dudas o comentando tu experiencia con este u otro plugin similar.
¿Nos ayudas a mejorar la calidad del blog?
Déjanos una valoración sobre este post para poder seguir mejorando
(7 votos, promedio: 4,71 de 5)
Cargando...
(7 votos, promedio: 4,71 de 5)Cargando...
Hola Miguel,
Gran post. Enhorabuena.
Quería lanzarte una pregunta, como puedo hacer que un nuevo campo de texto añadido aparezca tan solo si en la cesta hay un producto en concreto?
Muchas gracias,
Un saludo.
Hola, porfa alguien podria decirme como hacer para redireccionar a paginas de checkout diferente segun el rol del cliente
Pues me han pedido una factura y necesito que en el checkout si ponen nombre de empresa(que es opcional) salga el campo de nif (obligatorio) y lo he creado pero no sé como ponerlo para que me salga en un pedido ya completado y poder rellenarlo
Hola Marisa, no acabo de entender muy bien tu duda.
¿Has creado un campo NIF obligatorio y no sale en el formulario? ¿Es eso a lo que te refieres?
Un saludo
Buenos días,
Gracias por el post y ahora te cuento mi duda.
El plugin lo he instalado y he podido añadir dos campos nuevos en la pestaña Billing Fields, en este caso, el el número de la calle y el piso. Cuando estoy en finalizar compra salen estos dos campos nuevos ya que tengo activado «Forzar el envío a la dirección de facturación del cliente». Pero si voy a Mi cuenta – Dirección, allí no salen los campos nuevos de nºde calle ni piso. ¿sólo se cambia en un sitio? o tengo que activar algo más. Gracias
Este plugin tiene UN PROBLEMA MUY GRAVE, no guarda la información en la cuenta de wordpress del usuario. por ende queda toda vacía..
esta bueno editar pero si no guarda la info??? de que sirve???
Hola Santiago.
Es extraño eso que nos comentas ya que nosotros no hemos detectado ningún problema al trabajar con él. Siempre puedes dirigirte mediante el apartado de soporte que tienen en la página del Plugin https://wordpress.org/support/plugin/woo-checkout-field-editor-pro/
Un saludo y gracias por leernos.
Hola muy interesante el articulo, felicidades por eso y por tu tiempo.
tengo una duda y ojala me ayudes a solucionar.
Cuando llevo a la practica los campos personalizados en mi formulario de pago, estos campos quedan fuera de la tabla de facturación es decir el orden queda:
Campo Personalizado 1
Campo personalizado 2
***************************************************************
Dirección de facturación:
Nombre:
Compañía
Ciudad
Teléfono
Email.
es posible incorporar estos campos personalizados a esta tabla?
desde ya gracias por el apoyo.
Hola Pablo.
¿No te funciona lo que explicamos en el artículo en el apartado «Cambiar posición de los campos en el registro de Woocommerce»?
Un saludo
hice lo indicado, funciono pero al dia siguiente volvió como era antes
Hola Edmundo.
Es extraño eso que nos comentas ya que nosotros no hemos detectado ningún problema al trabajar con él. Siempre puedes dirigirte mediante el apartado de soporte que tienen en la página del Plugin https://wordpress.org/support/plugin/woo-checkout-field-editor-pro/
Un saludo y gracias por leernos.
Gracias brother me sirvio de mucho
My little twin
Hace 1 segundo
Hola, tengo un problema muy extraño, cada vez que alguien con codigo postal de Portugal me hace un pedido, meten todos sus datos de envio y cuando ponen el codigo postal y se finaliza el pedido, despues cuando miro la petición del pedido se ha borrado el numero de la calle y el piso, solo queda la calle. Me ocurre con cada uno de los pedidos que recibo de Portugal y tengo que contactar al cliente para que me complete el numero de calle, todos ellos dicen que metieron el numero de calle al hacer su pedido y es cierto, porque he hecho pruebas y me ocurre también. Gracias de antemano si alguien puede ayudarme, hice la consulta hace 2 años a mis diseñadores de la web, pero me dejaron tirada.
Hola Beatriz.
Lo primero que te aconsejo es que te asegures que tienes actualizado el plugin a la última versión. Lo que nos comentas es un error muy concreto y a simple vista es difícil darte una solución concreta.
Si después de actualizar el error persiste te aconsejaría que contrataras a un programador WordPress para que pueda analizar tu código y ver si se está dando un conflicto y eso produce el error que comentas.
Un saludo y gracias por leernos.