Cómo añadir campos de formulario de registro personalizados en WooCommerce

¿Quieres crear una experiencia de usuario más personalizada y fluida para tus clientes en tu tienda online basada en WooCommerce?

Una de las formas más eficaces de hacerlo es añadiendo campos personalizados a tu formulario de registro de WooCommerce.

Para quienes utilizan Woocommerce, el formulario de registro predeterminado es bastante básico y no ofrece la opción de añadir campos adicionales. Esto puede ser problemático, ya que puede haber casos en los que necesites recopilar información adicional de los usuarios durante el proceso de registro.

Añadir un formulario personalizado a tu sitio web puede mejorar su profesionalidad y permitirte recopilar información importante del usuario durante el proceso de registro, entre otras ventajas.

En este artículo, te explicaré cómo añadir campos personalizados en el formulario de registro de Woocommerce utilizando tres métodos diferentes.

¿Por qué añadir campos personalizados a tu formulario de registro de WooCommerce?

Añadir campos personalizados a tu formulario de registro de WooCommerce puede mejorar significativamente el rendimiento de tu tienda online y la experiencia del cliente.

Aquí tienes algunas razones por las que deberías añadir campos personalizados a tu formulario de registro de WooCommerce:

• Recopila información adicional de tus clientes para conocerlos mejor y facilitarles las cosas en consecuencia.
• Mejora la experiencia del usuario ofreciéndole servicios más personalizados.
• Puede ayudarte a simplificar el proceso de pago.
• Puede ayudarte a recopilar la información que ayude a tu equipo de atención al cliente a abordar las consultas o problemas con mayor eficacia.

Cómo añadir campos de formulario de registro personalizados en WooCommerce (3 métodos)

En este tutorial, exploraremos tres métodos para añadir campos de formulario de registro personalizados en WooCommerce. Sigue los pasos que se indican a continuación para añadir manualmente campos de formulario de registro personalizados a tu tienda WooCommerce. Si utilizas el alojamiento para WooCommerce que ofrece Cloudways, puedes utilizar cualquiera de estos métodos.

Método 1: Añadir campos personalizados al formulario de registro mediante código

Paso 1: Activar la opción de registro de clientes

El primer paso es activar los formularios de registro de WooCommerce en la página de inicio de sesión de la cuenta.

Por esto,

• Ve a WooCommerce → Configuración → Cuentas
• Marca la casilla Activar registro de clientes en la página “Mi cuenta”.

• Tras activar esta opción, deberías poder ver el formulario de registro de WooCommerce en la parte frontal.

Paso 2: Añade código personalizado en el archivo Functions.php

Como puedes ver, el formulario de registro predeterminado de WooCommerce es bastante simple y carece de muchos campos necesarios.

Sin embargo, podemos añadir más campos a nuestro gusto. Por ejemplo, para incluir campos adicionales como nombre, apellidos, número de teléfono, etc., añade las siguientes líneas de código al final de tu archivo functions.php, que se encuentra en la carpeta de tu tema.

function wooc_extra_register_fields() {?>

       <p class="form-row form-row-wide">

       <label for="reg_billing_phone"><?php _e( 'Phone', 'woocommerce' ); ?></label>

       <input type="text" class="input-text" name="billing_phone" id="reg_billing_phone" value="<?php esc_attr_e( $_POST['billing_phone'] ); ?>" />

       </p>

       <p class="form-row form-row-first">

       <label for="reg_billing_first_name"><?php _e( 'First name', 'woocommerce' ); ?><span class="required">*</span></label>

       <input type="text" class="input-text" name="billing_first_name" id="reg_billing_first_name" value="<?php if ( ! empty( $_POST['billing_first_name'] ) ) esc_attr_e( $_POST['billing_first_name'] ); ?>" />

       </p>

       <p class="form-row form-row-last">

       <label for="reg_billing_last_name"><?php _e( 'Last name', 'woocommerce' ); ?><span class="required">*</span></label>

       <input type="text" class="input-text" name="billing_last_name" id="reg_billing_last_name" value="<?php if ( ! empty( $_POST['billing_last_name'] ) ) esc_attr_e( $_POST['billing_last_name'] ); ?>" />

       </p>

       <div class="clear"></div>

       <?php

 }

 add_action( 'woocommerce_register_form_start', 'wooc_extra_register_fields' );

