Personalizar el formulario de registro en Woocommerce

A veces el formulario de registro de Woocommerce es demasiado escueto sobretodo cuando estás haciendo un e-commerce B2B (Business to business).

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.

personalizar formulario de registro en woocommerce

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 "Not Found"]');?>

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

formularios gravityform

Cuando activas el Addon de User registration te aparecen los siguientes campos adicionales

addon user registration wordpress

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).

configurar formulario para registro personalizado woocommerce

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:

insertar formulario gravity form via php

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í:

Formulario de Woocommerce Personalizado

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 😉

seo en wontalia

26 Comments

  1. José febrero 15, 2017 Responde
    • Miguel Ángel febrero 17, 2017 Responde
  2. Amanda abril 4, 2017 Responde
    • Miguel Ángel abril 5, 2017 Responde
  3. CRISTHIAN mayo 14, 2017 Responde
    • Miguel Ángel mayo 18, 2017 Responde
  4. Gerard junio 1, 2017 Responde
    • Miguel Ángel junio 1, 2017 Responde
  5. Programador web junio 8, 2017 Responde
    • Miguel Ángel junio 8, 2017 Responde
  6. PABLO junio 12, 2017 Responde
    • Miguel Ángel julio 26, 2017 Responde
  7. Javier Moreno junio 12, 2017 Responde
  8. Carlos Rodriguez julio 7, 2017 Responde
    • Miguel Ángel julio 26, 2017 Responde
  9. Ricardo Sauceda julio 26, 2017 Responde
  10. Mario enero 16, 2018 Responde
    • Miguel Ángel febrero 2, 2018 Responde
  11. Francisco enero 25, 2018 Responde
    • Miguel Ángel febrero 3, 2018 Responde
  12. Alex enero 31, 2018 Responde
    • Miguel Ángel febrero 3, 2018 Responde
  13. JP febrero 1, 2018 Responde
    • Miguel Ángel febrero 2, 2018 Responde
  14. Ezequiel febrero 4, 2018 Responde
    • Nerea abril 5, 2018 Responde

Leave a Reply

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.