How to Add a File Upload Field to Your WooCommerce Checkout

Why File Upload at Checkout Matters for Your Store

You can add a file upload field to WooCommerce checkout using the WooCommerce file upload plugin (no coding required), or manually via the woocommerce_checkout_fields hook and custom PHP code. The File Uploader plugin is the fastest method for most merchants, while the code approach offers full customization but requires developer knowledge.

Every store has at least one product that needs more than a click to complete. A custom print shop needs the customer's artwork. A sign maker needs the exact dimensions and design file. An optical store needs the prescription. A bakery needs the message for the cake. When customers can't attach those files at the moment of purchase, they improvise. They email the file, hope it arrives, and pray someone matches it to the right order. Sometimes they give up entirely and buy from a competitor whose checkout accepts files.

The shopper has decided to buy, but the checkout can't collect what the order needs. Every extra email, every "please upload your file after checkout" instruction, and every manual match is a chance for the order to stall or disappear. A file upload field placed directly on the checkout page removes that entire chain of friction.

WooCommerce file upload plugin solves three problems at once:

• Customization. Customers attach logos, artwork, or design files exactly when they pay, so you never chase down assets after the sale.
• Compliance. Regulated products like prescriptions or custom medical devices stay compliant because the required document travels with the order record.
• Support efficiency. Your team stops hunting through email threads for attachments and finds everything inside the order itself.

For stores selling customizable goods, the upload field isn't a nice extra. It's the missing piece that lets the checkout actually complete the sale.

How to Add File Upload to WooCommerce Checkout

Method 1: Using the WooCommerce File Upload Plugin

The quickest way to add a file upload checkout feature is through a dedicated plugin. File Uploader is built for WooCommerce and lets customers attach files from the product, cart, or checkout pages. It also gives you control over fees, discounts, and where files get stored. It includes a 30-day money-back guarantee and ongoing product updates and customer support.

Step 1: Install and Activate the Plugin

Installation works like any other WooCommerce plugin, and you can complete it from your WordPress admin panel without touching code.

1. Download the File Uploader plugin to get a .zip file.
2. In your WordPress admin panel, go to Plugins and click Add New.
3. Click Upload Pluginchoose the .zip file, and click Install Now.
4. After the installation finishes, click Activate.

You should now see a File Uploader option appear under WooCommerce in your admin menu, ready for configuration.

Step 2: Open the Settings Panel

All configuration happens in one place, which keeps things simple when you manage multiple upload rules.

Navigate to WooCommerce > Settings > File Uploader. You will find three tabs here: Add Rule  > Manage Rule and Recaptcha Settings. Start on the Add Rule tab to create your first upload rule from scratch.

You should now see the main rule builder with fields for basic rule settings, upload options, and file restrictions.

Step 3: Create a New Upload Rule

Click on Add Rule and configure the basics:

• Enable/Disable: Turn the rule on
• Rule Name: Give the rule a clear, identifiable name

Step 4: Set the Field to Display on Checkout

Under Display on, select where the upload field should appear. For the checkout page, choose either:

• Checkout Page (After Notes)
• Checkout Page (Alongside Cart Items)

Step 5: Configure the Upload Button and Rule Configuration

• Label: Set the button text customers see on the front end.
• Allowed Extension: Enter the file types you accept, such as jpg, png, or pdf.
• Price: Set a fee for the uploaded file. This is where you monetize the upload.
• Discount Type and Discount Price: Offer a fixed or percentage discount for each file upload.
• Description: Add a short message shown in the upload pop-up.
• Upload File Button Text: Customize the button that triggers the file selector.
• Maximum Upload Size: Limit file size in MBs or KBs.
• Customer Notes: Enable this checkbox to let customers add notes, and mark the note mandatory by checking the Required option.
• Allow Upload Modification: Let customers replace an uploaded file before placing the order.
• Price per File Upload: Charge customers for each file they upload rather than once per order.
• Apply File Fee to Item Subtotal: Charge a single flat fee even when customers upload multiple files.
• Customer Notes Labels: Set a custom label for the notes field.
• Maximum File Upload: Set the maximum number of files a customer can attach.
• Background Color and Text Color: Match the upload button to your store's design.

Click Add More to create an additional upload button within the same rule and configure it with the same fields.

You should now see your upload rule listed and ready to apply to your storefront.

Step 4: Restrict by Products, Categories, or User Roles

Not every rule needs to apply to your whole catalog. You can target the upload button to specific products or customer groups.

• Product/Category Restriction: Display the upload button only on selected products or categories by picking them from the multiselect box.
• User Role: Show the upload button only to specific user roles, such as wholesale customers or logged-in members.

You should now see the rule apply only where you want it, avoiding unnecessary upload fields on unrelated products.

Step 5: Save and Test

Save the rule, then visit your checkout page as a test customer. Confirm the upload field appears, accepts the correct file types, and enforces your size and quantity limits.

Method 2: Manual File Upload Setup with Custom Code

