How to Allow Customers to Upload Files from Product, Cart, and Checkout Pages in WooCommerce

File upload for woocommerce

Are you using WooCommerce to sell custom or personalized products online and need a way for customers to upload files before adding items to their cart?  

Allowing customers to upload files with their orders can significantly improve the quality and accuracy of your custom products. Whether you need visual or written specifications, getting these details upfront helps you create products that meet your customers’ exact requests. 

This guide will walk you through how to add a file upload field to a product in WooCommerce. By the end, you’ll be ready to start accepting file uploads from your customers easily.

Upload Files in WooCommerce – Methods

Customers can upload files from the product, cart, and checkout pages in WooCommerce using the two main methods: 

  1. Customer Upload Files for WooCommerce by KoalaApps
  2. Upload Files in WooCommerce Programmatically

Method #1: Customer Upload Files for WooCommerce by KoalaApps

Customer Upload Files for WooCommerce is an easy way for customers to share files for custom orders. This plugin by KoalaApps lets customers quickly upload images and instructions to communicate their custom order requirements. Customers can attach files to their orders on product, cart, checkout, and order pages. Additionally, admins can specify acceptable file formats and sizes, limit uploads to certain user roles, products, and categories, and even set fees for file uploads. 

Using the File Upload WooCommerce plugin, customers can add notes with their uploads to provide additional details, while admins can enforce file upload requirements to bridge the communication gap.

Installation

Follow the steps here to begin the installation process:

  • To install this plugin, search the .zip file from your WooCommerce account and begin downloading.
  • Go to the WordPress Admin Panel. Select Plugins and choose Add New and then choose the file to Upload Plugin.
  • Select Install Now and then click Activate.

Setup and Configuration

Once the plugin is installed and activated, you can create and manage rules under WooCommerce > Upload Files. General plugin settings to customize error messages and styling the icon on various pages can be accessed from WooCommerce > Settings > Upload Files tab.

Configure File Uploads for WooCommerce

WooCommerce File Upload plugin allows you to add an upload file icon on the product, cart, and checkout pages. You can choose to create multiple rules to upload files on the various pages of your store. 

As you activate the plugin, you can view a list of all the created rules in a log. Choose to manage these rules as per your preferences by:

  • Specifying file size and format
  • Limiting uploads based on user roles, products, and categories
  • Enabling the icon on product, cart, and checkout pages
  • Making it mandatory/optional to upload files
  • Adding fees on file upload
  • Enabling file previews and downloads
  • Providing the option to attach feedback
  • Adding privacy disclaimer checkbox

Set the Order of Each Rule

To manage the order of each rule, set clear titles and priorities using the File Upload for WooCommerce plugin. 

Activate Rule for Products and Specify File Type

Control and customize the file upload process by configuring the following options: 

  • Enable Rule: Activate the rule to make it functional
  • Add Rule Title: Enter a unique title for the rule for future reference
  • Enable Description: Add file upload instructions to guide customers
  • Allowed File Formats: Specify allowed file formats by adding them to a comma-separated list (e.g., .jpg, .png, .pdf)
  • Product Scope: Choose to apply the rule to all products or specify particular products and categories where the rule should be enforced

Limit Rule for User Roles

To control who can see the file upload button, use the User Roles Restrictions setting:

  • Specify the user roles that are allowed to see the file upload button. If left empty, it will be visible to all users.

Restrict File Uploads on the Order Page

To manage file uploads on the order page, configure file upload settings specifically for the order page.

  • Select Order Status: Choose the order status that will have permission to upload, delete, and download files. Available statuses include:
    • Pending payment
    • Processing
    • On hold
    • Completed
    • Cancelled
    • Refunded
    • Failed
    • Draft

Enable the option to download and upload/delete files to allow users to upload and delete files on the order page.

Adjust File Size for Single or Multiple Uploads

