CREAR EL CAMPO PERSONALIZADO EN LA PÁGINA “MI CUENTA” DE WOOCOMERCE

 

1° Instalar Code Snippets Por Dynamic.oo

2° Definir el nombre que tendrá el campo personalizado a agregar y su ID.

Por ejemplo: Nombre: “N° de Matricula”, Id: “matricula”

 

3° Crear el campo personalizado en la página “Mi cuenta” de Woocomerce:

 

Agregar el campo personalizado es bastante fácil. Usaremos el enlace woocommerce_edit_account_form para agregar el campo y el enlace woocommerce_save_account_details para guardar la información ingresada. Nuestro nuevo campo aparecerá debajo de los campos de administración de contraseñas (dominio.com/mi-cuenta/edit-account)

 

Plantilla:

 

add_action( 'woocommerce_edit_account_form', 'cssigniter_add_account_details' ); function cssigniter_add_account_details() {

 

$user = wp_get_current_user();

?>

 

<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide"> <label for="id_campopersonalizado"><?php esc_html_e( 'Titulo para el nuevo Campo', 'your-text-

domain' ); ?></label>

 

<input type="tipo_de_campo" class="woocommerce-Input woocommerce-Input--text input-text" name="id_campopersonalizado" id="id_campopersonalizado" value="<?php echo esc_attr( $user-> id_campopersonalizado); ?>" />

 

</p>

<?php

}

 

add_action( 'woocommerce_save_account_details', 'cssigniter_save_account_details' ); function cssigniter_save_account_details( $user_id ) {

if ( isset( $_POST[id_campopersonalizado] ) ) {

 

update_user_meta( $user_id, id_campopersonalizado, sanitize_text_field( $_POST[id_campopersonalizado] ) );

 

}

}

 

 

MOSTRAR EL CAMPO EN LA PÁGINA DE PERFIL DE WORDPRESS DE LOS USUARIOS (DOMINIO.COM/ WP-ADMIN/USERS.PHP)

 

Una vez que el cliente ha ingresado su fecha de nacimiento, podemos mostrarla en la página de perfil del usuario para que podamos acceder fácilmente a la información cuando sea necesario.

 

Forma #1 (Plantilla n° 1):

 

add_action( 'show_user_profile', 'cssigniter_show_extra_account_details', 15 ); add_action( 'edit_user_profile', 'cssigniter_show_extra_account_details', 15 ); function cssigniter_show_extra_account_details( $user ) {

 

$id_campopersonalizado = get_user_meta( $user->ID, 'id_campopersonalizado', true );

 

if ( empty( $id_campopersonalizado ) ) {

return;

}

 

?>

<h3><?php esc_html_e( 'Extra account details', 'your-text-domain' ); ?></h3>

<table class="form-table">

<tr>

 

<th><?php esc_html_e( 'Titulo para el nuevo Campo', 'your-text-domain' ); ?></label></th> <td>

 

<p><?php echo esc_html( $id_campopersonalizado ); ?></p>

</td>

 

</tr>

</table>

<?php

}

 

 

Forma #2 (Plantilla n° 2):

 

add_filter( 'user_contactmethods', 'modify_user_contact_methods' );

 

function modify_user_contact_methods( $methods ) {

 

$methods['id_campopersonalizado ']  = __( 'Titulo para el nuevo Campo'  );

 

return $methods;

}

 

 

 

 

 

 

 

 

 

 

 

 

 

EJEMPLO DE EJECUCIÓN:

 

// Agrega el nuevo campo de Matricula Profesional en Pagina Mi Cuenta

 

add_action( 'woocommerce_edit_account_form', 'cssigniter_add_account_details' ); function cssigniter_add_account_details() {

 

$user = wp_get_current_user();

?>

 

<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide"> <label for="matricula"><?php esc_html_e( 'N° Matricula', 'your-text-domain' ); ?></label> <input type="text" class="woocommerce-Input woocommerce-Input--text input-text"

 

name="matricula" id="matricula" value="<?php echo esc_attr( $user->matricula ); ?>" /> </p>

 

<?php

}

 