For developers who prefer full control, you can add a file upload field to your WooCommerce checkout using a custom code snippet. This approach uses the woocommerce_checkout_fields hook to add the field, validates the file on submission, and stores the upload as order metadata. It requires editing your theme's functions.php file or a custom plugin.

Step 1: Add the Upload Field to Checkout

The code below registers a file input on the checkout page and marks it as required. It appears in the order details section, which is the default location for custom checkout fields.

add_action('woocommerce_after_order_notes', 'add_file_upload_field');

function add_file_upload_field($checkout) {
    woocommerce_form_field('custom_file_upload', array(
        'type' => 'file',
        'class' => array('form-row-wide'),
        'label' => __('Upload Your File'),
        'required' => true,
    ), $checkout->get_value('custom_file_upload'));
}

The woocommerce_after_order_notes hook places the field after the order notes box. The woocommerce_form_field function handles the HTML output automatically, so the field matches your theme's existing checkout styling.

Step 2: Validate the Uploaded File

Next, validate that a file was actually uploaded before the order is processed. You should check both that the file exists and that it meets your allowed extension and size limits.

add_action('woocommerce_checkout_process', 'validate_file_upload');

function validate_file_upload() {
    if (empty($_FILES['custom_file_upload']['name'])) {
        wc_add_notice(__('Please upload a file.'), 'error');
        return;
    }

    $allowed_types = array('jpg', 'png', 'pdf', 'zip');
    $file_extension = pathinfo($_FILES['custom_file_upload']['name'], PATHINFO_EXTENSION);

    if (!in_array(strtolower($file_extension), $allowed_types)) {
        wc_add_notice(__('File type not allowed.'), 'error');
    }
}

This snippet rejects empty uploads and blocks file types outside your approved list. You can adjust the $allowed_types array to accept jpg, png, pdf, zip, or any other extension your business needs.

Step 3: Save the Upload as Order Metadata

Finally, store the uploaded file when the order is placed. The code below moves the file to a secure directory inside your uploads folder and attaches the path to the order as metadata.

add_action('woocommerce_checkout_update_order_meta', 'save_file_upload');

function save_file_upload($order_id) {
    if (!empty($_FILES['custom_file_upload']['name'])) {
        $upload_dir = wp_upload_dir();
        $target_dir = $upload_dir['basedir'] . '/custom-uploads/';

        if (!file_exists($target_dir)) {
            wp_mkdir_p($target_dir);
        }

        $file_name = sanitize_file_name($_FILES['custom_file_upload']['name']);
        $target_file = $target_dir . $order_id . '-' . $file_name;

        if (move_uploaded_file($_FILES['custom_file_upload']['tmp_name'], $target_file)) {
            update_post_meta($order_id, '_custom_file_upload', $target_file);
        }
    }
}

The file is renamed with the order ID prefix to prevent collisions between customers. The path is saved as order metadata, so you can view it from the order edit screen in your admin dashboard.

This manual method gives developers complete control but requires ongoing maintenance. You handle validation, storage security, and file management yourself. If you would rather skip the custom code, the WooCommerce file upload plugin provides these features through its admin interface, including secure file links and Google Drive storage. 

Keeping Uploaded Files Organized After Checkout

Getting the file at checkout is only step one. What happens to it after that determines whether your fulfillment process runs smoothly or turns into a search party every time an order comes in.

With the file upload for WooCommerce , every file a customer submits gets saved to a set location on your server, typically the wp-content/uploads folder, and tagged to the exact order it belongs to. That tag is what saves you from the guessing game. Open any order in your WooCommerce admin and the attached file is right there next to the customer's name, address, and product details. No cross-checking email timestamps, no matching filenames to order numbers by hand.

For teams that prefer working outside WordPress, the plugin can route uploads straight into a Google Drive folder instead of the server. This works well when more than one person needs access, since everyone can pull files through Drive's own sharing permissions without needing a login to the site itself.

Where things go from there is up to your process. Some stores pull files the moment an order lands so production can start right away. Others check uploads in a batch once or twice a day. Either way, because every file stays linked to its order automatically, nothing gets separated from the sale it belongs to, and nothing sits waiting in an inbox for someone to notice it.

Troubleshooting Common File Upload Issues

• If uploads fail because of file size limits, check the Maximum Upload Size setting in your rule and confirm it matches your hosting plan's server-level limits. Contact your host to raise the server cap if needed.
• If customers get "file type not allowed" errors, add the missing file extensions to the Allowed Extension field in your rule, and update your checkout messaging so customers know what formats you accept.
• If uploads don't appear in the order, check whether you enabled the Secured Uploads Folder option. Files stored there are managed by the plugin and won't show up in your regular media library.

Conclusion

File uploads at checkout turn custom orders from a back and forth email headache into a single, documented transaction. Using the WooCommerce file upload plugin, you can have a working file collection system live in minutes, with the option to charge fees, restrict file types, and secure sensitive documents. If your store sells anything custom, personalized, or regulated, file uploads stop being optional.

Frequently Asked Questions