Después de añadir el código, si actualizas la página, verás los campos añadidos al formulario de registro de WooCommerce.

Para relacionar estos campos del formulario de inscripción con la dirección de facturación, debes incluir el prefijo “facturación_” antes del nombre del campo.

Ahora que sabemos cómo añadir campos personalizados a nuestro formulario de registro, veamos una lista de algunos campos de formulario de WooCommerce.

Lista de campos de formulario de WooCommerce

La siguiente es una lista de todos los campos de formulario WooCommerce válidos que pueden añadirse al formulario de registro y que pueden asociarse a una dirección de facturación.

• nombre_de_facturación
• apellido_facturación
• empresa_facturación
• dirección_facturación_1
• dirección_facturación_2
• ciudad_facturación
• código_postal_facturación
• país_facturación
• estado_de_facturación
• correo_facturación
• teléfono_facturación

Lanzar tiendas WooCommerce escalables

Maneja un número ilimitado de campos personalizados con:
✓ Autoescalado para picos de tráfico
✓ Recursos dedicados a WooCommerce
✓ Caché Redis integrada

Iniciar ahora

Paso 3: Validar los campos del formulario de registro

• Después de crear los campos personalizados, el siguiente paso es validar estos campos de formulario recién añadidos.
• Para validar estos campos de estructura, incluye las líneas de código adjuntas al final de tu archivo functions.php, que se encuentra en la carpeta del tema.

/**

* register fields Validating.

*/

function wooc_validate_extra_register_fields( $username, $email, $validation_errors ) {

      if ( isset( $_POST['billing_first_name'] ) && empty( $_POST['billing_first_name'] ) ) {

             $validation_errors->add( 'billing_first_name_error', __( '<strong>Error</strong>: First name is required!', 'woocommerce' ) );

      }

      if ( isset( $_POST['billing_last_name'] ) && empty( $_POST['billing_last_name'] ) ) {

             $validation_errors->add( 'billing_last_name_error', __( '<strong>Error</strong>: Last name is required!.', 'woocommerce' ) );

      }
         return $validation_errors;
}

add_action( 'woocommerce_register_post', 'wooc_validate_extra_register_fields', 10, 3 );

Si prestas atención al código anterior, comprenderás que simplemente valida los valores enviados a través del formulario comprobando la matriz $_POST y genera un mensaje de error si un valor no está presente o si los datos no son válidos.

Además, es posible incluir varias reglas de validación y aplicarlas a diferentes campos. En la captura de pantalla siguiente, puedes ver un ejemplo de aplicación de una de nuestras reglas de validación personalizadas.

Paso 4: Guardar los valores en la base de datos

• A continuación, tenemos que guardar estos valores en la base de datos. Para insertar valores en la base de datos, añade la siguiente función en el archivo functions.php de tu tema.

/**

* Below code save extra fields.

*/

function wooc_save_extra_register_fields( $customer_id ) {

    if ( isset( $_POST['billing_phone'] ) ) {

                 // Phone input filed which is used in WooCommerce

                 update_user_meta( $customer_id, 'billing_phone', sanitize_text_field( $_POST['billing_phone'] ) );

          }

      if ( isset( $_POST['billing_first_name'] ) ) {

             //First name field which is by default

             update_user_meta( $customer_id, 'first_name', sanitize_text_field( $_POST['billing_first_name'] ) );

             // First name field which is used in WooCommerce

             update_user_meta( $customer_id, 'billing_first_name', sanitize_text_field( $_POST['billing_first_name'] ) );

      }

      if ( isset( $_POST['billing_last_name'] ) ) {

             // Last name field which is by default

             update_user_meta( $customer_id, 'last_name', sanitize_text_field( $_POST['billing_last_name'] ) );

             // Last name field which is used in WooCommerce

             update_user_meta( $customer_id, 'billing_last_name', sanitize_text_field( $_POST['billing_last_name'] ) );

      }

}