add_action( 'woocommerce_save_account_details', 'cssigniter_save_account_details' ); function cssigniter_save_account_details( $user_id ) {

 

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

update_user_meta( $user_id, 'matricula', sanitize_text_field( $_POST['matricula'] ) );

}

}

 

//  Agrega el nuevo campo de Matricula Profesional en Pagina de perfil Wordpress No editable add_action( 'show_user_profile', 'cssigniter_show_extra_account_details', 15 ); add_action( 'edit_user_profile', 'cssigniter_show_extra_account_details', 15 );

 

function cssigniter_show_extra_account_details( $user ) { $matricula = get_user_meta( $user->ID, 'matricula', true );

 

if ( empty( $matricula ) ) {

return;

}

 

?>

<h3><?php esc_html_e( 'Extra account details', 'your-text-domain' ); ?></h3>

<table class="form-table">

<tr>

 

<th><?php esc_html_e( 'N° Matricula', 'your-text-domain' ); ?></label></th> <td>

 

<p><?php echo esc_html( $matricula ); ?></p>

 

</td>

</tr>

</table>

<?php

 

}

 

//  Agrega el nuevo campo de Matricula Profesional en Pagina de perfil Wordpress Editable

add_filter( 'user_contactmethods', 'modify_user_contact_methods' );

function modify_user_contact_methods( $methods ) {

$methods['matricula']  = __( 'N° Matricula'  );

return $methods;}

EJEMPLO - 2 CAMPOS PERSONALIZADOS USANDO USER REGISTRATION

 

add_action( 'woocommerce_edit_account_form', 'cssigniter_add_account_details' ); function cssigniter_add_account_details() {

 

$user = wp_get_current_user();

?>

 

<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide"> <label for="user_registration_input_box_1644903985"><?php esc_html_e( 'CUIT', 'your-text-

domain' ); ?></label>

 

<input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="user_registration_input_box_1644903985" id="user_registration_input_box_1644903985" value="<?php echo esc_attr( $user-> user_registration_input_box_1644903985); ?>" />

 

</p>

 

 

 

<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide"> <label for="user_registration_input_box_1644903947"><?php esc_html_e( 'CUIT', 'your-text-

domain' ); ?></label>

 

<input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="user_registration_input_box_1644903947" id="user_registration_input_box_1644903947" value="<?php echo esc_attr( $user-> user_registration_input_box_1644903947); ?>" />

 

</p>

 

 

 

<?php

}

 

add_action( 'woocommerce_save_account_details', 'cssigniter_save_account_details' ); function cssigniter_save_account_details( $user_id ) {

           

if ( isset( $_POST[user_registration_input_box_1644903985] ) )

{update_user_meta( $user_id, user_registration_input_box_1644903985, sanitize_text_field( $_POST[user_registration_input_box_1644903985] ) );}

           

           

if ( isset( $_POST[user_registration_input_box_1644903947] ) )

{update_user_meta( $user_id, user_registration_input_box_1644903947, sanitize_text_field( $_POST[user_registration_input_box_1644903947] ) );} 

           

}

 

 

 

 

 

 

 

 

 

 

 

 

 

 

OBSERVACIONES:

 

Estos códigos también pueden utilizarse para mostrar, en la página “Mi cuenta”, los datos ingresados por los usuarios al registrarse en formularios de registro personalizados con campos personalizados creados por plugins como por ejemplo “User Registration de Por WPEverest”. En este caso hay que analizar los id que crea el plugin User Registration en los formularios de registros personalizados mediante el inspeccionador de códigos del navegador web (Se los saca de la página de perfil de usuario de Wordpress)

 

 

Fuentes:

 

https://www.cssigniter.com/add-a-custom-field-to-woocommerce-account-

details/?fbclid=IwAR3_fzfWZGD8YkSndMzIJRfbeR7FeCg9sSkELga5c_8TwacvC60-R8X1Ghk

 

https://developer.wordpress.org/reference/hooks/user_contactmethods/