Cómo personalizar el formulario de registro de WooCommerce

¿Quieres editar tus formularios de registro y obtener más clientes potenciales? En esta guía, le mostraremos diferentes formas de personalizar el formulario de registro de WooCommerce con y sin complementos.

Los registros en línea son una de las partes más esenciales de su tienda en línea. Es un procedimiento estándar permitir que sus clientes creen una nueva cuenta para comprar en su tienda. Para evitar abandonos, debe asegurarse de que sus formularios de registro estén adaptados a su tienda y solo tengan los campos necesarios.

¿Por qué personalizar el formulario de registro predeterminado de WooCommerce?

Cuando un cliente registra una nueva cuenta en su tienda en línea, recibe cierta información sobre ellos, como correo electrónico, nombre, dirección de facturación y más. Sin embargo, el formulario de registro predeterminado de WooCommerce solo solicita la dirección de correo electrónico para registrar una nueva cuenta. Esto puede hacer que el proceso sea más rápido para el cliente, pero también es una oportunidad desperdiciada para conocer mejor a sus compradores.

Si los clientes necesitan proporcionar información adicional, deben agregarla durante el pago o desde la página "Mi cuenta". Este puede ser un procedimiento muy repetitivo y largo para sus compradores e incluso puede hacer que pierdan interés en su tienda en línea.

La buena noticia es que puedes evitar esto agregando todos los campos necesarios al formulario de registro con la información que deseas obtener. De esta manera, obtendrá la información directamente y los clientes no tendrán que actualizar sus datos más adelante, lo que lo hará más conveniente tanto para usted como para sus usuarios.

Ahora veamos los diferentes métodos para editar el formulario de registro de WooCommerce .

Cómo personalizar el formulario de registro de WooCommerce

Hay 3 formas principales de personalizar su formulario de registro de WooCommerce:

1. Desde el panel de control de WooCommerce
2. Con complementos
3. Programáticamente

Echemos un vistazo a cada método. Antes de comenzar, asegúrese de haber configurado correctamente WooCommerce en su tienda.

1. Personalice el formulario de registro de WooCommerce desde el panel de control de WooCommerce

De forma predeterminada, puede editar su formulario de registro desde el panel de control de WooCommerce. Vaya a WooCommerce > Configuración y abra la pestaña Cuentas y privacidad . Aquí, puede cambiar algunas opciones cuando los clientes crean una nueva cuenta en su tienda.

Por ejemplo, puede activar opciones para generar automáticamente nombres de usuario y contraseñas durante la creación de la cuenta. Estas opciones están activadas por defecto, pero puedes desactivarlas.

También hay algunas otras opciones para permitir que los clientes creen una cuenta en el proceso de pago o en la página Mi cuenta, permitir que los compradores realicen pedidos sin una cuenta, etc. Simplemente marque las opciones que desea habilitar y luego guarde los cambios .

Como puede ver, estas opciones predeterminadas son bastante limitadas para editar sus formularios de registro de WooCommerce. Si desea agregar más campos o realizar cambios más importantes, deberá utilizar otros métodos.

2. Personalice el formulario de registro de WooCommerce usando complementos

Una de las mejores formas de personalizar fácilmente su formulario de registro de WooCommerce es mediante el uso de complementos dedicados. Hay varias herramientas por ahí. Para este tutorial, demostraremos cómo editar los formularios de registro utilizando el complemento de registro de usuario .

El registro de usuario es un complemento gratuito que le permite crear sus propios formularios de registro personalizados y es 100% receptivo. Deberá obtener el complemento WooCommerce que está disponible en su plan premium.

2.1. Instale y active el complemento y el complemento WooCommerce

Para comenzar a usar el complemento, debe instalarlo y activarlo, por lo que debe suscribirse a cualquiera de sus planes premium que están integrados con WooCommerce.

Después de eso, en su panel de control de WooCommerce, vaya a Complementos > Agregar nuevo y haga clic en Cargar complemento.

Presione Elegir archivo , seleccione el archivo zip del complemento que descargó después de la compra y haga clic en Instalar ahora para instalar el complemento.

Después de la instalación, active el complemento. Vaya a Complementos > Complementos instalados y haga clic en Activar junto a la extensión Registro de usuario de WooCommerce .

Si no está familiarizado con el proceso de instalación de esta manera, consulte nuestra guía sobre cómo instalar complementos manualmente.

2.2. Crea tu formulario de registro de WooCommerce

Para comenzar a crear su formulario de registro personalizado de WooCommerce, vaya a Registro de usuario > Agregar nuevo .

Llamaremos a nuestro nuevo formulario de registro " Registro de WooCommerce ", pero puede darle el nombre que desee.

De forma predeterminada, el formulario solo solicita el correo electrónico y la contraseña del usuario, pero puede agregar otros campos, como la dirección de facturación y envío, el país, el código postal, el número de teléfono, etc. Simplemente arrástrelos y suéltelos en su formulario y una vez que esté satisfecho con su nuevo formulario de registro de WooCommerce, haga clic en Crear formulario para guardarlo.

