How to Let Customers Upload Files on WooCommerce Product Pages?

Why File Upload Functionality Matters for Your WooCommerce Store

File upload capability turns a standard product catalog into a two-way conversation with your customers. Instead of forcing buyers to describe what they need in a notes box, you collect the actual artwork, documents, measurements, or specification sheets they want you to work with. For a print shop, that might be a logo file; for a signage vendor, a dimensions PDF; for a legal service, a signed waiver.

The practical use cases span almost every product category:

• Custom products: apparel with personalized text, engraved gifts, made-to-order furniture where buyers upload reference images
• Design and print services: business cards, banners, apparel printing, and packaging where customers submit artwork files
• Compliance and documentation: prescription uploads for eyewear, signed release forms, insurance documents, or ID verification before order fulfillment
• Digital proofs and approvals: architectural plans, marketing mockups, or product renderings that need client sign-off
• Photo-based products: photo books, canvases, and custom mugs where the customer supplies the images

Beyond convenience, uploads let you charge for what you handle. Upload file for WooCommerce supports a file-specific fee, and you can also apply discounts when a customer uploads the right file format. 

How to Set Up File Uploads in WooCommerce

You have two paths: install the Upload file for WooCommerce (no code required) or build a custom solution with PHP. For most stores, the plugin method is faster and requires no technical knowledge.

Method 1: Set Up File Uploads Using the File Uploader Plugin

The customer upload files for WooCommerce is the fastest way to let customers upload files. It requires no coding, works on product, cart, and checkout pages, and lets you charge a fee or offer a discount for each upload. 

Step 1: Install and Activate the Plugin

You need the plugin active before any upload rules can be configured.

1. Download the File Uploader plugin to get its .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 installation completes, click Activate.

You should now see the plugin listed under your active plugins, ready for configuration.

Step 2: Open the File Uploader Settings

All configuration happens in one place, so you never need to edit code or dig through multiple menus.

1. Go to WooCommerce > Settings > File Uploader in your admin panel.
2. Review the three tabs available: Add RuleManage Ruleand Recaptcha Settings.

You should now see the main configuration screen where you build upload rules.

Step 3: Create an Upload Rule

Every upload button is controlled by a rule, so this is where you define what customers see and how they interact with it.

1. Click the Add Rule tab.
2. Use Enable / Disable to turn the rule on or off.
3. Set a Rule Name so you can identify it later in the Manage Rule tab.
4. Under Display on select where the upload button appears. Options include Product Page.

You should now see the display options applied to your chosen pages.

Step 4: Configure Upload Settings

This step controls the upload button's behavior, file restrictions, and any fees or discounts you want to apply.

1. Set the Label for the button shown on the front end.
2. Enter the Allowed Extension file types by inserting each extension name.
3. Configure the Price charged for the uploaded file, if any.
4. Enable a Discount Type as a fixed or percentage discount, then enter the Discount Price.
5. Add a Description shown in the upload file pop-up.
6. Customize the Upload File Button Text.
7. Set the Maximum Upload Size in MBs or KBs.
8. Enable Customer Notes with the checkbox, then check Required to make the note mandatory.
9. Check Allow Upload Modification to let customers change their file after uploading.
10. Enable Price per File Upload to charge for each file individually.
11. Check Apply file fee to item subtotal to charge a one-time fee on multiple uploads regardless of product quantities.
12. Set the Customer Notes Labels and the Maximum File Upload count.
13. Personalize the Background Color and Text Color of the button.

You should now see a fully configured upload button matching your store's branding.

Step 5: Restrict Rules to Products, Categories, or User Roles

Not every product needs file uploads, so this step keeps the button visible only where it applies.

1. Enable Product/Category Restriction to display the button only on specific products or categories.
2. Select the items from the multiselect box.
3. Use User Role to show the button only for specific customer roles, like wholesale buyers.

You should now see the upload button appear only on the products or for the customers you choose.

Step 6: Add Multiple Buttons or Manage Existing Rules

You can build more complex upload flows or adjust rules after they go live.

• Click Add More to create another upload button within the same rule and configure it the same way.
• Open the Manage Rule tab to see all rules listed, then modify or apply pre-set rules at any time.
• Use the shortcode [extendons_upload_button] to place an upload button anywhere on a page, primarily with page builders.

You should now see all your upload rules organized and manageable from one screen.

Step 7: Secure Uploads and Configure Storage

Uploaded customer files need protection from public access and proper storage setup before orders start coming in.

