• Skip to primary navigation
  • Skip to main content
  • Skip to footer
Essential Premium WooCommerce Plugins - WP Desk
  • Plugins
  • Bundle
  • Support
  • Blog
  • My Account
  • 0

Stay updated on our how-to articles

WP Desk news, WooCommerce tips, promo codes - right to your inbox.

By entering your e-mail, you agree to our Terms & Conditions and Privacy Policy.

Bartosz Gajewski

How to Add Custom Upload Field to Your WooCommerce Store

Updated: December 19, 2022 / Checkout, Plugin Tutorials

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:
    woocommerce_form_field file upload
    WooCommerce: add file upload to checkout

    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:
    Two upload fields for sending files during WooCommerce checkout process
    WooCommerce upload files during checkout

     

  5. Also, you can use an additional checkbox, just like I did without the woocommerce_form_field custom code:
    Add Upload field- hide it after checkbox
    Checkout files upload for WooCommerce : the final result

     

  6. Your customers will see which image they upload to the WooCommerce order:
    WooCommerce upload image to order - File uploaded successfully example
    WooCommerce upload image to order - this is what your customers will see at checkout

     

  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:

    WooCommerce upload files during checkout - Error while uploading an image
    File Upload to WooCommerce checkout: Excluded files
  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:
    WooCommerce Add CSS to the File Upload in the Checkout
    Add CSS to the checkout files upload for WooCommerce

    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:

    Edit WooCommerce order: uploaded file as an attachment
    Checkout files upload for WooCommerce: Order details

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

If you want that see the step-by-step guide below.

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!

    woocommerce_form_field required WooCommerce
    Required field at WooCommerce chekout

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.

Flexible Checkout Fields PRO WooCommerce £59

Checkout files upload for WooCommerce. It has never been easier with this checkout editor plugin. Check it out!

Add to cart or View Details
WP Desk
80,000+ Active Installations
Last Updated: 2023-03-15
Works with WooCommerce 7.1 - 7.5.x

People love the plugin. Almost 80,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!
If you want to know more about this plugin's features, check out our WooCommerce Checkout Page Guide →

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:

Flexible Checkout Fields WooCommerce

Checkout files upload for WooCommerce. It has never been easier with this checkout editor plugin. Check it out!

Download for free or Go to WordPress.org
WP Desk
80,000+ Active Installations
Last Updated: 2023-03-13
Works with WooCommerce 7.1 - 7.5.x

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:
Checkout Fields in WooCommerce menu
Find your Filde Upload for WooCommerce plugin here

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

Add new field in Flexible Checkout Fields
Choose the File Upload 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
choose field type woocommerce upload checkout
Add file upload to checkout: Advanced tab

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

5. The next option is the Appearance:

woocommerce file upload css
WooCommerce upload files during checkout: Appearance tab

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 😉

conditional logic for woocommerce checkout file upload
Checkout files upload for WooCommerce: Conditional Logic tab

I cover this topic in the WooCommerce Checkout Conditional Fields →

As you may see, we have created many guides😁 Sign up for our newsletter under this article so you get them to your mailbox!

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!

Read more about WooCommerce checkout editor

  • WooCommerce checkout: Conditional Logic

    remove shipping address woocommerce
    How to add conditional logic to WooCommerce checkout fields? In this article we give you tips on how to add conditional logic to WooCommerce checkout form.

  • Free WooCommerce checkout page customization

    shipping plugin woocommerce
    How to Customize your WooCommerce Checkout Page for free Customize the checkout form for free.

Tweet

5 minutes read6284 views

Bartosz Gajewski

Content Specialist in WP Desk. He tries to increase the number of plugin users with useful content. Privately an enthusiast of mountains and European cinema.

Powered by WP Desk

WP Desk brings you great WooCommerce plugins. We strive to save your time and money by speeding up your processes. Use our plugins to build a better store. Awesome support included in the package.

Premium WooCommerce Plugins →

Stay updated on our how-to articles

WP Desk news, WooCommerce tips, promo codes - right to your inbox.

By entering your e-mail, you agree to our Terms & Conditions and Privacy Policy.

WP Desk › Checkout › How to Add Custom Upload Field to Your WooCommerce Store

Footer

WP Desk - WooCommerce Plugins

At WP Desk we create great WooCommerce plugins with awesome support. Save time and money with our e-commerce solutions. See how we can help you improve your e-store →

Secured by Comodo

WP Desk

  • About us
  • Giving Back
  • Blog
  • Contact us

Products

  • Premium Plugins
  • Get Support
  • WooCommerce Invoices
  • Email Marketing
  • Octolize

Legal

  • Terms & Conditions
  • Refund Policy
  • Support Policy
  • Privacy Policy

© 2023 WP Desk