Skip to content

Instantly share code, notes, and snippets.

@santanup789
Created October 19, 2023 05:21
Show Gist options
  • Save santanup789/11b7819641614964cdb0042e20728376 to your computer and use it in GitHub Desktop.
Save santanup789/11b7819641614964cdb0042e20728376 to your computer and use it in GitHub Desktop.
Add extra registration form fields in woocommerce registration form along with adding profile picture uploading option
<?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 -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment