You can add first and last name to the WooCommerce registration form (easy, no?). Or maybe a custom radio field. And why not, a file upload input – which is able to load an image from the user’s browser, assign it to the form, and add the image to “Media” in your WordPress install.
And today we’ll see exactly that. Unfortunately the “woocommerce_form_field” function does not allow (yet, maybe) to generate file input fields, so we’ll just use basic HTML. Enjoy!
PHP Snippet: Add File Upload Field @ WooCommerce My Account Registration
/**
* @snippet File Upload @ WooCommerce My Account Registration
* @how-to businessbloomer.com/woocommerce-customization
* @author Rodolfo Melogli, Business Bloomer
* @compatible WooCommerce 3.7
* @community https://businessbloomer.com/club/
*/
// --------------
// 1. Add file input to register form
add_action( 'woocommerce_register_form', 'bbloomer_add_woo_account_registration_fields' );
function bbloomer_add_woo_account_registration_fields() {
?>
<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/*,.pdf' required></span></p>
<?php
}
// --------------
// 2. Validate new field
add_filter( 'woocommerce_registration_errors', 'bbloomer_validate_woo_account_registration_fields', 10, 3 );
function bbloomer_validate_woo_account_registration_fields( $errors, $username, $email ) {
if ( isset( $_POST['image'] ) && empty( $_POST['image'] ) ) {
$errors->add( 'image_error', __( 'Please provide a valid image', 'woocommerce' ) );
}
return $errors;
}
// --------------
// 3. Save new field
add_action( 'user_register', 'bbloomer_save_woo_account_registration_fields', 1 );
function bbloomer_save_woo_account_registration_fields( $customer_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( $customer_id, 'image', $_FILES['image'] . ": " . $attachment_id->get_error_message() );
} else {
update_user_meta( $customer_id, 'image', $attachment_id );
}
}
}
// --------------
// 4. 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"';
}
Great stuff but why doesn’t the uploaded file show up in the WordPress dashboard?
Like, you want to show it where exactly?
How to add mobile number field in woocommerce registration form??
Hi Jackson, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
Hi, this is working perfectly and saves me a lot of money not having to use a 3rd party plugin so thanks!!
But what do I remove to have the field not required? I do want the user to add a photo in sign up but I also want them to be able to continue without adding a photo.
Hi Josh, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
Hi! I followed and copy your code snippets, however, I found out that the file uploaded can’t be traced as to who did upload it. I checked the media library to see if the uploaded file will go directly there and it was successfully added but in the author section nothing is stated there so the administrator won’t know who is the user/owner of the file uploaded. I would really appreciate if you can help me with it or at least understand why and give a little hint. Thank you so much! God bless you!
Not 100% sure, sorry
Saludos Rodolfo, estoy interesado en contratar su servicio para que me ayude a solucionar una necesito que tengo en WooCommerce, espero pueda contactarme para explicarle la situación.
Espero pueda ayudarme, muchas gracias!
Hi Carlos, thanks so much for your comment! If you’d like to get a quote, feel free to contact me here
I want to send this uploaded attactment with email. How could I do that? For example, If I have a file upload field in woocommerce registration form and someone upload a file at the time of registration, then how could I send that uploaded file with email notification?
Thanks!
Shekhar, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
How can i add this same field edit-account page please help me
Hi Munish, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
How about adding upload file to edit account page? Is it possible?
Hi JM, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
Hi!
Very good tutorial. I am trying to make the same but for standard WordPress signup form. The code is OK, but how do I add enctype to normal signup form?
Because this is for woocmmerce signup, no for normal WordPress signup.
Thanks,
Francisco
Hi Francisco, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
Hi Rodolfo,
Is it possible to have this upload button in the Downloads page on the Account area?
Thanks,
Dan
Hey Dan, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
Hello Rodolfo! How are you?
First of all, thank you so much for all tips!
Is there any way to save the image not on media folder? I would like to show the attached image on the user profile?
Hi, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
Thanks for answering me Rodolfo!
Another question… when I upload the file, it doesn’t get any kind of ID to know that the file is from the user “X”.
Is it too difficult?
Not difficult, no, but will need some custom coding
Hello Rodolfo Melogli,
Thank you very much for the help
I’m beginner on woocommerce. i want to display this field on edit account page for the user, so he/she can modify it and also how i can display it on user profil for the admin so he/she can view or download and change the file ?
thank you in advance
Salma, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!