
How to upload files on WooCommerce product pages
You’re running a WooCommerce store that requires customers to be able to upload images or other files on the product page. It could be a print shop, personalised gift store, stationery shop, or a million other types of WooCommerce store. But you need the ability to add a file upload to a product page.
Uploading images and files to WooCommerce products
Adding an image or file uploader to your WooCommerce product page is much easier than you might think. In fact, the first method I’ll show you is very simple and will take you less than a minute.
Through the rest of the article, I’m going to show you a step by step guide using an example of a print shop with a live working demo.

There’s also a video that will show you everything covered in this tutorial.
WooCommerce file uploads – easy and advanced features
In all, we’ll look at the following features:
- Uploading a single file on the product page
- Adding a file upload field to a WooCommerce for users to upload images
- Setting file parameters, like maximum file size and permitted file types
- Displaying uploaded image thumbnails on the product page
- Displaying thumbnails in the cart and checkout
- Setting a price for uploading a file
- Working with uploads after being received as part of the order
- Attaching uploads to emails
- Allowing bulk uploads on the product page
- Enabling bulk uploads
- Using an AJAX uploader with upload progress bar and the ability to add or remove images
- Setting a maximum number of uploads
- Charging customers per upload
- Creating other custom fields, like choosing print size and finish
- Calculating the product price based on the number of uploads
- Organising uploads by order number
- Downloading all uploaded files by order in a single zip file
- Renaming uploaded files
- Editing uploaded files
Throughout this article, we’ll use the example of a WooCommerce store offering a printing service for user uploaded images. But you can easily modify or extend this to suit your own needs.
WooCommerce file upload plugin
To make it as easy as possible for us, we’ll use the WooCommerce Product Add-Ons Ultimate.
Product Add-Ons Ultimate is a WooCommerce file and image upload plugin. Its ‘Upload’ field allows your customers to upload files and images from the product page.
WooCommerce Product Add-Ons Ultimate
Enhance the shopping experience on your store by allowing customers to personalise your products
Add-Ons Ultimate’s Basic version has most of the features you’ll need for uploading images. Only if you’re planning to use some of the more advanced stuff, like using calculations for pricing, would you need the Pro version.
Adding an upload field (in under a minute)
Once Add-Ons Ultimate is installed, you can start adding custom fields to your products. There’s more information on adding WooCommerce custom fields here – in this article, we’ll just concentrate on file uploads.
To add an upload field, click the ‘Product Add-Ons’ tab in the Product data section.

In the Product Add-Ons panel, click ‘Add Group’ and ‘Add Field’. Choose ‘Upload’ as the ‘Field Type’ and give your field a label in the ‘Field Label’ value.

Save your product and take a look on the front end. The product page now contains a file upload field.

That’s it. In less than a minute, you can have a fully functioning file upload field on your WooCommerce product page.
You can see the working demo of this product here.
For more information on adding fields with Add-Ons Ultimate, I recommend taking a look at the Getting Started section of the plugin’s documentation. It will only take a few minutes.
Setting maximum file size
Using Add-Ons Ultimate, you can prevent your customers from uploading files that are too big. Just go to WooCommerce > Settings > Product Add-Ons and set the maximum file size in MB that you want to allow.

Defining which file types can be uploaded
By default, Add-Ons Ultimate allows your customers to upload image files only. This is mainly for security reasons.
The default file types are:
- JPG / JPEG
- PNG
- GIF
If you’d like to change the file types that can be uploaded, you just need to add a filter in your snippets or child theme’s functions.php file. There are full instructions for changing the file types here.
Displaying image thumbnails on the product page
When the user uploads an image to the product page, its thumbnail and file name will be displayed.

Displaying thumbnails in the cart and checkout
When the customer uploads an image to our example product page and clicks ‘Add to Cart’, the image size and other parameters will be validated to ensure the image is okay to upload.
Assuming it is, the image is added to the product as custom data. When the user clicks through to the cart or checkout, the image will be displayed as a thumbnail.

Charging a price for uploading an image
Perhaps the image upload is an optional product field. If so, you might want to charge the customer an additional fee on top of the basic product price.
This is easy with the Add-Ons Ultimate plugin. Just enter the price for uploading an image in the ‘Field Price’ field.