1. Set the Upload Folder Path where files are stored. The default is wp-content/uploads.
2. Enable Secured Uploads Folder (ext_uploads) to store files in a protected folder that blocks public direct access.
3. Enable Use Secure File Links to serve files through masked links instead of exposing direct public URLs.
4. Optionally enable Google Drive Uploads to store files in your Google Drive instead of the local server. Upload your Google Drive OAuth Credentials JSON and set a Google Drive Folder Name (default is WooCommerce File Uploads).

You should now see uploaded files stored securely, either locally or in your Google Drive.

Step 8: Enable Recaptcha to Block Bot Submissions

Bot submissions can overwhelm your upload folder with spam, so protecting the upload form with verification is a smart precaution.

1. Click the Recaptcha Settings tab.
2. Check Enable / Disable Recaptcha to turn the protection on.
3. Enter your Recaptcha Site Key and Recaptcha Secret Key from Google Recaptcha.

You should now see a Recaptcha challenge appear on the upload form to verify that a human is submitting the request.

Method 2: Implement File Uploads Manually with Custom Code

If you need complete control over the upload experience, or if your project has requirements that no plugin can satisfy, building a custom file upload field with code is the right path. This approach lets you define exactly where the field appears, how files are validated, and what happens after a customer submits an order.

This method suits developers who are comfortable editing theme files and working with WordPress hooks. Before you start, make a full backup of your site and test everything on a staging environment first. A small syntax error in your theme's functions.php file can take your entire store offline.

Step 1: Add a File Upload Field to the Product Page

You need to render a file input on the product page so customers can attach their file before adding the item to their cart. The woocommerce_before_add_to_cart_button hook is the standard place to output custom fields.

add_action( 'woocommerce_before_add_to_cart_button', 'add_custom_file_upload_field' );
function add_custom_file_upload_field() {
    echo '<input type="file" name="custom_upload" id="custom_upload" />';
    echo '<input type="hidden" name="custom_upload_nonce" value="' . wp_create_nonce( 'custom_upload_nonce' ) . '" />';
}

This adds a file input to every product page on your store. The nonce field is critical; it protects the upload request from cross-site request forgery attacks.

Step 2: Validate the File on Add to Cart

You must check the file before it reaches your server. The woocommerce_add_to_cart_validation filter lets you reject the add-to-cart action if the upload fails validation.

add_filter( 'woocommerce_add_to_cart_validation', 'validate_custom_file_upload', 10, 3 );
function validate_custom_file_upload( $passed, $product_id, $quantity ) {
    if ( isset( $_FILES['custom_upload'] ) && $_FILES['custom_upload']['error'] === 0 ) {
        $file_type = wp_check_filetype( $_FILES['custom_upload']['name'] );
        $allowed_types = array( 'jpg', 'jpeg', 'png', 'pdf' );
        if ( ! in_array( $file_type['ext'], $allowed_types ) ) {
            wc_add_notice( 'Sorry, only JPG, PNG, and PDF files are allowed.', 'error' );
            return false;
        }
    }
    return $passed;
}

This snippet checks the file extension against your allowed list and stops the add-to-cart action if the file type is not permitted. Notice that the validation returns false instead of throwing an error; this is how WooCommerce expects validation failures to be handled.

Step 3: Store the File in the Order

Once validation passes, you need to upload the file to your server and attach it to the order. The woocommerce_checkout_create_order action fires when the order is created, which is the right time to process the upload.

add_action( 'woocommerce_checkout_create_order', 'save_custom_file_to_order', 10, 2 );
function save_custom_file_to_order( $order, $data ) {
    if ( isset( $_FILES['custom_upload'] ) && $_FILES['custom_upload']['error'] === 0 ) {
        $upload = wp_handle_upload( $_FILES['custom_upload'], array( 'test_form' => false ) );
        if ( isset( $upload['file'] ) ) {
            $attachment_id = wp_insert_attachment( array(
                'post_mime_type' => $upload['type'],
                'post_title'     => basename( $upload['file'] ),
            ), $upload['file'] );
            $order->update_meta_data( '_custom_upload_attachment_id', $attachment_id );
        }
    }
}

This uploads the file to your WordPress media library and saves the attachment ID as order meta. You can then access the file later through the attachment ID when you need to download it or send it to a fulfillment team.

Step 4: Handle Errors and Edge Cases