Using the File Upload for WooCommerce, you can also manage file size restrictions for uploads. When multiple file uploads are allowed, you can add combined file size restrictions.

  • Enable Multiple Files Size: Enable checkbox to set file size. If the checkbox is disabled default size of 5 MB for the Product Page/Cart Page/Checkout Page and 1 MB for the Order Detail Page will be set
  • Set Maximum File Size: Set maximum size for file upload

Make File Upload Mandatory

To ensure that customers upload files before completing their purchase, you can set the file upload field as mandatory to make it a necessary part of the checkout process:

  • Require customers to upload files in order to complete the checkout process
  • Specify the number of mandatory files

Allow Customers to Add Notes

Choose to display a description box where customers can add notes when uploading a file. You can customize the heading for this description box and set a maximum character limit to guide customers on the amount of information they can provide.

Show a Privacy Policy Checkbox

Display a checkbox that users must check when uploading a file. You can add a custom message and link to your privacy policy page to remain GDPR compliant. This checkbox will appear alongside the file upload field to inform users about how their data will be handled.

Display File Upload on Product, Cart, & Checkout Pages

When setting up file upload rules, you have the option to display the file upload button on the Product, Cart, and Checkout pages. 

  • Enable the file upload button on all or selected pages
  • Define a maximum file size limit for each page
  • Choose the position of the file upload button on the Cart page

Choose File Visibility After Upload

After a file is uploaded, you can control where and how it is displayed to users:

File Visibility Options: Select where the uploaded files should be visible:

  • Cart Page
  • Checkout Page
  • Thank-You Page
  • Order Detail Page

Additionally, you can allow users to edit their files (delete or upload new ones) from the “My Account” page based on specific order statuses. 

Customize Error Messages for Individual Rules

Using the Checkout Files Upload for WooCommerce, you can customize error messages for different file upload scenarios:

  • Mandatory file messages
  • File size messages
  • Unwanted file format messages 
  • Checkbox type messages

Charge Additional Fee

You can apply an extra charge for file uploads on the Product, Cart, and Checkout pages.

  • Fee Calculation Method: Decide whether to charge a fixed amount or a percentage of the order total for file uploads
  • Fee Type: Choose whether the fee is a one-time charge or per file if multiple files are uploaded

Add Custom Headings to Cart & Checkout Pages

Add custom headings to the Cart and Checkout pages to guide customers and provide a clear context for the file upload areas. These headings will appear on:

  • Order Detail Page
  • Order Thank You Page

Configure Global Error Messages

You can customize the global error messages and the file upload icon by adding a direct URL. 

Additionally, you can customize error messages for: 

  • Mandatory file error message
  • File size error message
  • Unwanted file error message
  • Privacy checkbox message

Style Options for File Upload

While the plugin defaults to your theme’s standard layout, you can customize the appearance of the file upload feature on the Product, Cart, Checkout, and Order Detail pages. You can adjust the following style options:

  • Upload button text color
  • Upload button background color
  • File type message color
  • File size message color
  • Upload file name text color
  • Background color
  • Trash icon color
  • View icon color

Method #2: Upload Files in WooCommerce Programmatically

If you are interested in the program-based implementation of allowing customers to upload files and provide instructions to you with custom notes, below is the complete code that can be utilized to activate this functionality on your store.

Copy and post the following code in functions.php file.

Code:

<?php
add_action( 'woocommerce_after_checkout_billing_form', 'misha_file_upload_field' );

function Koala_file_upload_field() {

	?>
		<div class="form-row form-row-wide">
			<input type="file" id="koala_file" name="koala_file" />
			<input type="hidden" name="koala_file_field" />
			<label for="koala_file"><a>Select a cool image</a></label>
			<div id="koala_filelist"></div>
		</div>
	<?php

}
#koala_file{
	position: absolute;
	height: 1px;
	width: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
}

Simplify Your File Uploads!

Adding file uploads to your WooCommerce site can make a big difference. By letting customers upload files directly on the product page, you save time and create a unique shopping experience that sets your store apart from the competition.

Sign up to get Latest Updates

For more digital insights, sign up for the latest updates and industry news right in your inbox.