Add extra registration form fields in woocommerce registration form along with adding profile picture uploading option

functions.php

<?php
function wooc_extra_register_fields() {?>

	<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>

	<p class="form-row validate-required" id="image" data-priority="">
		
		<label for="image" class="">Image (JPG, PNG, PDF)<abbr class="required" title="required">*</abbr></label>
		
		<span class="woocommerce-input-wrapper"><input type='file' name='image' accept='image/*' required></span>

	</p>

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

	<?php

}

add_action( 'woocommerce_register_form_start', 'wooc_extra_register_fields' );


/**
* 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' ) );

	}
	
	if ( isset( $_POST['image'] ) && empty( $_POST['image'] ) ) {
		
        $validation_errors->add( 'image_error', __( 'Please provide a valid image', 'woocommerce' ) );
		
    }

	return $validation_errors;
}

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


/**
* Below code save extra fields.
*/
function wooc_save_extra_register_fields( $customer_id ) {

	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'] ) );

	}
	
	if ( isset( $_FILES['image'] ) ) {
		require_once( ABSPATH . 'wp-admin/includes/image.php' );
		require_once( ABSPATH . 'wp-admin/includes/file.php' );
		require_once( ABSPATH . 'wp-admin/includes/media.php' );
		$attachment_id = media_handle_upload( 'image', 0 );
		if ( is_wp_error( $attachment_id ) ) {
			update_user_meta( $customer_id, 'wp_user_avatar', $_FILES['image'] . ": " . $attachment_id->get_error_message() );
		} else {
			update_user_meta( $customer_id, 'wp_user_avatar', $attachment_id );
		}
	}
	
}
add_action( 'woocommerce_created_customer', 'wooc_save_extra_register_fields' );

// Now to give the option to display the profile picture in the My account details form also giving the option to update the profile picture.
// Add the custom field "profile picture"
add_action( 'woocommerce_edit_account_form', 'add_favorite_color_to_edit_account_form' );
function add_favorite_color_to_edit_account_form() {
    $user = wp_get_current_user();
	echo '<p class="form-row form-row-first"><label>Current Profile Picture</label>';
	echo get_wp_user_avatar(get_current_user_id(), 120, 'left');
	echo "</p>";
    ?>
    <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
			
        <label for="image" class="">Update Profile Picture</label>
		
		<span class="woocommerce-input-wrapper"><input type='file' name='image' accept='image/*,'></span>
    </p>
    <?php
}

// Save the custom field 'profile picture' 
add_action( 'woocommerce_save_account_details', 'save_favorite_color_account_details', 12, 1 );
function save_favorite_color_account_details( $user_id ) {
    if ( isset( $_FILES['image'] ) ) {
		require_once( ABSPATH . 'wp-admin/includes/image.php' );
		require_once( ABSPATH . 'wp-admin/includes/file.php' );
		require_once( ABSPATH . 'wp-admin/includes/media.php' );
		$attachment_id = media_handle_upload( 'image', 0 );
		if ( is_wp_error( $attachment_id ) ) {
			update_user_meta( $user_id, 'wp_user_avatar', $_FILES['image'] . ": " . $attachment_id->get_error_message() );
		} else {
			update_user_meta( $user_id, 'wp_user_avatar', $attachment_id );
		}
	}
}


//Important hooks to add multipart in both registration and account details form.
//Add enctype to form to allow image upload
add_action( 'woocommerce_register_form_tag', 'bbloomer_enctype_custom_registration_forms' );
function bbloomer_enctype_custom_registration_forms() {
   echo 'enctype="multipart/form-data"';
}
// Add enctype to form to allow image upload
function action_woocommerce_edit_account_form_tag() {
    echo 'enctype="multipart/form-data"';
} 
add_action( 'woocommerce_edit_account_form_tag', 'action_woocommerce_edit_account_form_tag' );


//To display the uploaded picture.
echo get_wp_user_avatar($user_id, 96, 'left');

?>

<!-- To save the profile picture here I'm using One User Avatar plugin to fetch to save and display to uploaded picture to overcome the avatar uploading restrictions -->
<!-- Plugin Link: https://wordpress.org/plugins/one-user-avatar/ -->
<!-- You can see the meta key I've used here on the 137 and 139 no line -->