How to Add Custom Upload Field to Your WooCommerce Store

There is an easy way to enable the checkout feature to upload files in WooCommerce without woocommerce_form_field. In this article, I'll show you two solutions to let customers add files in the WooCommerce checkout. One with the woocommerce_form_field function and action, and the second with a WooCommerce plugin in a step-by-step guide!

Have you ever asked your customers to send you additional emails with files, requirements for the order, or screenshots? It's quite tedious if you receive more orders, isn't it?

Wouldn't be great to save some time? Did you know that you can use the woocommerce_form_field function to add more fields to the WooCommerce checkout? What's more, there is a plugin that will let you add a file upload option during WooCommerce checkout in a few minutes!

Table of contents

1. How to upload files during WooCommerce checkout (alternative to woocommerce_form_field)
2. Add the upload field with the woocommerce_form_field function
3. Add file upload to WooCommerce checkout with a plugin
4. Checkout files upload for WooCommerce (step-by-step guide)

Before showing you the woocommerce_form_field option

First, I want to show you the final effect. I just want you to be sure that this is not what you are looking for before going to the woocommerce_form_field part.

1. I'm using a WooCommerce plugin so that you'll not have to use the woocommerce_form_field function. The plugin lets you add the WooCommerce upload checkout field in a few moments:

   

   That's it. It's now possible to send files during WooCommerce checkout!

2. You can use CSS styling to further change the field's look. I'll tell you about that later.
3. Also, look at the 'Here you can Upload the File'. This is the Label. Set your own, for example, describing the maximum image size that a customer can upload to the WooCommerce order.
4. The method has endless possibilities. For example, you can change the label or create two WooCommerce checkout file upload fields in a row:

   

    

5. Also, you can use an additional checkbox, just like I did without the woocommerce_form_field custom code:

   

    

6. Your customers will see which image they upload to the WooCommerce order:

   

    

7. Of course, you can limit what type of files (like an image) they can upload to the WooCommerce order. Also, you can set the maximum file size. Here is the error message for the excluded file types:

   

8. Now, a few words about the design. I use the default WooCommerce theme: Storefront. That's why my checkout page looks so raw and so does the WooCommerce upload checkout field.But you can use CSS styling for this and any other fields. Look how I changed the look of the upload file field:

   

   Learn more about styling the WooCommerce checkout fields with CSS →
9. Once the customer uploads a file, you can see it in the Order details screen:

   

That was a quick look at how to add the file upload option to the WooCommerce checkout.

Add the upload field with the woocommerce_form_field function

If you'd rather add custom fields to the WooCommerce order, you may use a built-in function and actions.

The information below is a short introduction (you can find more info about form fields here).

1. You may use the woocommerce_form_field( $key, $args, $value = null ) function to prepare a new field for the WooCommerce checkout. For example, to add a simple input field you need to specify the $args element like that:

   woocommerce_form_field( 'participant', array(
   'type' => 'text',
   'required' => true,
   'label' => 'Participant',
   'description' => 'Please enter the full name of the workshop participant',
   ));

   
    

2. Then, you can use that function to add the new field to the WooCommerce checkout (in the billing section with a WooCommerce action). You can add such a piece of code in your theme's functions.php file (at the end before the ?> tag if there is one). Please remember to add the code again after updating or changing your WordPress theme.

   add_action( 'woocommerce_after_checkout_billing_form', 'add_a_custom_field' );

   function add_a_custom_field(){

   woocommerce_form_field( 'participant', array(
   'type' => 'text',
   'required' => true,
   'label' => 'Participant',
   'description' => 'Please enter the full name of the workshop participant',
   ));
   }

   
    

3. Your WooCommerce checkout will get the new field thanks to the woocommerce_form_field function and the action!

   

I hope that it will be a good starting point for WC checkout customization with woocommerce_form_field.

Add file upload to WooCommerce checkout with a plugin

Standard WooCommerce doesn't let you add an upload checkout field. Also, you won't be able to customize your checkout the way you want to. That's why we created the Flexible Checkout Fields.

People love the plugin. Almost 90,000 stores use it daily!

You can use it to create a WooCommerce upload checkout field. However, you can do much more with this plugin!

In general, Flexible Checkout Fields lets you:

• easily add custom fields to the checkout,
• edit the present ones,
• rearrange fields in the checkout
• and much more!

Also, read how to add custom fields to your WooCommerce order form for FREE →

You can download this plugin for free but you will need the PRO version. We limited the free version to these types of custom fields:

• Text
• Textarea
• Number
• E-mail
• Phone
• URL
• Checkbox
• Color
• Headline
• Paragraph
• Image
• HTML

However, check out this plugin for free before you buy! We have prepared a video, which will serve you as a sneak peeks of what you will find in the free version, have a look:

Checkout files upload for WooCommerce (guide)

Let's start with the configuration. Please note: this feature is available in the PRO version of the plugin.

1. First, go to WooCommerce → Checkout Fields:

2. You will see the Billing section. You can edit this section or add a new field.

3. Now you need to

• choose a File Upload field type,
• then enter the field Label,
• finally, click Add Field.

4. Next, select the new field in the Edit section column. You can set here the:

• Allowed file types
• and Maximum file size

You can also set your own Validation. How? Check out our WooCommerce Checkout Validation Guide →

5. The next option is the Appearance:

That is optional, of course. You can provide any CSS Class here. This way you can set styling for the field.
What hovers behind the Conditional logic tab? Its settings, of course 😉

I cover this topic in the WooCommerce Checkout Conditional Fields →

Checkout files upload for WooCommerce (plugin vs woocommerce_form_field)

Today, you have learned how to implement the upload field for WooCommerce checkout with a plugin or use the woocommerce_form_field function instead. I hope that uploading files during WooCommerce checkout will save you a lot of time. No matter which solution you use!

Let me know how are you going to use that field!

Also, if you need more tips about checkout configuration, use our WooCommerce Checkout Settings Guide →

If you want to test the PRO field types for WooCommerce Checkout, try the Flexible Checkout Fields in a free demo!