A custom implementation needs to handle common failure scenarios gracefully. Without a plugin managing this, you are responsible for every error case that can occur.

• Server upload limits: Check your server's upload_max_filesize and post_max_size values in your PHP configuration. If a customer's file exceeds these limits, PHP silently drops the file.
• File type spoofing: Extension checks alone are not secure. Consider using wp_check_filetype_and_ext with the file's MIME type for stricter validation.
• Cart updates: If a customer removes an item from the cart, the associated file upload is lost unless you store it separately and match it back later.

Custom code gives you total flexibility, but every edge case becomes your responsibility. For most stores, the effort required to match what a dedicated plugin provides is substantial, and ongoing maintenance costs continue long after the initial build. The File Uploader plugin already handles secure storage, file modification, customer notes, and Google Drive integration through its admin interface.

How Uploaded Files Are Stored and Accessed

Uploaded files don't disappear into a void. They land in a defined location on your server, and your customers' submissions appear right inside the order details screen in your WooCommerce admin. Knowing where files go and how to access them is just as important as setting up the upload button itself.

Default Storage Location and Secure Options

By default, files are saved to the wp-content/uploads folder on your hosting server. For better security, enable the Secured Uploads Folder (ext_uploads) option during plugin setup (covered in Step 7 of Method 1). This stores files in a protected folder that blocks direct public access, so someone cannot guess a URL and download a customer's file without permission.

You can also send files to Google Drive instead of your local server. Enable Google Drive Uploads upload your OAuth credentials JSON file, and set a destination folder name. The default folder is WooCommerce File Uploads. This keeps files off your hosting account entirely, which helps with storage limits and makes it easier for a team to review submissions in one place.

Accessing Files from Order Admin

When a customer uploads a file, it attaches to that order automatically. Navigate to WooCommerce > Orders and open the relevant order. You will see the uploaded file listed in the order details, alongside the product and any customer notes. From there you can download the file, review it, and process the order normally. This works regardless of which page the customer used to upload.

Security Best Practices for File Storage

File uploads introduce a real security surface. Follow these practices to keep your store and your customers' data safe:

• Restrict Allowed Extensions to the file types you actually need, such as jpgpngor pdf. Avoid allowing executable formats.
• Set a reasonable Maximum Upload Size so customers cannot overwhelm your server with huge files.
• Enable the Secured Uploads Folder to prevent direct access to stored files.
• Use Secure File Links so files are served through masked URLs instead of exposing the raw file path. Note that this alone is not full protection; the secured folder option is the stronger safeguard.
• Turn on Recaptcha Settings to block bots from submitting spam uploads.

Store files in the secured folder whenever possible, and keep allowed extensions tight. Those two settings prevent the most common upload-related problems.

Troubleshooting File Upload Issues in WooCommerce

File upload problems usually fall into one of four buckets: files that exceed your server's limits, validation errors before upload, files that disappear after submission, or permission errors when customers or admins try to access them.

If customers hit an upload size limit error

The plugin's Maximum Upload Size setting must be lower than your server's PHP upload_max_filesize and post_max_size values. Check your limits in WordPress by going to Tools > Site Health > Info > Server. If the server cap is too low, contact your hosting provider to increase it.

If validation errors appear after file selection

When a customer sees an error like "file type not allowed," the file extension does not match your configured Allowed Extension list. Verify every extension is listed exactly as customers will upload it, and ask customers to rename files using only letters, numbers, hyphens, and underscores if errors persist.

If uploaded files are missing from orders

Files disappear most often when customers do not complete checkout after uploading, or when the upload happened on a page where the rule is not active. Verify the rule's Display on setting includes the page where the customer uploaded. Check that the Required checkbox matches your intent, and look in the Upload Folder Path (default is wp-content/uploads) for a folder matching the rule name or order ID if files uploaded successfully.

If customers or admins get permission errors accessing files

Permission errors usually mean files exist but folder permissions are too restrictive. If you enabled the Secured Uploads Folder option, files are stored in a protected folder that blocks direct access by design. Admins need to retrieve files through the WordPress admin interface or the order details page, not by browsing folders directly.

Conclusion

Upload file for WooCommerce transform how you collect customer requirements and manage custom orders inside WooCommerce. By enabling customers to attach artwork, specifications, and compliance documents directly at checkout, you eliminate email exchanges and keep every order detail in one place. The File Uploader plugin handles the entire workflow, from rule creation to secure storage and Google Drive integration, without requiring any code.

Frequently Asked Questions