Now, the extra price will be added to the product when the user uploads a file.

Adding uploaded files to orders
Uploaded files are automatically added to the order.

Also, you’ll get a thumbnail of the image in the new order email you receive.

Attaching uploaded files to order emails
If you like, you can choose to attach the uploaded image to the emails that you receive when a new order is placed. To enable this option, go to WooCommerce > Settings > Product Add-Ons and select the ‘Attach uploads to emails’ option.

How to upload files to product pages – video
This video will walk you through everything covered in this article.
WooCommerce bulk image uploads on the product page
Everything we’ve looked at so far applies to single image uploads. Now let’s look at uploading bulk images to a WooCommerce product page. The previous information still applies, we just need to change one setting.
Enabling WooCommerce bulk image uploads for products
To enable bulk uploads, just check the ‘Allow Multiple Uploads’ option in your upload field settings.

On the product page, you’ll notice a very minor difference:

The button now says ‘Choose Files’ instead of ‘Choose File’. The user can now upload their files in bulk. Everything else, including thumbnails in the cart and order, will be the same as with the single field.
Using an AJAX uploader with upload progress bar and the ability to add or remove images
So now it’s time to start looking at some more advanced features. Up to this point, we’ve just used a standard HTML file input field to upload one or more files.
Now let’s look at enabling an AJAX uploader. The benefits of this are:
- A progress bar to display the upload status for each file, so the user can see that the upload is taking place and how long it’s likely to take
- The ability to add further images
- The ability to remove uploaded images
- Drag and drop functionality – so the user can drag images into the field if they want
Here’s a screenshot showing the AJAX uploader. You can view a working demo product here.

To enable the AJAX uploader, go to WooCommerce > Settings > Product Add-Ons and select the ‘Enable AJAX uploader’ checkbox.

Setting a maximum number of uploads
We can do some more advanced stuff with the AJAX uploader enabled. It’s possible to set a maximum number of uploads for each upload field.
In your field settings, just enter a value in the ‘Max Files’ field.

Now the AJAX uploader won’t accept more files than you’ve specified.
Charge per upload
Even better, you can charge the user for each upload that they make. Just check the ‘Price per upload’ option.

Now the price you’ve entered in the ‘Field Price’ will be multiplied by the number of files uploaded.

Using WooCommerce file uploads with other custom fields
Depending on your business, you might want to include other custom fields with your file upload field.
In our example product for the print shop, customers can upload their images and have them printed. We’re offering them a choice of finish, either matt or gloss, and a choice of print size.
To achieve this, we’re going to add a couple of radio button groups. And, to make it more interesting, the print sizes will be a different cost per upload – so we’re going to include a calculation field to calculate the total price.
Adding radio button groups for print size and finish
To add some radio buttons, click ‘Add Field’ and select ‘Radio’ as the field type.

We’ve entered ‘Gloss’ and ‘Matt’ as the options. And I’ve set ‘Gloss’ as the default value so that will be automatically selected when the user opens the page.

Now you can see that we have some extra choices for the user as well as the upload field.

Calculating a custom price per uploaded file
Finally, we’re going to calculate the product price by multiplying the number of uploads by the cost of the selected print size. So if the user uploads 5 images and selects the largest print size, the total cost will be £6.25 per set of prints.
To do this, we add a ‘Calculation’ field and enter a formula to calculate the price:

The calculation here is:
( {field_1070_option_price} * {field_1054_number_uploads} ) - {field_1070_option_price}
This means that we’ll multiply the selected option price from field #1070, the print size, by the number of files uploaded to field #1054.
Note that we’ve enabled the ‘Hide Calculation’ option so that the calculation field itself is hidden. It just works behind the scenes to set the product price.
There is more information on using calculating WooCommerce product prices here.
The finished product
Here’s a screenshot of the product page after the user has uploaded multiple files.

You can view the product here.
Organising uploads by order number
By default, the plugin places uploaded images in a unique directory for each user. However, if you prefer you can specify that uploads should be organised by order number.
To ensure that all uploads in an order are placed in the same directory, go to WooCommerce > Settings > Product Add-Ons and enable ‘Organise uploads by order’.

