Business Bloomer
  • About
  • WooCommerce Blog
  • Online Courses
  • Login
  • 0
  • About
  • WooCommerce Blog
  • Online Courses
  • Login
  • 0

WooCommerce: File Upload @ My Account Registration Form

> Published: Aug 2019
> Blog Category: WooCommerce Tips
> Blog Tags: Custom fields, Customer Registration, My Account
> Blog Comments: 24 Comments
Tweet

Join 17,000+ WooWeekly subscribers

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!

Here’s a brand new file upload input on the WooCommerce My Account registration form

PHP Snippet: Add File Upload Field @ WooCommerce My Account Registration

/**
 * @snippet       File Upload @ WooCommerce My Account Registration
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 3.7
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */

// --------------
// 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"';
}

Related posts:

  1. WooCommerce: Change User Role for New Customers
  2. WooCommerce: Separate Login, Registration, My Account Pages
  3. WooCommerce: Deny Automatic Login Upon Registration @ My Account
  4. WooCommerce: Add New Tab @ My Account Page
  5. WooCommerce: Hide or Rename a My Account Tab
  6. WooCommerce: How to Merge My Account Tabs
  7. WooCommerce: Allow Users to Edit Processing Orders
  8. WooCommerce: Add Product Table Columns @ Admin
  9. WooCommerce: Rename “My Account” If Logged Out @ Nav Menu
  10. WooCommerce: View Product/Order Hidden Custom Fields (“Protected Meta”)

Where to add this snippet?

You can place PHP snippets at the bottom of your child theme functions.php file (delete "?>" if you have it there). CSS, on the other hand, goes in your child theme style.css file. Make sure you know what you are doing when editing such files - if you need more guidance, please take a look at my free video tutorial "Where to Place WooCommerce Customization?"

Does this snippet (still) work?

Please let me know in the comments if everything worked as expected. I would be happy to revise the snippet if you report otherwise (please provide screenshots). I have tested this code with Storefront theme, the WooCommerce version listed above and a WordPress-friendly hosting on PHP 7.3.

If you think this code saved you time & money, feel free to join 14,000+ WooCommerce Weekly subscribers for blog post updates or 250+ Business Bloomer supporters for 365 days of WooCommerce benefits. Thank you in advance :)

Need Help with WooCommerce?

Check out these free video tutorials. You can learn how to customize WooCommerce without unnecessary plugins, how to properly configure the WooCommerce plugin settings and even how to master WooCommerce troubleshooting in case of a bug!

Rodolfo Melogli

Business Bloomer Founder

Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as an independent WooCommerce freelancer since 2011. His goal is to help entrepreneurs and developers overcome their WooCommerce nightmares. Rodolfo loves travelling, chasing tennis & soccer balls and, of course, wood fired oven pizza.

Follow @rmelogli
Category: WooCommerce Tips
Tags: Custom fields, Customer Registration, My Account

Post navigation

Previous post: WooCommerce: Deny Automatic Login Upon Registration @ My Account
Next post: WooCommerce: 6 Secrets to Running a Successful Ecommerce Business

