A veces el formulario de registro de Woocommerce es demasiado escueto sobretodo cuando estás haciendo un e-commerce B2B (Business to business). Que por cierto se le dan muy bien a mi colega y SEO, Fran Murillo (os dejo el enlace por si tenéis proyectos de B2B y queréis contactar con él para asesoría).
Volviendo al tema en cuestión, es muy común si realizas con woocommerce webs para empresas que antes de que puedan ver los precios o que puedan entrar en la tienda tu cliente te pida que pidas un cuestionario más avanzado.
Modificar la página de registro en Woocommerce
3 Formas de hacerlo:
1 La que menos me gusta y de la que NO voy a hablar en este artículo. Crear una página de Registrate independiente y dejar todo lo demás oculto.
2 La que me gusta y voy a explicar en este artículo. Modificar la página de Woocommerce específica para el usuario «mi-cuenta» (/my-account/ por defecto). Podéis ver un ejemplo aquí.
3 La forma automática, personalizas el registro y automáticamente se registra el usuario en tu WordPress. Lo haremos con el plugin Gravity Forms.
Modificar la página de Woocommerce para el resgistro de usuarios
Modificar la página con un formulario distinto con registro Manual
Lo primero que debemos hacer es utilizar algún plugin de formularios que permita introducir el formulario mediante shortcode o php.
A mi el plugin de formularios que más me gusta con diferencia es «Gravity Forms» pero es un plugin premium de pago. Como alternativas free tenemos el más conocido Contact form 7, que será el que use como ejemplo.
En esta web explica el código php que debemos usar: https://contactform7.com/faq/can-i-embed-a-contact-form-into-my-template-file/
Una vez creemos el formulario completo, tal y como nos pida nuestro cliente.
Deberíamos ir a nuestro theme (child theme sería la mejor opción, por supuesto) y crear un template personalizado para que cuando actualices Woocommerce no pierdas este cambio.
En la carpeta de nuestro theme creamos los siguientes directorios /nuestro-theme/woocommerce/my-account/ y ahí deberíamos pegar el form-login.php original de woocommerce que ahora vamos a editar.
Y ahí debemos sustituir el clásico formulario de contacto por nuestro formulario, si usas Contact form 7 debes insertar algo así:
<?php echo do_shortcode( '[contact-form-7 404 "No encontrado"]');?>
Al hacer esto la página de /mi-cuenta/ mostrará en la parte izquierda la opción de loguearse y en la parte derecha la opción de solicitar el registro con un formulario de contacto muy completo.
Lo normal es que una vez le llegue el formulario de contacto a la persona, y una vez determine si debe registrarlo puede hacerlo desde la administración de wordpress.
Para que los usuarios no puedan ver la tienda o que no puedan ver los productos si no están logueados lo enseñaré en otro artículo más adelante.
Modificar la página con un formulario distinto con registro Automático
En este caso, los usuarios cuando rellenen el formulario automáticamente quedarán registrados en tu WordPress. Para ello tendremos que usar el plugin Premium y mejor plugin de Formularios que existe GRAVITY FORMS (en serio, sirve para muchísimas cosas, si eres un desarrollador de WordPress debes tenerlo). Y el ADD-ON USER REGISTRATION de Gravity Forms.
Esto es un builder de Gravity Forms
Cuando activas el Addon de User registration te aparecen los siguientes campos adicionales
Una vez has creado el formulario con los campos que tu registro requiere e incluido los campos de registro como Nombre de usuario, contraseña… debes configurar el formulario como aparece en la siguiente captura de pantalla (es la configuración estándar, tu puedes personalizarlo mucho más).
Los campos adicionales requerirán que crees Custom Fields para el usuario, es decir si quieres almacenar el campo Comida favorita para un usuario (no se me ocurre por qué ibas a querer crear ese campo pero cosas más raras he visto) antes deberías crear el custom field Comida_Favorita para los usuarios. Si quieres saber más sobre esto deberás echar un vistazo a varios tutoriales que hay sobre esto ( buscar tutoriales )
Después de tener esta parte lista debemos ir a nuestro woocommerce/templates/my-account/wp-login.php (Yo lo modificaría a nivel de child theme para que no se me modifique con cada actualización de Woocommerce) y lo modificaríamos tal y como he explicado en el vídeo del anterior método, pero esta vez de la siguiente forma:
Así cargaríamos el formulario con ID 1 (si queremos cargar otro formulario solo hay que cambiar el primer número por el ID del formulario que queramos mostrar).
Y el resultado sería algo así:
Una vez rellenado el formulario por parte del usuario, automáticamente quedará registrado en nuestra web y podremos ver sus datos en la sección de Usuarios en nuestro WordPress.
Pues bien, así podríais modificar el aburrido y clásico formulario de registro cuando vuestro negocio lo necesite, no es rápido pero si tienes conocimientos medios de WordPress y plantillas lo puedes conseguir en un periquete!
Espero haber sido de ayuda 😉
Unas imágenes con los pasos serían de gran ayuda. Saludos
Ok, las añadiré, como es sencillo no las puse. Gracias por la recomendación. Saludos!!
hola necesito ver la opcion de que cuando un cliente se registra, el sistema le pida todos sus datos, es decir email, telefono, ciut o nif, domicilio codigo postal provincia pais, como puedo hacer eso?
Si, el artículo trata sobre eso. Puedes crear campos personalizados y vincularlos a un formulario de Gravity Forms. Lo explico ahí.
Hola buenas !
me parece interesante este tema que abordas, de hecho llevo tiempo buscando información en la web referente al mismo y la única en español que encuentro es la que suministras, (no tengo mucha experiencia) me ayudaría muchísimo si pudieras enriquecer la publicación con imágenes, si bien hay muchos tutoriales que indican como hacer un formulario de contacto con el plugin Contact form 7, ninguno indica como realizar una pagina de registro. (me brillaron los ojos al encontrarla, pero me he perdido en el como) gracias anticipadas!
Ok! Voy a hacer un vídeo para mostrar como se hace. En esta semana espero tenerlo!
Saludos 🙂
Genial, muchas gracias por tu aporte
De nada! 😀
Genial aporte! ya he conseguido hacerlo y el problema que me paraliza es que no se como relacionar el formulario para que se registre el usuario al presionar el botón registrar. Gracias
Buenas,
Este método no es para registro directo, es para que haya un paso intermedio y lo registres tu manualmente. Yo lo he utilizado cuando me piden hacer filtro de quien se registra…
Saludos!
Se realiza con el Addon de User Registration para Gravity Forms
Buenas gracias por el tutorial, el único válido en español. Estaría bien que no se enviaran como correo electrónico, si no que se registrara automáticamente con estos datos y en el perfil del usuario aparecieran, pero me temo que hacen falta bastantes modificaciones para realizar esto.
Saludos,
Totalmente de acuerdo, se puede pero no es tan sencillo… como de esta forma, hay que tener conocimientos bastante avanzados para poder crear el usuario automáticamente. Saludos amigo!
Me gusto todo lo que mencionas aquí.
Mira te comento me toco hacer una web en la que un usuario llena un formulario dejando todos sus datos personales y adjuntando su curriculum y que luego de eso se lo direccione a una pagina para hacer un pago por «Mercado Pago» . Quiero saber si implementando tu método puedo hacer algo parecido?.En otras palabras el usuario tiene que pagar para estar registrado en mi pagina y yo brindarle la posibilidad que sus datos se muestren en la pantalla principal. De seguro la pagina no es tan buena que digamos pero eso me pidieron. Lo que quiero es tener un registro de esas personas en mi panel de administración. Si se te ocurre otra idea que pueda serme útil o que use otras maneras te lo agradecería.
Buenas Pablo creo que si usas en vez del plugin de formularios que yo he usado usas el Gravity Forms (Premium de pago) puedes configurar el formulario para que haga muchas cosas más. Se que podría dirigirte a una pagina de pago con paypal e incluso cobrar… Échale un ojo a ver si te sirve de ayuda.
Se me hizo bastante útil. Solo que estaría mejor poderlo integrar al formulario de registro y que no nos enviara un correo y tener que retrabajar en la acción del registro. Muchas gracias.
Muchas gracias por tu aporte!
Necesito añadir una variante adicional al logueo del usuario, es que el usuario tenga una determinada categoría o perfil para visualizar el precio con un descuento (3 tipos de descuentos según perfil).
Alguna idea que puedas sugerir o aportar?
Buenas Carlos, ten en cuenta que este formulario sería para el registro. Es decir que tu recibirías el email solicitando registro y manualmente lo registras.
Luego lo que quieras hacer con el formulario de logueo sique puedes modificarlo para que solo puedan registrarse los que tengan un cierto rol de usuario. Pero ya tienes que programar o usar otros plugins.
Saludos!
OYE EN DONDE PUEDO ENCONTRAR EL HTML DE LA USER INTERFACE DE MY ACCOUNT DE WOOCOMERCE?
Hola Muchas gracias. Hice la instalación como sugieres, solo que en lugar de registarse como usuario de la tienda, con el formulario solo envian datos como un formulario de contacto. Como puedo hacer para que ese formulario se convierta en un registro de usuario?
Hola! Lo explico con Gravity Forms. Es la única forma que se sin tener que programarlo a medida. Saludos!
Hola, muchas gracias por compartir, tengo un problema no se si me puedas ayudar, llegue aquí buscando como cambiar el formulario del woocommerce porque lo que necesito es que ala izquierda siga apareciendo el login y a la derecha en lugar de un formulario de registro, el usuario haga clic en un botón que diga consumidor final, que no necesite colocar datos del cliente como la dirección y demás, porque no se va a enviar si no que el cliente se acerca a una de las tiendas a recoger el pedido, el problema también es como entrar en la tienda cuando hagan clic en ese botón? porque ahora esta bloqueada la tienda para que no se pueda entrar si no se logea el usuario.
Hola Francisco, lo de que aparezca el botón de consumidor final es sencillo, en vez del PHP del formulario deberías poner un botón que redirija donde tu quieres. Lo del logueo es un problema, claro si la página está cerrada al publico y necesita loguearse… Tal vez puedas modificar el MY-ACCOUNT (MI-CUENTA) para que una vez allí (después de loguearse) el usuario vea la opción de «CONSUMIDOR FINAL». En fin… tendrás que darle al coco para solucionar este caso que se te presenta. saludos!
Hola Miguel muchas gracias por el articulo, ahora la consulta es la siguiente. Como se podría customizar la bandeja de entrada del usuario registrado? como sabes woocommerce presenta un formato poco profesional, que te muestra los campos como:
*Escritorio
*Pedidos
*Descargas
*Direcciones
*Detalles de la cuenta
Cerrar sesión
existe un plugin o algun css que modifique esto?
muchas gracias un saludo.
Hay un archivo my-account.php que es el que hace las llamadas. Siguiendo ese hilo puedes modificarlo y personalizarlo, eso si… necesitas saber programar. Con CSS podrías ocultar fácilmente las opciones que te molesten como por ejemplo descargar. Busca la clase CSS y usa el display:none; No es la mejor solución, de hecho lo consideraría algo transitorio hasta que lo puedas programar como a ti te gusta. Un saludo!
Gracias por tu amabilidiad y tu tiempo. No fue de ayuda, fue DE MUCHA AYUDA.
Me alegro que haya sido de ayuda! Un saludo!
Hola!!
Gracias amigo, excelente post!.
Mi duda es, personalizando campos con Gravity Forms, el registro de nuevos usuarios ingresa en Usuarios/wordpress? O sea los que fueran registrados en la pagina «login/register» de woocommerce. Lo que no quiero es que queden almacenados como si fuera en un formulario de contacto, quiero que queden como usuarios de WordPress. Lo siento, soy nuevo en esto y todavía hay mucho que aprender!!
Muchas gracias!
Hola Ezequiel,
usando gravity forms quedan grabados como usuarios de wordpress, no como si te enviaran un formulario de contacto….
Otra opción es hacerlo con el plugin Woocommerce custom fields de rightpress (se puede conseguir en themeforest).
Yo lo tengo hecho con este último plugin y la verdad es que es super customizable y tambien puedes marcar como privados para que no se muestren en la pagina de mi cuenta o en el checkout pero si en el backend de wordpres… Obviamente, tambien se pueden marcar com publicos para que se carguen en ambas paginas tambien.
Ademas, se añaden muy facilmente al archivo form-login.php mediante una linea de codigo y es 100% customizable.
Se puede poner condiciones de roles, etc.
Tambien se pueden crear otros campos personalizados con este plugin… Es super extenso y muy facil de usar.
Hola so podrá personalizar el formulario de registro de igual manera el wp_login (el login principal de wordpress)
Hola.
Si, supongo que se podrá. Pero no lo he hecho nunca. Lo siento.
Buenas tardes.
Tengo mis dudas si quiero que ese formulario de registro e inicio se redireccione a una URL en concreto, en mi caso les tiene que redirigir a un panel de usuario, en el idioma corrrespondiente….Como podría hacerlo?
Muchas gracias.
Un saludo.
para gravity el codigo correcto es este:
el archivo a modificar es este:
woocommerce/templates/my-account/form-login.php
el texto a borrar dentro de ese archivo es este:
<form method="post" class="woocommerce-form woocommerce-form-register register" >
*
<input type="text" class="woocommerce-Input woocommerce-Input–text input-text" name="username" id="reg_username" autocomplete="username" value="» />
*
<input type="email" class="woocommerce-Input woocommerce-Input–text input-text" name="email" id="reg_email" autocomplete="email" value="» />
*
<button type="submit" class="woocommerce-Button woocommerce-button button woocommerce-form-register__submit" name="register" value="»>
no se, a mi se me complico y por eso pongo aqui lo que hice para entender este tutorial. gracias y saludos
Hola. Eso fue lo que borraste? pero que pusiste para que te funcionase. Yo pongo
y no funciona nada. No sé que hacer 🙁
Excelente tutorial. Me ha hecho entender el proceso de manera muy clara. Como ya han comentado, actualmente no parece que el archivo woocommerce/templates/my-account/form-login.php tenga esas lineas de código que se puedamos sustituir por nuestro formulario CF7 o Gravity.
Buscando en la carpeta /httpdocs/wp-content/plugins/woocommerce/templates/myaccount no hay nada parecido a un register.php y al abrir form-login.php solo aparece la columna primera con el formulario de login.
Si abrimos my-account.php solo hace referencia a una accion: do_action( ‘woocommerce_account_content’ ) donde supongo que habra alguna referencia al formulario de registro pero no lo localizo.
Hablo de un wordpress 5.5.1 y un Woocommerce 4.4.1. Si alguien lo ha resuelto recientemente o quisiera dar alguna pista lo agradeceria mucho. Yo por mi parte voya abuscar mas info aunque sea en ingles y ya os comentare si lo he solucionado a fecha de 09/2020
P.D. : Miguel, si pudieras ayudarme en esto te estaria muy agradecido 😉
Pues parece ser que la version de mi archivo form-login.php era antigua y descargando una actual desde aqui: https://github.com/woocommerce/woocommerce/blob/4.4.0/templates/myaccount/form-login.php ya he podido localizar el formulario de registro que debo sustituir por el de gravity. Un saludo.
Hola, tremendo aporte muchas gracias, tengo una consulta, se podrá registrar más de un usuario con un solo formulario de gravity forms y este addon.
Ademas, permite mostrar contenido personalizado (HTML, shortcodes, texto, imagenes, video) entre los campos. Asi si puedes personalizar el formulario de registro de WooCommerce a la medida de las necesidades de tu negocio.