[WooCommerce - Custom My Account Tab with Custom Form Fields] #woocommerce #my-account #form-handler #form #tabs

woo--custom-my-account-tab--01--funcs.php

<?php
/* Custom fields on WooCommerce My Account
================================================================================================ */

/* Set up custom My Account tab and display the custom form fields
------------------------------------------------------------------------------------------------ 
   Based on https://www.businessbloomer.com/woocommerce-add-new-tab-account-page/
*/

// Register new endpoint (URL) for My Account page
// FYKI: Re-save Permalinks or it will give 404 error
function happy_myaccount_add_custom_endpoint() {

    add_rewrite_endpoint( 'personal-details', EP_ROOT | EP_PAGES );

}
add_action( 'init', 'happy_myaccount_add_custom_endpoint' );
  
// Add new query var
function happy_personal_details_query_vars( $vars ) {
    
    $vars[] = 'personal-details';
    return $vars;

}
add_filter( 'query_vars', 'happy_personal_details_query_vars', 0 );
  
// Insert the new endpoint into the My Account menu
function happy_add_personal_details_support_link_my_account( $items ) {

    $items['personal-details'] = __( 'Personal Details', 'happy' );
    return $items;

}
add_filter( 'woocommerce_account_menu_items', 'happy_add_personal_details_support_link_my_account' );
  
/* Add content to the new tab

   FYKI - basically, if you output your custom form fields on a custom My Account tab, 
	      it means you're outside of my account form territory - you should wrap the fields 
	  	  in their own custom form (tag), and you also need a form handler function, see the 
   	  	  `happy_custom_my_account_tab_form_handler()` function below the following output 
   	  	  function.

   FYKI2 - based on this answer:
   	   	   https://stackoverflow.com/questions/56652459/saving-form-data-from-a-custom-woocommerce-my-account-tab#answer-56652758
*/

function happy_show_extra_register_fields_myaccount() {
   
	$user_Obj 	= wp_get_current_user();
	$user_id 	= $user_Obj->ID; 

	if (
			null === $user_Obj 		||
			!is_object($user_Obj) 	||
			!isset($user_id) 		||
			0 >= intval($user_id)
		) 
		return;
	?> 
	
	<form id="edit_personal_details" method="post"> 

		<h3 id="hp-personal-details" class="hp-header hp-header--h3"><?php _e( 'Personal Details', 'happy' ); ?></h3>	

	    <p class="form-row">
	    
	    	<label class="hp-style--label" for="reg_hp_birthdate"><?php _e( 'Birth Date', 'happy' ); ?></label>

			<?php
			$user_birthdate 	= get_user_meta( $user_id, 'hp_birthdate', true );
			$submitted_birtdate = $_POST['hp_birthdate'];
			$hp_birthdate_val 	= (
									isset( $user_birthdate ) &&
									'' !== $user_birthdate
								  )
									? $user_birthdate
									: ( 
											(
												isset($submitted_birtdate) &&
												'' !== $submitted_birtdate
											)
												? $submitted_birtdate
												: ''
									   );
			?>
	    
	    	<input type="text" class="input-datepicker hprf-field--birthdate hp-style--input" name="hp_birthdate" id="reg_hp_birthdate" value="<?php echo $hp_birthdate_val; ?>" />
	    
	    </p> 

		<?php
		// (...) => other fields ?>

	</form>	       

	<?php

}
add_action( 'woocommerce_account_personal-details_endpoint', 'happy_show_extra_register_fields_myaccount' );
// FYKI: add_action must follow 'woocommerce_account_{your-endpoint-slug}_endpoint' format

/* Save the custom form field values for the new My Account tab (frontend)
------------------------------------------------------------------------------------------------ */