add_action( 'woocommerce_created_customer', 'wooc_save_extra_register_fields' );

Así concluye el proceso de añadir, validar e insertar los campos personalizados para su uso futuro. Cuando accedas a la página de la dirección de facturación en tu cuenta y hagas clic en “Editar”, verás que los valores del formulario de inscripción ya están rellenados en los campos correspondientes.

Método 2: Añadir campos de formulario de registro personalizados utilizando los ganchos de WooCommerce

Aparte del método 1, también puedes añadir los campos personalizados del formulario de registro en tu tienda online a través de Webhooks. En caso de que te lo estés preguntando, aquí se explican los webhooks.

He aquí cómo puedes hacerlo:

Paso 1: Editar la página de la cuenta de WooCommerce

• Si deseas utilizar los ganchos de WooCommerce para editar la página Mi cuenta de WooCommerce, sigue el siguiente fragmento de código.

function woocommerce_edit_my_account_page() {

    return apply_filters( 'woocommerce_forms_field', array(

        'woocommerce_my_account_page' => array(

            'type'        => 'text',

            'label'       => __( 'Socail Media Profile Link', ' cloudways' ),

            'placeholder' => __( 'Profile Link', 'cloudways' ),

            'required'    => false,

        ),

    ) );

}

function edit_my_account_page_woocommerce() {

    $fields = woocommerce_edit_my_account_page();

    foreach ( $fields as $key => $field_args ) {

        woocommerce_form_field( $key, $field_args );

    }

}

add_action( 'woocommerce_register_form', 'edit_my_account_page_woocommerce', 15 );

• Este es el resultado del fragmento:

El fragmento anterior comienza con la función woocommerce_edit_my_account_page() que se utiliza en la parte posterior del fragmento. Esta función devuelve una matriz multidimensional que contiene información sobre los campos (tipo, etiqueta, marcador de posición, obligatorio o no) que añades al formulario.

Para garantizar que los valores de los campos puedan actualizarse posteriormente, la matriz se procesa a través de la función woocommerce_form_field().

He utilizado la función edit_my_account_page_woocommerce( ) en la siguiente mitad del fragmento. Como puedes ver, la variable $fields contiene la matriz generada por la función woocommerce_edit_my_account_page() . Se recorre mediante el bucle foreach().

Añadir campos de formulario de registro personalizados en WooCommerce

Nuestro alojamiento WooCommerce gestionado incluye:
✓ Puesta en escena con 1 clic para probar campos personalizados
✓ PHP 8.3 para compatibilidad con plugins
✓ Asistencia experta 24/7

Iniciar prueba gratuita

Paso 2: Añadir el campo de formulario WooCommerce requerido

Como puedes ver, el fragmento anterior es muy flexible, y puedes añadir cualquier tipo de campo que desees proporcionando el valor de estructura de campo apropiado en la matriz $fields.

He aquí algunos ejemplos:

Área de texto

'woocommerce_my_account_page' => array(
         'type'        => 'textarea',
         'label'       => __( 'Socail Media Profile Link', 'cloudways' ),
         'placeholder' => __( 'Profile Link', 'cloudways' ),
         'required'    => false,
     ),

casilla

'woocommerce_my_account_page_checkbox'   => array(

           'type'  => 'checkbox',

           'label' => __( 'Checkbox', 'cloudways' ),

       ),

Lista de opciones

