How to Add a File Upload Field to the WooCommerce Checkout Page
Adding a file upload field to your WooCommerce checkout page can be useful if you want your customers to upload files like images, documents, or any other attachments while placing an order. In this guide, I will show you how to do this in simple steps.
Why Add a File Upload Field to the Checkout Page?
- Collect design files for custom orders (e.g., T-shirt printing, business cards, etc.)
- Allow customers to upload documents for personalized products
- Get required documents for specific services
Steps to Add a File Upload Field to WooCommerce Checkout Page
There are two ways we can add a file upload field to the WooCommerce checkout page. we’ll use a simple code snippet or use a dedicated plugin.
#1 Using Plugin
The easiest way to add a file upload field to your WooCommerce checkout page is by using a plugin called Checkout Files Upload for WooCommerce.
Install and Activate the Plugin.
Go to WooCommerce > Settings > Checkout Files Upload.
Here, you can limit the maximum file size that can be uploaded by your customer.
Now click on File upload #1 and here you can set the file type like .png, .jpg, .pdf, .docx etc. You can also set it as option or mandatory while checkout.
Click the Save Changes button below to apply your settings.
Visit your checkout page to make sure the file upload field is working as expected.
When a customer uploads a file, it will be visible in the WooCommerce > Orders section. You can view or download the uploaded files from there.
#2 Using Custom Code Snippets
If you don’t want to use plugin then you can also use the below code snippet.
// Add file upload field to the checkout page
add_action( 'woocommerce_after_checkout_billing_form', 'Custom_Checkout_file_upload_field' );
function Custom_Checkout_file_upload_field() {
?>
<div class="form-row form-row-wide">
<input type="file" id="Custom_Checkout_file" name="Custom_Checkout_file" />
<input type="hidden" name="Custom_Checkout_file_field" id="Custom_Checkout_file_field" />
<div id="Custom_Checkout_filelist"></div>
</div>
<?php
}
// jQuery Script to handle the file upload via AJAX
add_action( 'wp_footer', 'Custom_Checkout_file_upload_script' );
function Custom_Checkout_file_upload_script() {
if ( is_checkout() ) : ?>
<script>
jQuery( function( $ ) {
$( '#Custom_Checkout_file' ).change( function() {
if ( ! this.files.length ) {
$( '#Custom_Checkout_filelist' ).empty();
} else {
const file = this.files[0];
$( '#Custom_Checkout_filelist' ).html( '<img src="' + URL.createObjectURL( file ) + '" width="200"><span>' + file.name + '</span>' );
const formData = new FormData();
formData.append( 'Custom_Checkout_file', file );
$.ajax({
url: '<?php echo admin_url('admin-ajax.php'); ?>?action=Custom_Checkoutupload',
type: 'POST',
data: formData,
contentType: false,
enctype: 'multipart/form-data',
processData: false,
success: function ( response ) {
$( '#Custom_Checkout_file_field' ).val( response );
}
});
}
} );
} );
</script>
<?php
endif;
}
// Handle the file upload via AJAX
add_action( 'wp_ajax_Custom_Checkoutupload', 'Custom_Checkout_file_upload' );
add_action( 'wp_ajax_nopriv_Custom_Checkoutupload', 'Custom_Checkout_file_upload' );
function Custom_Checkout_file_upload(){
$upload_dir = wp_upload_dir();
if ( isset( $_FILES[ 'Custom_Checkout_file' ] ) ) {
$path = $upload_dir[ 'path' ] . '/' . basename( $_FILES[ 'Custom_Checkout_file' ][ 'name' ] );
if( move_uploaded_file( $_FILES[ 'Custom_Checkout_file' ][ 'tmp_name' ], $path ) ) {
echo $upload_dir[ 'url' ] . '/' . basename( $_FILES[ 'Custom_Checkout_file' ][ 'name' ] );
}
}
die;
}
// Save the uploaded file URL to order meta
add_action( 'woocommerce_checkout_update_order_meta', 'Custom_Checkout_save_what_we_added' );
function Custom_Checkout_save_what_we_added( $order_id ){
if( ! empty( $_POST[ 'Custom_Checkout_file_field' ] ) && ( $order = wc_get_order( $order_id ) ) ) {
$order->update_meta_data( 'Custom_Checkout_file_field', sanitize_text_field( $_POST[ 'Custom_Checkout_file_field' ] ) );
$order->save();
}
}
// Display the uploaded file in the admin order page
add_action( 'woocommerce_admin_order_data_after_order_details', 'Custom_Checkout_order_meta_general' );
function Custom_Checkout_order_meta_general( $order ){
$file = $order->get_meta( 'Custom_Checkout_file_field' );
if( $file ) {
echo '<h3>File Attachment</h3>';
echo '<a href="' . esc_url( $file ) . '" target="_blank"><img src="' . esc_url( $file ) . '" width="400" /></a>';
}
}If you want to accept Pdf File through checkout then you can use the code given below.
Note: This code may not work in all cases. Make sure to use classic checkout in woocommerce. If not working then you can use the free plugin as shown above.
Video Tutorial
That’s it! You’ve successfully added a file upload field to your WooCommerce checkout page. Now your customers can upload files while placing their orders.
Need more WooCommerce tips? Let me know in the comments below!