function happy_custom_my_account_tab_form_handler() {

	$user_Obj 	= wp_get_current_user();
	$user_id 	= $user_Obj->ID; 

	if (
			null == $user_Obj 		||
			!is_object($user_Obj) 	||
			!isset($user_id) 		||
			0 >= intval($user_id)
		)
		return;

	$is_custom_tab 	= happy_helper_is_custom_tab();
	$is_nonce_valid = (
						// name of nonce field
						isset( $_POST['woocommerce-edit-personal-details-nonce'] ) &&  
						wp_verify_nonce( 
							$_POST['woocommerce-edit-personal-details-nonce'], 	// name of nonce 
																				// field
							'woocommerce-edit_personal-details'  				// name of my
																				// action
						)
					  );

	if (
			$is_custom_tab &&
			$is_nonce_valid
		) :

	    $fields_Arr = array(
	    	'hp_birthdate',
	    	// (...) => other field names

	    );

	    foreach ( $fields_Arr as $field ) :

			if ( isset( $_POST[$field] ) )
				update_user_meta( $user_id, $field, $_POST[$field] );

	    endforeach;

	endif;

}
add_action('wp', 'happy_custom_my_account_tab_form_handler');

function happy_helper_is_custom_tab() { 	

	global $wp_query;  	

	if( !isset($wp_query) )		
		return false; 	

	$tab = get_query_var( 'personal-details', false ); 	
	return ( is_account_page() && $tab !== false ); 

}

/* Add custom My Account tab body class
------------------------------------------------------------------------------------------------ */

function happy_body_classes($classes) {

	global $post;

    if ( happy_helper_is_custom_tab() )
    	$classes[] = 'woocommerce-edit-personal-details';

	return $classes;

}
add_filter( 'body_class', 'happy_body_classes' );

/* Display custom registration fields on Profile View and Profile Edit (admin)
------------------------------------------------------------------------------------------------ */

function happy_show_extra_register_fields_profileedit($user) { 
    
	$user_Obj 	= $user;
	$user_id 	= $user_Obj->ID;

	if (
			null == $user_Obj 		||
			!is_object($user_Obj) 	||
			!isset($user_id) 		||
			0 >= intval($user_id)
		)
		return;
	?>  

	<h3><?php _e( 'Personal Information', 'happy' ); ?></h3>

    <table class="form-table hpft--personal-info">

        <tr>
        
            <th>
				<label class="hp-style--label" for="reg_hp_birthdate"><?php _e( 'Birth Date', 'happy' ); ?></label>
            </th>

            <td>

				<?php
				$user_birthdate 	= get_user_meta( $user_id, 'hp_birthdate', true );
				$submitted_birtdate = $_POST['hp_birthdate'];
				$hp_birthdate_val 	= (
										isset( $user_birthdate ) &&
										'' !== $user_birthdate
									  )
										? $user_birthdate
										: ( 
												(
													isset($submitted_birtdate) &&
													'' !== $submitted_birtdate
												)
													? $submitted_birtdate
													: ''
										   );
				?>            	

				<input type="text" class="input-datepicker hprf-field--birthdate hp-style--input" name="hp_birthdate" id="reg_hp_birthdate" value="<?php echo $hp_birthdate_val; ?>" />

            </td>

		</tr>
          
        <?php
        // (...) => other field rows ?>   

    </table>
	
	<?php

}
add_action( 'show_user_profile', 'happy_show_extra_register_fields_profileedit', 30 );
add_action( 'edit_user_profile', 'happy_show_extra_register_fields_profileedit', 30 ); 

/* Save the custom form field values for the Profile View and Profile Edit pages (admin)
------------------------------------------------------------------------------------------------ */

function happy_save_extra_register_fields( $user_id ){

    $fields_Arr = array(
    	'hp_birthdate',
    	// (...) => other field names
    );

    foreach ( $fields_Arr as $field ) :

		if ( isset( $_POST[$field] ) )
			update_user_meta( $user_id, $field, $_POST[$field] );

    endforeach;	

}
add_action( 'personal_options_update', 'happy_save_extra_register_fields' );    
add_action( 'edit_user_profile_update', 'happy_save_extra_register_fields' );   

woo--custom-my-account-tab--02--styles.css

/* Custom tab icon
--------------------------------------------------------------------------------------------
   cheatsheet: 
   https://simplelineicons.github.io/ 
*/

.woocommerce-MyAccount-navigation-link--personal-details a:before {
	content: "\e035"!important;
}