Downloading all uploaded files by order in a single zip file
If you’ve enabled ‘Organise uploads by order’ above, you’ll be able to download all the uploads from an order in a single zip.
You’ll see a new button in the order screen to ‘Download files’.

Renaming uploaded files
If you wish you can rename uploaded files. Go to WooCommerce > Settings > Product Add-Ons and enter the format for your file names in the ‘Rename files’ field.

You can use the following tags which will automatically be replaced when the order is placed:
- {original_file_name}
- {order_number}
- {group_id}
- {field_id}
- {date}
- {product_id}
- {product_sku}
Editing uploaded files
Finally, you might want to let users edit the images they upload. You can do this with Add-Ons Ultimate and with the Advanced Uploads extension (you need to have both active).

With the Advanced Uploads extension, users can crop, rotate and resize their uploaded images. You can also specify a maximum width or height, plus define the aspect ratio for cropping images.
WooCommerce file uploader – final thoughts
Hopefully you’ve seen in this article how easy it is to upload a file on a product page in WooCommerce. We’ve looked at setting parameters like file size and file types, and at displayed thumbnails.
On the more advanced side, we’ve looked at enabling an AJAX drag and drop file uploader, letting users upload their images in bulk.
Everything we’ve discussed here makes use of the WooCommerce Product Add-Ons Ultimate plugin, which offers you the ability to upload files and add custom fields to product pages.
WooCommerce Product Add-Ons Ultimate
Enhance the shopping experience on your store by allowing customers to personalise your products
Hey, is it possible to programmatically upload the image to the order for the user? Say I have an app that generates an image for them based on inputs, then want to add the image to the order without the user having to upload?
I have this same issue. I’m generating the data as an image uri and just want to attach it to the order when the item is added to the cart.
Do it works well on Mobiile. I already have one plugin but it does not work well on mobile phone.
Hi Tarun
Yes the plugin works well on mobile devices.
Thanks
Gareth
please tell me the plugin name and its cost
Hi – the plugin is Add-Ons Ultimate. You can find more here: https://pluginrepublic.com/wordpress-plugins/woocommerce-product-add-ons-ultimate/.
Thanks.
Suppose I have a photo frame which has 4 shapes : Circle, Heart, Square, Rectangle. And I want users to upload images with respect to the shapes, for example in front of label “Circle”, user will choose an image and so on for other shapes. Can I achieve using this plugin ?
Hi Akki
Yes, you can do this. Just create four upload fields, named for each of the shapes.
Thanks
Gareth
Hi
I want to know if your plugin supports RTL?
And is it possible to translate the plugin into other languages?
Thanks
Hi
Thanks – yes, the plugin supports RTL and is fully translatable. Let me know if you need any more information.
Thanks
Gareth
As a print lab, is there a way to upload the images and then apply print sizes individually which then creates the multi-print order?
Hi Paul – are you looking to apply different print sizes for each image?
Gareth
Hi Gareth, Yes, ideally there would be a gallery of uploaded mages and each selected image or a selected set can then be given print sizes, similar to Sunshine cart.
At the moment, no. It’s something I’m looking into but I don’t have a date for when.
OK, good to know it’s a potential.
I may use your plug and have a limit to what can be ordered
Is it possible to have the Price of consecutive Uploads to differ?
First Photo $3
Additional Photos $1
Hi Nikita
Yes, you can do this using the calculation field – https://pluginrepublic.com/documentation/calculation-fields/. This allows you to use the number of uploaded files in a formula.
Please let me know if you need any more information.
Thanks
Gareth
Hi, is it possible for my client upload their photo and crop them? For exemple he sets a Print 5×7 but the digital pic are in 16:9 ratio. Can he crop?
Thank you.
Hi – there’s no ability to crop photos at the moment.
Thanks
Gareth
Hello,
great plugin… Is there any options to choose quantity for every single uploaded photo?
Hello,
can I choose quantyq for every uploadte file ?
Hi Tadej – at the moment, no – but if there’s enough demand for it, I’ll look at adding the feature.
Thanks
Gareth
Hi Gareth, i really love the plugin, but i stopped myself from buying, because you do not have an option where i can upload a gallery of pictures(in my case emblems for trophies) and allow my customers to select from.
I would love to know if you are going to be able to make it possible or if not possible-can you give me further suggestion how i can achieve this. I really need this for my shop.
Hi Borissa – if you would like to display a gallery of images that the user can select, you could use the ‘Image Swatch’ field.
Thanks
Gareth
Hello,
Just bought the plugin, so far great!
Couple of questions:
1. Is it possible to have “IF” statement in calculations?
2. Would be great to be able to copy / paste global groups, maybe export all setting and then upload all settings on other website. Because Im building a web on local server to test and want to upload all the settings to live web afterwards, that would save tons of time doing everything manually!
Hi Irakli
In answer to your questions:
1. There’s no ‘IF’ statement in the calculation itself, but you can create multiple calculation fields and use conditions: https://pluginrepublic.com/documentation/conditions/
2. At the moment, no – but it’s something I’m working on.
Thanks
Gareth
Hello,
Is the possible to crop the uploaded image? We have square, landscape and cicrle shape of frames, so wen the customer upload the image, its need to crop to this shapes. Is it possible?
thanks, Gabor
Hi Gabor
I plan to add image cropping in a future version.
Thanks
Gareth
Hello Gareth,
what is your date of your plan, what do you think?
Gabor
Thanks Gabor – I can’t give you a realistic time frame for this. It’s something I’d like to get to but I don’t have capacity at the moment.
Gareth
Hi Gareth, the “Add Ons Ultimate” is the probably closest perfect plugin for uploads. Literally, I have not found anything closest to this. Do you have an update on the crop feature? I need to allow my customers to crop their pictures based on our required sizes/ratios for our products. This is the only thing keeping me from purchasing it. Can you please advise?
Hi Jay
Yes, you can use the Advanced Uploads extension for Add-Ons Ultimate: https://pluginrepublic.com/wordpress-plugins/add-ons-ultimate-advanced-uploads/. This will allow users to crop images based on specified aspect ratio.
Thanks
Gareth
Hello, I have purchased the plugin and the uploaded files do not appear in the orders when created.
What should i do?
Thanks
Please raise a support ticket from https://pluginrepublic.com/support/.
Thanks.
Hello Developers,
can you me about this point
“Image should not be cropped on the product page, add a perfect image size option in the backend so that user can’t change the image according to them.”
Please check it.
Thanks
Pankaj
Hi Pankaj
Do you mean that you want to ensure that all images get uploaded to a certain size? You can do that with Add-Ons Ultimate and the Advanced Uploads extension.
Thanks
Gareth
Hi Gareth – I want to buy Basic version and before I make the purchase I have couple of question to be sure that I don’t need to ask for refund after purchase;
can we add text field for instruction as optional below upload field on product page?
can the customer edit/delete/replace uploaded image on cart/checkout page or after the order is placed on order detail page?
Hi
Thanks for the questions:
1. Yes, you can add a description to the upload field to provide instructions
2. The customer can edit the image on the product page using this extension which works with Add-Ons Ultimate: https://pluginrepublic.com/wordpress-plugins/add-ons-ultimate-advanced-uploads/. The customer can also delete or replace the image: https://pluginrepublic.com/documentation/how-to-edit-add-ons-in-existing-orders/
Hope this helps.
Gareth
Hello! How Can I put it on an elementor product page?
Hi Joel
Please see this article: https://pluginrepublic.com/documentation/is-the-plugin-compatible-with-my-page-builder/
Thanks
Gareth
Hello, im wanting to upload an image, but I need to be able to retrieve the url image path to send in a HTTP POST request. Can I do this?
Hi Nick
Do you mean that you want to get the URL on the front end, when you upload the image? If so, that’s not possible with the plugin.
Thanks.
Do uploader support also pdf for prints?
Hi Osman
Yes, you can upload PDF files using the upload field.
Thanks.
I see you recently added the ability to let users crop their images. I only see rectangle crop in the screenshots and documentation. Is Circle/Ellipse crop available in this plugin?
Hi Dave
Circle or ellipse cropping would only be possible with some custom CSS. I’m happy to take a look at it with you if you liked.
Thanks.