24 thoughts on “WooCommerce: File Upload @ My Account Registration Form”

  1. Jackson
    December 8, 2020

    How to add mobile number field in woocommerce registration form??

    Reply
    1. Rodolfo Melogli
      December 16, 2020

      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!

      Reply
  2. Josh
    September 7, 2020

    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.

    Reply
    1. Rodolfo Melogli
      September 10, 2020

      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!

      Reply
  3. Rusal
    August 20, 2020

    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!

    Reply
    1. Rodolfo Melogli
      August 28, 2020

      Not 100% sure, sorry

      Reply
  4. Carlos David Mendez
    July 1, 2020

    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!

    Reply
    1. Rodolfo Melogli
      July 7, 2020

      Hi Carlos, thanks so much for your comment! If you’d like to get a quote, feel free to contact me here

      Reply
  5. Shekhar
    June 25, 2020

    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!

    Reply
    1. Rodolfo Melogli
      June 28, 2020

      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!

      Reply
  6. Munish Dhiman
    June 11, 2020

    How can i add this same field edit-account page please help me

    Reply
    1. Rodolfo Melogli
      June 15, 2020

      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!

      Reply
  7. JM
    May 25, 2020

    How about adding upload file to edit account page? Is it possible?

    Reply
    1. Rodolfo Melogli
      May 26, 2020

      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!

      Reply
  8. Francisco Mosse
    May 10, 2020

    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

    Reply
    1. Rodolfo Melogli
      May 13, 2020

      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!

      Reply
  9. Dan
    March 30, 2020

    Hi Rodolfo,
    Is it possible to have this upload button in the Downloads page on the Account area?
    Thanks,
    Dan

    Reply
    1. Rodolfo Melogli
      March 31, 2020

      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!

      Reply
  10. ft
    December 2, 2019

    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?

    Reply
    1. Rodolfo Melogli
      December 2, 2019

      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!

      Reply
      1. ft
        December 3, 2019

        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?

        Reply
        1. Rodolfo Melogli
          December 6, 2019

          Not difficult, no, but will need some custom coding

          Reply
  11. Salma DJADI
    September 5, 2019

    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

    Reply
    1. Rodolfo Melogli
      September 9, 2019

      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!

      Reply
Questions? Feedback? Support? Leave your Comment Now!
_____

If you are writing code, please wrap it between shortcodes: [php]code_here[/php]. Failure to complying with this (as well as going off topic, not writing in English, etc.) will result in comment deletion. You should expect a reply in about 2 weeks - this is a popular blog but I need to get paid work done first. Please consider joining BloomerArmada to get blog comment reply priority, ask me 1-to-1 WooCommerce questions and enjoy many more perks. Thank you :)

Cancel reply

Your email address will not be published. Required fields are marked *

Recent Posts
  • WooCommerce: Bulk Re-Send All Customer’s Completed Order Emails
  • WooCommerce: Upsells Custom Heading & Subheading @ Single Product Page
  • WooCommerce: Redirect Product Category Pages
  • WooCommerce: Close Button @ WooCommerce Checkout Notices
  • WooCommerce: Related Products Custom Heading & Subheading
About Business Bloomer

With 100,000 (and growing) monthly organic sessions, Business Bloomer is the most consistent, most active and most complete WooCommerce development/customization blog.

Of course this website itself uses the WooCommerce plugin, the Storefront theme and runs on a WooCommerce-friendly hosting.

Join 75,000+ Monthly Readers & 16,500+ Subscribers.

Become a Business Bloomer Supporter.

Join BloomerArmada and become an Official Business Bloomer Supporter:
easy-peasy, and lots of perks for you.
See your Benefits →
Popular Searches: Visual Hook Guides - Checkout Page - Cart Page - Single Product Page - Add to Cart - Emails - Shipping - Prices - Hosting
Latest Articles
  • WooCommerce: Bulk Re-Send All Customer’s Completed Order Emails
  • WooCommerce: Upsells Custom Heading & Subheading @ Single Product Page
  • WooCommerce: Redirect Product Category Pages
  • WooCommerce: Close Button @ WooCommerce Checkout Notices
  • WooCommerce: Related Products Custom Heading & Subheading
Latest Comments
  • Rodolfo Melogli on WooCommerce: How to Bulk Generate Coupons Without a Plugin
  • Rodolfo Melogli on WooCommerce: Change “Return to Shop” URL
  • Rodolfo Melogli on WooCommerce: Move & Customize Upsells @ Single Product
  • Rodolfo Melogli on WooCommerce: Display Custom Product Badge (Conditionally)
Find Out More
  • Become a WooCommerce Expert
  • WooCommerce Blog
  • WooCommerce Online Courses
  • WooCommerce Weekly
  • Bloomer Armada
  • Affiliate Program
  • Contact
Contact Info

Ciao! I’m Rodolfo Melogli, an Italian Civil Engineer who has turned into an international WooCommerce expert. You can contact me here:

Email: [email protected]omer.com

Twitter: @rmelogli

Hire me by the hour: Get Quote »

VisaMastercardAmexPayPal Acceptance Mark
Business Bloomer © 2011-2023 - Terms of Use - Privacy Policy