2.3. Reemplace la página de registro predeterminada de WooCommerce

Después de crear su formulario de registro, debe reemplazar el formulario de registro predeterminado en la página de registro. Para ello, ve a WooCommerce > Configuración y abre la pestaña Cuentas y privacidad .

Seleccione la opción para permitir que los clientes creen una cuenta en la página "Mi cuenta" .

Luego, vaya a Registro de usuario > Configuración, abra la pestaña WooCommerce y seleccione el formulario de registro que acaba de crear en la opción Seleccionar formulario de registro .

Después de eso, aparecerán algunos campos y deberá marcar la opción para reemplazar la página predeterminada de inicio de sesión y registro de WooCommerce . Para completar el proceso, guarde los cambios .

Ahora es el momento de ver su nuevo formulario de registro en la parte delantera. Vaya a la página de registro y obtenga una vista previa para ver su formulario de registro de WooCommerce recién personalizado .

3. Personalice el formulario de registro de WooCommerce mediante programación

Si no desea utilizar un complemento premium y tiene habilidades de programación, este método es para usted. Puede editar el formulario de registro de WooCommerce de casi cualquier forma utilizando fragmentos de código.

Antes de continuar, le recomendamos que haga una copia de seguridad de su sitio web de WordPress y cree un tema secundario. Cambiará los archivos de tema con estos fragmentos y, si algo sale mal, pueden romper su sitio, por lo que siempre es mejor estar preparado.

Después de hacer una copia de seguridad de su sitio e instalar un tema secundario, puede comenzar a editar sus formularios de registro. En esta sección, le mostraremos diferentes ejemplos de cosas que puede hacer. Deberá colocar los fragmentos en el archivo functions.php de su tema secundario. Para hacer eso, en su tablero de WordPress, vaya a Apariencia> Editor de temas y abra el archivo functions.php .

Antes de comenzar, asegúrese de haber marcado la opción para permitir que los clientes creen una cuenta en la página "Mi cuenta" . Para hacer esto, siga las instrucciones descritas en el paso 2.3 si aún no ha marcado esa opción.

Ahora echemos un vistazo a algunos ejemplos para personalizar el formulario de registro de WooCommerce mediante programación.

Mostrar número de cuenta de facturación en el formulario de registro

Si desea agregar un número de cuenta de facturación como campo obligatorio a su formulario de registro de WooCommerce, puede usar el siguiente fragmento de código:

 // Mostrar un campo en Registro / Editar cuenta 
add_action('woocommerce_register_form_start', 'ql_display_account_registration_field'); 
add_action('woocommerce_edit_account_form_start', 'ql_display_account_registration_field'); 
función ql_display_account_registration_field() { 
$usuario = wp_get_current_user(); 
$valor = isset($_POST['billing_account_number']) ? esc_attr($_POST['billing_account_number']) : $usuario->billing_account_number; 
?> 
<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
<label for="reg_billing_account_number"><?php _e( 'Enviar a/Número de cuenta', 'woocommerce' ); ?> <span class="requerido">*</span></etiqueta>
 <input type="text" maxlength="6" class="input-text" name="billing_account_number" value="<?php echo $value ?>" />
 </p> 
<div clase="borrar"></div> 
<?php 
}

// registro validación de campo 
add_filter('woocommerce_registration_errors', 'ql_account_registration_field_validation', 10, 3); 
función ql_account_registration_field_validation ($ errores, $ nombre de usuario, $ correo electrónico) { 
if ( isset( $_POST['billing_account_number'] ) && empty( $_POST['billing_account_number'] ) ) { 
$errores->add( 'billing_account_number_error', __( '<strong>Error</strong>: ¡se requiere el número de cuenta!', 'woocommerce' ) ); } 
devolver $ errores; 
}

// Guardar el valor del campo de registro 
add_action('woocommerce_created_customer', 'ql_save_account_registration_field'); 
función ql_save_account_registration_field ($ cliente_id) { 
if ( isset( $_POST['billing_account_number'] ) ) { 
update_user_meta( $customer_id, 'billing_account_number', sanitize_text_field( $_POST['billing_account_number'] ) ); 
}
}

// Guardar valor de campo en Editar cuenta 
add_action('woocommerce_save_account_details', 'ql_save_my_account_billing_account_number', 10, 1);
función ql_save_my_account_billing_account_number ($ user_id) { 
if( isset( $_POST['billing_account_number'] ) ){ 
update_user_meta( $user_id, 'billing_account_number', sanitize_text_field( $_POST['billing_account_number'] ) ); 
}
}

// Campo de visualización en la sección de campos de facturación del usuario administrador 
add_filter('woocommerce_customer_meta_fields', 'ql_admin_user_custom_billing_field', 10, 1); 
función ql_admin_user_custom_billing_field( 
$argumentos ) { $argumentos['facturación']['campos']['número_cuenta_facturación'] = array( 
'etiqueta' => __( 'Enviar a/Número de cuenta', 'woocommerce' ), 
'descripción' => '', 
'atributos_personalizados' => matriz('longitud máxima' => 6), 
); 
devuelve $argumentos;
}

