Cómo agregar campos en el formulario de registro de WooCommerce

Publicado: 2021-04-20

¿Está buscando una manera de agregar campos de formulario de registro de WooCommerce? En este tutorial, le mostraré cómo agregar campos personalizados al formulario de registro de WooCommerce para solicitar a los clientes más información antes de registrarse en su tienda WooCommerce.

WooCommerce continúa siendo popular entre la mayoría de los propietarios de tiendas porque es flexible para la personalización. Puede usar complementos o código personalizado para agregar más funciones.

Cómo agregar campos al formulario de registro de WooCommerce

En esta publicación, verá cómo puede usar scripts PHP personalizados para agregar campos de formulario de registro de WooCommerce. Recomendamos crear un tema hijo. Esto asegurará que sus cambios no se pierdan durante una actualización.

Antes de comenzar, debemos asegurarnos de que los formularios de registro de WooCommerce estén habilitados en la página de inicio de sesión de la cuenta.

Para ello, vaya a WooCommerce > Configuración > Cuentas y marque Habilitar el registro de clientes en la página " Mi cuenta " como se muestra a continuación:

Esto asegurará que el formulario de registro de WooCommerce se muestre en la parte delantera.

Pasos para agregar campos en el formulario de registro de WooCommerce

En esta sección, agregaremos más campos a esta estructura utilizando las siguientes acciones. Incluiremos campos como nombre, apellido y número de móvil.

Estos son los pasos que debe seguir:

Inicie sesión en su sitio de WordPress y acceda al Panel como usuario administrador.
En el menú del panel, haga clic en Menú de apariencia > Menú del editor de temas. Cuando se abra la página del Editor de temas, busque el archivo de funciones del tema donde agregaremos la función que agregará campos en el formulario de registro.
Agrega el siguiente código al archivo functions.php:

 función njengah_extra_register_fields() {?>

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

       <label for="reg_billing_phone"><?php _e( 'Teléfono', 'woocommerce' ); ?></etiqueta>

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

       </p>

       <p class="formulario-fila formulario-fila-primero">

       <label for="reg_billing_first_name"><?php _e( 'Nombre', 'woocommerce' ); ?><span class="requerido">*</span></etiqueta>

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

       </p>

       <p class="formulario-fila formulario-fila-última">

       <label for="reg_billing_last_name"><?php _e( 'Apellido', 'woocommerce' ); ?><span class="requerido">*</span></etiqueta>

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

       </p>

       <div clase="borrar"></div>

       <?php

 }

 add_action('woocommerce_register_form_start', 'njengah_extra_register_fields');

Este es el resultado cuando actualizas la página:

Los campos del formulario de registro son los mismos que los de la dirección de facturación.

Hemos incluido el prefijo “billing_” antes del nombre del campo.

Estos son los campos de formulario de WooCommerce válidos que se pueden agregar al formulario de registro y se pueden asociar con una dirección de facturación:

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

Ahora que se han creado los formularios, necesitamos validarlos usando el siguiente código que se debe insertar en el archivo functions.php:

 /**

* Registrar campos Validando.

*/

función njengah_validate_extra_register_fields ($ nombre de usuario, $ correo electrónico, $ errores de validación) {




      if ( isset( $_POST['nombre_de_facturación'] ) && vacío( $_POST['nombre_de_facturación'] ) ) {




             $validation_errors->add( 'billing_first_name_error', __( '<strong>Error</strong>: ¡Se requiere el primer nombre!', 'woocommerce' ) );

      }

      if ( isset( $_POST['apellido_facturación'] ) && vacío( $_POST['apellido_facturación'] ) ) {




             $validation_errors->add( 'billing_last_name_error', __( '<strong>Error</strong>: ¡Se requiere el apellido!.', 'woocommerce' ) );




      }

         devuelve $validation_errors;

}




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

El último paso es guardar estos valores en la base de datos agregando el siguiente código en el archivo fucntions.php:

 /**

* A continuación, el código guarda campos adicionales.

*/

función njengah_save_extra_register_fields ($ cliente_id) {

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

                 // Entrada de teléfono archivada que se usa en WooCommerce

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

          }

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

             // campo de nombre que es por defecto

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

             // Campo de nombre que se usa en WooCommerce

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

      }

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

             // Campo de apellido que es por defecto

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

             // Campo de apellido que se usa en WooCommerce

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

      }




}

add_action('woocommerce_created_customer', 'njengah_save_extra_register_fields' );

Ahora los campos se han agregado, validado e insertado para uso futuro.

Cuando vaya a la página de dirección de facturación en su cuenta, debe hacer clic en editar para ir allí. Los campos ya están llenos: verificar

Conclusión

En esta publicación, ha aprendido cómo agregar campos en el formulario de registro de WooCommerce.

Si encuentra algún problema al implementar este código, comuníquese con un desarrollador calificado de WordPress.

Cómo agregar campos en el formulario de registro de WooCommerce

Cómo agregar campos al formulario de registro de WooCommerce

Pasos para agregar campos en el formulario de registro de WooCommerce

Conclusión

Artículos similares