Woocommerce no incluye ninguna opción relacionada con la personalización o modificación de campos de registro o alta de cliente en la tienda.
En este post vamos a ver un plugin freemium (tiene una versión gratuita) que si nos va a permitir eliminar, personalizar, editar y añadir nuevos campos en el formulario de registro de Woocommerce que se muestra en el checkout o proceso de finalización de compra. Te recuerdo que un plugin Freemium, es aquel que tiene una versión gratuita más limitada y una versión de pago con más opciones
APÚNTATE A MI PLATAFORMA DE CURSOS. ACCEDE A TODOS LOS CURSOS POR SOLO 10 €/MES
ÍNDICE EDITAR CAMPOS REGISTRO WOOCOMMERCE
- 1.- Opciones de personalización de campos que nos permite el plugin Woocommerce Checkout Field Editor
- 2.- Pantalla principal del plugin WooCommerce Checkout Field Editor
- 3.- Elementos de un campo de registro en Woocommerce con Checkout Field Editor
- 4.- Modificar campos de registro con Woocommerce en el checkout
- 5.- Crear un nuevo campo en el registro de Woocommerce
- 6.- Volver a poner todos los campos por defecto en la finalización de compra de Woocommerce
- 7.- Añadir nuevos campos al formulario de Woocommerce de otros tipos
1.- Opciones de personalización de campos que nos permite el plugin Woocommerce Checkout Field Editor
El plugin Woocommerce Checkout Field Editor, en su versión gratuita, nos va a permitir:
i.- Eliminar o desactivar campos: el plugin nos permite eliminar y desactivar campos existentes en el formulario de registro de Woocommerce, en el proceso de checkout.
ii.- Modificar campos: el plugin en su versión gratuita permite personalizar determinados aspectos de un campo existente en Woocommerce. Como, por ejemplo, hacer que sea o no sea “requerido” (obligatorio de rellenar)
iii.- Añadir campos: podremos crear nuevos campos en el checkout de Woocommerce. En la versión gratuita podremos utilizar campos de texto y de tipo desplegable.
iv.- Resetear campos formulario: podemos volver al estado inicial o por defecto del formulario de registro de Woocommerce.
v.- Recoger nuevos campos: podremos elegir si queremos que los datos aportados por el cliente en los nuevos campos que hayamos creado se muestren en los datos de pedido e incluso emails.
2.- Pantalla principal del plugin WooCommerce Checkout Field Editor
Una vez hayas instalado el plugin, podrás acceder a su pantalla de gestión desde: “WooCommerce > Checkout Form”.
La interface está dividida en 3 pestañas fundamentales:
i.- Billing Fields: en esta pestaña podremos personalizar, editar o añadir nuevos campos al formulario de Facturación en el checkout de Woocommerce. Es decir, lo que se conoce como la dirección de facturación del registro de Woocommerce o detalles de Facturación.
ii.- Shipping Fileds: en esta pestaña podremos editar o añadir nuevos campos al formulario de envío en el checkout de Woocommerce. Es decir, podremos gestionar los campos del formulario de dirección de envío de Woocommerce (Nota: este formulario ya no aparece en el checkout en las últimas versiones de Woocommerce).
iii.- Additional Fields: con esta pestaña podremos personalizar los campos que aparecen en el formulario de registro como “Información Adicional”.
Por defecto, el único campo de información adicional que se incluye en Woocommerce es un área de texto dedicado a dar la posibilidad al cliente de añadir información adicional al pedido.
Pestañas de selección de formulario a editar
2.1.- Formulario de dirección de facturación y de dirección de envío en Woocommerce
En anteriores versiones de Woocommerce era posible mostrar u ocultar el formulario para establecer la dirección de envío. Estas opciones estaban en: “Woocommerce > Ajustes > Envio > Opciones de envio” y luego en el apartado: “Destino de envio”.
- Si marcábamos la opción: “Por defecto la dirección de envío del cliente”, se mostraban dos formularios en el registro de Woocommerce (Dirección de facturación y de envío).
- Si marcábamos la opción: “Por defecto la dirección de facturación del cliente”, se mostraba solo el formulario para establecer la dirección de facturación.
En las últimas versiones de Woocommerce, ya solo aparece en el registro del checkout el formulario para establecer la dirección de facturación.
Una vez en el área de cliente (mi cuenta), ya si es posible establecer una dirección de envío diferente a la dirección de facturación. Pero los campos que añadamos o personalicemos no se verán aquí ya que el plugin sirve para personalizar los campos de registro del checkout o finalización de compra.
3.- Elementos de un campo de registro en Woocommerce con Checkout Field Editor
Los elementos o atributos de un campo de registro en Woocommerce nos van a dar una idea de las acciones que podremos realizar sobre los mismos:
- i.- Name: identificador del campo (este texto no aparece en el formulario)
- ii.- Type: tipo de campo. Campo de texto, área de texto, checkbox, radio button, etc.
- iii.- Label: Nombre del campo (este nombre SI aparecerá en el formulario).
- iv.- Placeholder: texto que aparecerá en el campo. Habitualmente es un texto de ejemplo que se pone en algunos campos de texto.
- v.- Validation rules: regla de validación del campo. Es decir, si en el campo se incluye una regla de validación de email, no se permitirá introducir ningún contenido en el campo que no concuerde con la estructura de un correo electrónico.
- vi.- Required: si el campo es obligatorio de rellenar para poder validar el formulario de Woocommerce.
- vii.- Clear row: esta opción obliga a la plantilla que se esté utilizando a mostrar el campo en una sola fila. Es decir, no permite compartir la misma fila con otro campo.
- viii.- Enlabled: activa o desactiva el campo (Enabled = Activado)
- ix.- Edit: el botón de editar nos permitirá cambiar o editar algunas de las características o atributos de un campo.
- x.- Display in Emails: el campo rellenado por el cliente se mostrará en emails.
- xi.- Display in Order Detail Pages: el campo rellenado por el cliente se mostrará en los detalles del pedido en “Woocommerce > Pedidos”.
4.- Modificar campos de registro con Woocommerce en el checkout
Para editar un campo, tendrásprimero que seleccionar, en la parte superior, la pestaña correspondiente al campo que quieres editar: Billing Fields (dirección facturación), Shipping Fields (dirección envio) y Additional Fields (campos adicionales)
Es interesante que abras otra navegador y pongas la página de registro a través de checkout, para ir viendo los cambios que vayas haciendo. Cuando hagas un cambio, simplemente haz clic en F5 para actualizar los cambios en el navegador donde estés visualizando los campos del registro en Woocommerce
A continuación, haz clic en el botón “Edit” correspondiente al campo que quieras editar y te aparecerá una ventana emergente. Realiza la modificación que quieras y haz clic en el botón “Edit Field”.
Si es un campo original de Woocommerce, habrá algunas características que no podrás modificar.
Modificar campos registro Woocommerce
Los aspectos más interesantes a modificar de los campos existentes serán:
4.1.- Eliminar campo registro de Woocommerce en el Checkout
Para eliminar un campo, simplemente desmarca el checkbox de nombre “Enabled” y el checkbox: “Required”. A continuación, haz clic en el botón “Edit Field”.
A continuación, haz clic en «Save Changes»
4.2.- Hacer campo de registro Woocommerce NO obligatorio
Para hacer que un campo no sea obligatorio de rellenar para poder formalizar el formulario de registro. Es decir, para que el campo no sea requerido, desmarcaremos el checkbox: “Required” y dejaremos marcado el checkbox: “Enabled”
A continuación, haz clic en el botón “Edit Field” y en «Save Changes».
4.3.- Cambiar posición de los campos en el registro de Woocommerce
Para cambiar la posición de los campos en el formulario de registro de Woocommerce, pon el ratón en sobre el icono de “tres rayas horizontales” (a la izquierda) correspondiente al campo cuya posición quieras cambiar.
A continuación, cuando el cursor del ratón se transforme en una “cruz”, haz clic con el botón izquierdo del ratón y arrastra el campo (sin soltar el botón del ratón) hasta su posición definitiva.
Cuando lo tengas situado, suelta el botón del ratón.
A continuación, haz clic en el botón: “Save Changes” para guardar los cambios
Mover campos registro Woocommerce
5.- Crear un nuevo campo en el registro de Woocommerce
Al igual que en el apartado anterior, lo primero que debemos hacer es seleccionar, en la parte superior, la pestaña correspondiente al campo que quieres editar: Billing Fields (dirección facturación), Shipping Fields (dirección envio) y Additional Fields (campos adicionales)
Es interesante que abras otra navegador y pongas la página de registro a través de checkout para ir viendo los cambios que vayas haciendo. Cuando hagas un cambio, simplemente haz clic en F5 para actualizar los cambios en el navegador donde estés visualizando los campos del registro de tu Woocommerce
A continuación, haz clic en el botón azul: “+ Add field” situado bajo las pestañas mencionadas anteriormente. Te aparecerá una ventana emergente con las siguientes opciones:
i.- Type: selecciona el tipo de campo que quieres añadir al formulario de registro de Woocommerce. En la versión gratuita del plugin contamos con campos de texto (text) y selector desplegable (Select).
ii.- Name: pon un nombre para identificar el campo (no pongas acentos ni eñes)
iii.- Label: pon el nombre del campo que aparecerá en el formulario
iv.- Placeholder: si es un campo de texto y quieres poner un contenido de ejemplo, lo puedes hacer aquí.
v.- Validation: si no marcas ninguna opción el campo no tendrá ninguna regla de validación. Puedes elegir reglas de validación para email, número de teléfono, Provincia y Código postal.
vi.- Options: esta opción te aparecerá si eliges el tipo de campo selector desplegable. Aquí debes poner las diferentes opciones a elegir en el selector, separadas por el signo |
vii.- Varios: a continuación, te aparecerán una serie de checkbox que podrás marcar o no como son: Required (campo obligatorio de rellenar), Clear row (forzar campo solitario en una línea), Enabled (campo activo), Display in Emails (el campo puede aparecer en emails), Display in order detail pages (campo se mostrará en la ficha de pedido de Woocommerce).
A continuación, haz clic en el botón: “Add New Field”.
IMPORTANTE: y a continuación, no te olvides de hacer clic en: “Save changes”.
Crear un nuevo campo registro Woocommerce
6.- Volver a poner todos los campos por defecto en la finalización de compra de Woocommerce
Este plugin incluye una opción para volver a poner todos los campos como estaban por defecto con la instalación de Woocommerce.
Para ello tendrás que hacer clic en el botón: “Reset to default fields”, y a continuación debes hacer clic en el botón: “Aceptar” que te aparecerá en una venta emergente de Aviso.
7.- Añadir nuevos campos al formulario de Woocommerce de otros tipos
Te dejo a continuación alguna opción de plugin de pago económico que te sirva para añadir campos diferentes a los que vienen por defecto en este plugin y más opciones de personalización. Es decir, para poder añadir campos diferentes al campo de texto y selector desplegable.
En el momento de creación de este post el plugin que te comento a continuación se continúa actualizando constantemente, tiene un precio económico y permite añadir cualquier tipo de campo al registro de Woocommerce. Se llama: “Woocommerce Easy Checkout Field Editor”
IR AL PLUGIN
Este plugin te permite TODAS las opciones que hemos estado viendo con el plugin gratuito, más las siguientes opciones:
i.-Opciones Condicionales: es decir, la posibilidad de mostrar campos o no dependiendo de determinadas condiciones.
ii.- Campos en mi cuenta: este plugin te permite mostrar campos en la página de mi cuenta.
iii.- Añadir cualquier campo: permite añadir cualquier tipo de campo al formulario de finalización de compra o checkout de Woocommerce.
iv.- Previsualización: previsualización desde el panel de administración de los cambios realizados
v.- Campos en factura: mostrar campos en las facturas de Woocommerce (con Woocommerce PDF Invoices & Packing Slips)
vi.- Mostrar campos para determinados productos del carrito: el plugin permite mostrar campos de registro en función de si el carrito contiene determinados productos o productos que pertenezcan a una determinada categoría.
Me encanta el diseño web y el mundo del ecommerce. Apasionado de Prestashop, Woocommerce/Wordpress y de la formación. Me gustaría que este blog te sirviera de ayuda para poner en marcha e ir mejorando y evolucionando tu tienda online. Ya seas un profesional del sector o no, seguro que encontrarás mucha información de valor e interés aquí.
Hola amigos en ese mismo formulario hayu un check «He leído y estoy de..» como hago para que el usuario vea el mensaje de error cuando no lo chequea
Buenas Juan Carlos.
Para que cualquier campo sea obligatorio tienes que marcarlo como «Required»
Me gustaría también invitarte a que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!!). En la plataforma tienes cursos sobre WordPress, Curso como crear una tienda online de éxito, Woocommerce, Curso alta e indexación web en google, cursos Analytics ecommerce, SEO general, SEO tiendas online, plantillas wordpress como flatsome, Divi, Astra pro, , etc. etc. Seguro que sería de gran ayuda durante la creación de tu web y después de la creación de la misma.
Hola amigo mi necesidad es agregar dos Campos mas en el registro pero no en los detalles de factura, osea, en Woocommerce habilito la opción de permitir a usuarios crear cuenta al finalizar la compra, pero solo me habilita nombre de usuario y contraseña, quiero tambien pedirles fecha de nacimiento y sexo, como puedo hacer esto
Hola Norberto.
Siento decirte que con este plugin solo se pueden gestionar los campos de: Billing Fields, Shipping Fileds, Additional Fields. Lo tienes detallado en el apartado 2 del post.
Me gustaría también invitarte a que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!!). En la plataforma tienes cursos sobre WordPress, Curso como crear una tienda online de éxito, Woocommerce, Curso alta e indexación web en google, cursos Analytics ecommerce, SEO general, SEO tiendas online, plantillas wordpress como flatsome, Divi, Astra pro, , etc. etc. Seguro que sería de gran ayuda durante la creación de tu web y después de la creación de la misma.
hola Joaquin, gracias por la información muy útil, quería consultarte: sabes que al ordenar mi formulario y guardar los cambios este no se mantiene, sera algún problema de versión?
Buenas
Podría ser algún problema de la versión del plugin o compatibilidad con tu versión de wordpres. Pero también podría ser:
1.- Tenma de navegador web: prueba con varios navegadores-> Chrome, Firefox, etc (incluso con otro ordenador)
2.- Tema de configuración de servidor. Escribe un ticket de soporte a tu empresa de alojamiento a ver…
Me gustaría también invitarte a que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!!). En la plataforma tienes cursos sobre WordPress, Curso como crear una tienda online de éxito, Woocommerce, Curso alta e indexación web en google, cursos Analytics ecommerce, SEO general, SEO tiendas online, plantillas wordpress como flatsome, Divi, Astra pro, , etc. etc.
Gracias por el tutorial, una consulta, tal vez me puedes recomendar un plugin o ayudarme con el código para eliminar el campo de código postal de la sección de DIRECCIONES de la página MI CUENTA? por favor
Tal cual lo explicas ya lo eliminé de la página de CHECKOUT, pero como indicas me sigue apareciendo en la página de MI CUENTA y pues no lo necesito.
Gracias
Hola Jacqueline.
Mira a ver si estos posts te sirve de ayuda:
https://ayudawp.com/personalizar-mi-cuenta-woocommerce/
https://diegol.top/woocommerce/personalizar-mi-cuenta/
https://davidrl.com/woocommerce/personalizar-mi-cuenta-woocommerce/
Me gustaría también invitarte a que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!!). En la plataforma tienes cursos sobre WordPress, Curso como crear una tienda online de éxito, Woocommerce, plantillas wordpress como flatsome, Divi, Astra pro, cursos Analytics ecommerce, seo general, SEO tiendas online, etc. etc.
Gracias por la mención Joaquin 🙂
Gracias a ti,
tienes un buen contenido
un saludo
existe alguna forma para validar o dar formato a las casillas de checkout de woocommerce mediante javascript o algo similar ?
Hola Javier.
No conozco ningún plugin para validar los campos del checkout de woocommerce. Con programación, siempre se puede hacer.
Hola Joaquín,
Gracias por esta información, quería hacerte esta consulta: por alguna razón que no acabo de descifrar el campo del código postal ha dejado de verse, cuando recargo la página de finalizar compra, alcanza a verse, solo un instante y luego desaparece. Lo he revisado varias veces y no encuentro qué puede estar pasando, está activado, como campo obligatorio y con la clase form-row-wide,address-field, Display in Emails y Display in Order Detail Pages están desactivados.
¿Tienes idea de qué puede ser?
Desde ya muchas gracias!
Buenas, yo probaría a desactivar el plugin para modificar campos de registro, para ver si es un problema provocado por el plugin o es otra cosa
Muy buen trabajo me sirvió
como puedo incluir un campo en mi orden de pedido, en este caso a el nombre de colonia ya que solo aparece calle telefono puros campos originales de woocomerce y ya seleccione las ultimas casillas que son display en mail y display in order details page
Buenas.
El plugin solo te permite añadir nuevos campos en el registro del cliente. No nuevos campos en el pedido o en los productos.
Para eso deberías buscar un plugin de personalización de productos
Hola! Tengo un problema, y es que no consigo quitar el doble campo de teléfono. Me explico:
Ésto es lo que actualmente aparece:
NOMBRE *
APELLIDOS *
NOMBRE DE LA EMPRESA
PAÍS (OPCIONAL)
DIRECCIÓN DE LA CALLE *
LOCALIDAD / CIUDAD *
REGIÓN / PROVINCIA *
CÓDIGO POSTAL *
TELÉFONO *
CORREO ELECTRÓNICO *
DNI / NIF *
MOBILE PHONE
CREAR UNA CONTRASEÑA PARA LA CUENTA *
Si te fijas, hay un MOBILE PHONE, y no consigo quitarlo de la versión gratuita, es más, ni siquiera aparece como posible para editar en la lista.
Sabes si hay alguna forma de modificarlo? O es en la versión de pago?
Mil gracias por tu ayuda!
Buenas,
Lo que comentas es muy raro, ya que por defecto Woocommerce no incluye ese campo de «Mobile Phone». Además, fíjate que es el único que aparece en inglés.
Es como si lo generara algún plugin que pudieras tener instalado, tu plantilla, o algo por el estilo. Asegúrate que no está creado ese campo en la pestaña «Additional Fields» y que no está generado por tu plantilla o algún plugin.
Buen día, hay alguna forma de agregar una columana con un campo personalizado en la pagina del carrito por ejemplo mostrar otra columna con puntos por producto?
Hola Marín.
No es posible, tendrías que buscar algún plugin para personalizar el carrito de Woocommerce. Lo cierto, es que yo no conozco ninguno.
Hola, Hay algún plugin o forma de modificar el formulario de las valoraciones de producto (aparece una ventana que solicita clic para envíar posts que en mi caso es innecesaria), puede quitarse?? Además de que con la nueva ley de protección de datos necesito incluir una casilla para el aviso legal…Gracias anticipadas!
Buenas,
Tengo intención de analizar en profundidad el tema de las reseñas y valoraciones en Woocommerce y escribir un post sobre ello, en el que intentaré abordar las cuestiones que comentas.
En principio, creo que va a ser difícil quitar el texto que comentas, y para añadir el checkbox necesitarás buscar un plugin. Aún no tengo localizado ningúno para estas reseñas, si para los comentarios del blog.
Como te digo, me apunto el post para el futuro.
Hola!
Me gustaría saber si la página de registro de woocommerce se puede modificar.
Queremos incrustar un botón a nuestro propio formulario de registro.
Buenas,
Con el plugin que se ve en el post solo se pueden modificar y añadir nuevos campos al registro que hay en el checkout o proceso de compra, pero no en el registro de cliente sin compra.
woo amigo e llevado mese buscado algo y tu fuistes la solucion gracias sigue asi con tus aportes gracias.
Hola!
Muchas gracias por este post, he instalado el plugin checkout field editor y me ha sido de gran ayuda!
Pero tengo un par de dudas.
En el caso del checkbox de aceptación de política de privacidad, el formulario no se envía si no está marcada, pero ¿queda registrado en algun sitio que?.
Y por otro lado, tengo un checkbox para que el cliente marque en caso de querer recibir ofertas en mi tienda. ¿Cómo se quien lo ha marcado y quien no?
Buenas,
1.- La información seleccionada por el cliente con respecto a los nuevos campos se muestra en la información de ese pedido. Concretamente en el bloque denominado: «Campos Personalizados».
2.- Tienes que mirarlo en el pedido
Te pongo enlace por si te interesa ampliar info sobre como implementar la RGPD con Woocommerce
Un saludo
Hola!
¿hay algún pluguin donde ese puedasn añadir campos en la pagina de «mi cuenta» a la hora de registrarse?
Hola Toño,
Creo que este plugin lo hace: Woocommerce Registration Plugin, Add Custom Registration Fields
Héchale un vistazo a las imágenes del botón «screenshots». Parece que este plugin permite añadir campos al formulario de registro que se muestra cuando se accede a la página de mi cuenta.
Gracias por la info!!