'woocommerce_my_account_page_select'     => array(

           'type'    => 'select',

           'label'   => __( 'Select Field', 'cloudways' ),

           'options' => array(

               '' => __( 'Select an options.', 'cloudways' ),

               1  => __( 'WooCommerce forms', 'cloudways' ),

               2  => __( 'WooCommerce  my account page', 'cloudways' ),

               3  => __( 'WooCommerce edit my account page', 'cloudways' ),

               4  => __( 'How to edit WooCommerce my account page', 'cloudways' ),

               5  => __( 'Edit my account page WooCommerce', 'cloudways' ),

           ),

Así es como se verían estas opciones en el formulario:

Puedes guardar estos valores en la función wooc_save_extra_register_fields(), mencionada anteriormente.

Método 3: Añadir campos personalizados al formulario de registro mediante un plugin

Para crear un formulario de registro utilizando un plugin en WooCommerce, puedes utilizar el popular plugin“Registro de usuarios” de WP Everest. Ofrece un sencillo constructor de formularios de arrastrar y soltar que te permite crear un formulario de registro personalizado para tu sitio WooCommerce.

A continuación te explicamos cómo crear un formulario de registro utilizando el plugin “Registro de usuarios”:

Paso 1: Instalar y activar el plugin

• Ve a tu panel de control de WordPress.
• Navega hasta“Plugins” >“Añadir nuevo”.
• Busca“Registro de usuario” en la barra de búsqueda.

• Instala y activa el plugin de WP Everest.

Paso 2: Crear un formulario de registro con campos personalizados

• Ve al panel de control de WordPress.
• Ve a“Registro de usuario” >“Añadir nuevo”.

• Puedes seleccionar cualquier plantilla o empezar desde cero. Yo seleccionaré la plantilla de formulario de Inscripción de Estudiantes.

• Dale un nombre.

• Utiliza el constructor de formularios de arrastrar y soltar para añadir y organizar los campos de tu formulario de registro. Puedes añadir campos básicos como correo electrónico, nombre de usuario y contraseña, así como campos personalizados, en función de tus necesidades.

Paso 3: Añade el Formulario de Registro a tu Sitio Web

• Puedes añadir el formulario de registro a una página o a una entrada utilizando un shortcode. Para encontrar el shortcode, ve a“Registro de usuarios” >“Todos los formularios” en tu panel de control de WordPress. Verás el shortcode listado junto a tu formulario (por ejemplo, [user_registration_form id=»123″]).
• Crea una nueva página o entrada, o edita una existente.
• Añade unbloque “Shortcode” y pega el shortcode de tu formulario de registro.

• Este shortcode añadirá un formulario de registro a tu página de cuentas.
• Publica o actualiza la página.

Enhorabuena. Has añadido correctamente el formulario de registro con campos personalizados.

Ahora tu formulario de registro personalizado debería ser visible en tu sitio web, y los usuarios podrán registrarse utilizando el formulario que has creado.

Buenas prácticas para añadir campos personalizados al formulario de registro de WooCommerce

Al añadir campos personalizados a tu formulario de registro de WooCommerce, es importante seguir las mejores prácticas para garantizar una experiencia de usuario positiva y maximizar los beneficios de la personalización. Aquí tienes algunas buenas prácticas clave que debes tener en cuenta:

• Añade campos personalizados que sean relevantes y necesarios para tu negocio y tu público objetivo.
• Limita el número de campos.
• Elige el tipo de campo adecuado para la información que estás recopilando.
• Organiza los campos de tu formulario de inscripción en un orden lógico, agrupando los campos relacionados.
• Añade reglas de validación a tus campos personalizados para asegurarte de que los datos introducidos por los usuarios son precisos y completos.
• Asegúrate de que los campos de tu formulario de registro personalizado son responsivos y se muestran correctamente en diferentes dispositivos y tamaños de pantalla.
• Prueba regularmente los campos de tu formulario de registro personalizado para asegurarte de que funcionan correctamente y proporcionan una experiencia de usuario positiva.

Solución de problemas comunes con los campos del formulario de registro de WooCommerce

A veces, cuando intentas crear un formulario de registro para WooCommerce, puedes encontrarte con algunos problemas. A continuación te explicamos cómo puedes solucionar algunos de los problemas más comunes que surgen en los campos de los formularios de registro de WooCommerce.

Problema#1: El formulario de registro no se muestra

A veces configuras el formulario de registro, pero no aparece en tu página.

Solución:

He aquí cómo puedes solucionarlo:

• Asegúrate de que WooCommerce está instalado y activado.
• Ve a WooCommerce > Configuración > Cuentas y Privacidad.
• Asegúrate de que las opciones «Permitir a los clientes crear una cuenta durante el pago» y/o «Permitir a los clientes crear una cuenta en la página “Mi cuenta”» están activadas.

Problema#2: Los campos no guardan las entradas del usuario

A veces creas un formulario de registro, pero los usuarios no pueden introducir sus datos.

Solución:

He aquí cómo puedes solucionar este problema:

• Comprueba si hay conflictos entre plugins o temas desactivando uno a uno otros plugins y cambiando a un tema predeterminado, como Twenty Twenty-One.

• Si se encuentra un conflicto, ponte en contacto con el desarrollador del plugin o tema correspondiente para obtener ayuda.

Problema#3: Los campos personalizados no aparecen en el formulario de registro

A veces los campos personalizados no aparecen en el formulario de registro. Puede deberse a varias razones. Una de ellas es que no hayas añadido el campo correctamente en el archivo.

Solución:

Aquí tienes la solución:

• Comprueba que los campos personalizados se han añadido correctamente al archivo functions.php de tu tema activo o de un plugin personalizado.
• Si los campos personalizados siguen sin aparecer, comprueba si hay conflictos entre plugins o temas.

Problema#4: El correo electrónico o el nombre de usuario ya están en uso

A veces, cuando los usuarios introducen el correo electrónico o el nombre de usuario, reciben un mensaje de error que indica que la dirección de correo electrónico o el nombre de usuario ya están en uso. Este mensaje también puede aparecer a veces con direcciones de correo electrónico únicas.

Solución:

He aquí cómo puedes evitarlo:

• Asegúrate de que el formulario de registro comprueba si hay usuarios existentes con el mismo correo electrónico o nombre de usuario y muestra un mensaje de error adecuado.
• Considera la posibilidad de utilizar un plugin, como “Registro de usuario”, para permitir que los usuarios se registren con sus cuentas de redes sociales existentes.

Problema#5: Problemas de estilo del formulario de registro

A veces no te gusta cómo aparece el formulario de registro en la tienda.

Solución:

Puedes arreglarlo jugando con el CSS.

• Inspecciona los estilos CSS aplicados al formulario de registro y ajústalos según sea necesario.
• Utiliza un tema hijo o un plugin CSS personalizado para añadir o modificar estilos CSS de forma segura.

Impulsa el crecimiento de tu tienda online con Autónomos

“Entra en el futuro del alojamiento con Cloudways Autonomous. Experimenta una escalabilidad sin fisuras, una velocidad inigualable y una seguridad blindada para tu sitio web”.

¡Empieza ya!

Resumen

En conclusión, espero que este artículo te haya resultado útil para aprender a añadir campos de formulario de registro personalizados a tu tienda WooCommerce. Añadir campos de formulario de registro en woocommerce puede mejorar significativamente la experiencia del usuario, recopilar valiosos datos del cliente y agilizar el proceso de pago.

Siguiendo nuestra completa guía, puedes implementar con éxito campos personalizados utilizando webhooks o código, o plugins, garantizando un proceso de registro personalizado y eficiente para tus clientes.

Además, con la flexibilidad añadida de los campos personalizados, puedes añadir más campos además de los de nombre, apellidos y contacto y hacerlos obligatorios si es necesario. Para obtener el mejor rendimiento, aloja tu tienda Woocommerce en los servidores de alojamiento WordPress de Cloudways.

Si tienes alguna pregunta, no dudes en comentar, y te responderé con prontitud.