Esto mostrará el número de cuenta de facturación en la sección de edición de cuenta de la página Mi cuenta , así como la página de edición de usuario administrador en la sección de campos de facturación.

Puede tomar este fragmento como base y ajustarlo para su tienda. También puede agregar otros campos del formulario de registro de WooCommerce a la sección de facturación, como:

• nombre_de_facturación
• apellido_facturación
• compañía_de_facturación
• Dirección de facturación 1
• dirección_de_facturación_2
• ciudad_de_facturación
• código_postal_facturación
• país_de_facturación
• estado de cuenta
• Correo Electrónico de Facturas
• teléfono de facturación

Mostrar formulario de registro personalizado de WooCommerce durante el pago

También puede agregar el formulario de registro de WooCommerce a la página de pago. Esto puede ser muy conveniente para sus clientes, ya que les permite navegar fácilmente por su tienda como invitados y crear una cuenta solo si desean comprar algo.

Puede hacerlo fácilmente utilizando el complemento de registro de usuario . Necesitará uno de los planes premium, así que eche un vistazo al paso 2.1 si aún no lo ha hecho. Además de eso, debe crear su formulario de registro de WooCommerce y reemplazarlo con el formulario predeterminado .

Después de eso, ve a WooCommerce > Configuración y abre la pestaña Cuentas y privacidad . Luego, marque la opción para permitir que los clientes creen una cuenta durante el pago y guarde los cambios .

Después de eso, vaya a Registro de usuario> Configuración y abra la pestaña WooCommerce . Marque la opción para sincronizar los registros de pago y guardar los cambios.

Esto permitirá a sus clientes sincronizar el registro de usuario con el registro de pago de WooCommerce . Después de eso, verifique todas las etiquetas de campo en la tabla y guarde los cambios .

¡Eso es! Ahora sus clientes podrán registrar una nueva cuenta durante el pago en su sitio web.

Bonificación: edite la dirección de correo electrónico de registro de WooCommerce

Las direcciones de correo electrónico son fundamentales para el registro. Como tienda de comercio electrónico, desea tener las direcciones de correo electrónico de sus clientes para poder contactarlos en el futuro con información sobre sus pedidos, enviarles ofertas, ofertas exclusivas, etc.

Es por eso que aprender a editar el correo electrónico de registro de WooCommerce es muy útil. La mejor manera de hacerlo es personalizando la plantilla de correo electrónico. Y lo mejor es que puedes hacerlo desde el panel de control de WooCommerce.

Simplemente vaya a WooCommerce > Configuración y abra la pestaña Correos electrónicos . Aquí, puede cambiar las plantillas de correo electrónico con la ayuda del remitente de correo electrónico y las opciones de plantilla de correo electrónico.

La opción de remitente de correo electrónico le permite editar el nombre y la dirección "De". Esto significa que puede personalizar cómo aparecerán el nombre del remitente y la dirección de correo electrónico en el correo electrónico de WooCommerce.

Del mismo modo, puede editar la imagen del encabezado, el texto del pie de página, el color base, el color de fondo, el fondo del cuerpo y el color del texto de las plantillas de correo electrónico .

Realice todos los cambios que desee para su correo electrónico de WooCommerce y vea los cambios en tiempo real haciendo clic en el enlace " Haga clic aquí para obtener una vista previa de su plantilla de correo electrónico ".

Una vez que esté satisfecho con su nueva plantilla, recuerde guardar los cambios .

Hay otras formas de editar las plantillas de correo electrónico que le permiten personalizar muchas otras cosas. Para obtener más información, consulte nuestra guía sobre cómo editar plantillas de correo electrónico de WooCommerce.

Conclusión

Con todo, el formulario de registro es muy importante ya que le permite recopilar información relevante sobre sus clientes. El formulario de registro predeterminado no siempre le brinda toda la información que desea, por lo que personalizarlo puede ser un método muy efectivo para recopilar todos los detalles que necesita.

En esta guía, hemos explorado 3 métodos diferentes para personalizar el formulario de registro de WooCommerce :

• Desde el salpicadero del WC
• Usar un complemento dedicado
• Programáticamente

Si desea realizar algunos cambios aquí y allá, las opciones predeterminadas del panel de control de WooCommerce pueden ser útiles. Sin embargo, las opciones que ofrece son bastante limitadas, por lo que si quieres personalizar más cosas, te recomendamos usar un plugin. Por otro lado, si no desea instalar una herramienta de terceros y tiene habilidades de codificación, puede editar el formulario de registro mediante programación utilizando fragmentos de código.

Para obtener más información sobre cómo personalizar tu tienda, echa un vistazo a las siguientes guías:

• Cómo personalizar la página Mi cuenta de WooCommerce
• Edite la página del producto WooCommerce
• Cómo personalizar la página de categoría en WooCommerce
• Cómo editar la página de la tienda de WooCommerce