
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 many of the items 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
- Uploading multiple files and specifying a quantity for each file
- Using a pricing table to set a price per print depending on the total quantity of prints required
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
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 minimum and maximum width and height, plus define the aspect ratio for cropping images.
Advanced Uploads for Add-Ons Ultimate
Power up your file uploads - let users crop, size and rotate their uploaded files
Uploading multiple files and specifying a quantity for each file
Now let’s look at another scenario. Let’s say we want to allow users to upload multiple images that we’ll print for them. We want to allow the user to specify how many of each print they require.

You can see in the screenshot above that the user can upload multiple files and enter a quantity against each one.
There’s a working demo product here.
Furthermore, there’s a pricing table which shows the price per print based on the total quantity of prints ordered.
And this table can change based on the size of print selected – so if the user wants prints at 10 x 10 they’ll be cheaper than prints at 20 x 20.
Let’s take a look at how to set this up.
Adding quantity fields per upload
For this feature, you’ll need the Product Add-Ons Ultimate plugin and the Advanced Uploads extension.
Advanced Uploads for Add-Ons Ultimate
Power up your file uploads - let users crop, size and rotate their uploaded files
First thing we need to do is create a ‘Number’ field that will be used to store the combined quantity of prints.

You don’t need to give the field a label, just set the ‘Field Type’ to ‘Number’ and make a note of the ID number. (Note that the plugin will automatically hide this field on the front end – so don’t be surprised if you don’t see it on the product page).
Then create a new upload field. With the Advanced Uploads extension installed, you’ll see some extra parameters in your upload field:

You’ll need to set the following parameters:
- Allow multiple uploads
- Price per upload
- Quantity per upload – this will enable the quantity field for each uploaded file
- Combined quantity field ID – this is the ID of the number field you created before. The plugin will use this field to store the total quantity of prints required
Now, when you preview this product, you’ll see a quantity field input for each uploaded file. The total quantity for all inputs will be automatically entered in the number field that you created (this field will be hidden).
You can use the number field in calculations as in the examples earlier in this article.
However, you might also want to create some pricing tables for your prints.
Using a pricing table to set a price per print depending on the total quantity of prints required
Pricing tables allow you to get a price based on a user input. There are different types of pricing table but in this case we’re using a look up table.
Related Tutorial
There’s an in-depth article about different types of price matrix here
Take a look at the screenshot below. This shows a very simple price table. The first column displays ranges of quantities and the second column shows a corresponding price.
So if the combined quantity is between 10 and 49, the plugin will return 0.25 as the print price. If the combined quantity is between 50 and 399, the plugin will return 0.20 as the price. (There’s a detailed tutorial on look up tables here).

To use this feature, you’ll need another extension for Add-Ons Ultimate: Advanced Calculations.
Advanced Calculations for Add-Ons Ultimate
Make your calculations and look up tables easier to manage
With the Advanced Calculations extension, you can upload a CSV file with multiple price tables like this above. Then you’ll have some extra parameters in your calculation fields so you can use the table to get a price for the prints based on the total quantity selected.
Upload your CSV file
First, upload your CSV file containing your price tables to Product Add-Ons > Calculations. There are further details on how to format your table correctly here.
Add a calculation field for the ‘price per print’
Firstly, I suggest adding a new group for the calculation fields you’re about to add. Just click ‘Add Group’.
Next, add a ‘calculation’ field in your new group. We’ll use this field to calculate the price of each print. Take a look at the field below.

You can see that we set the field type to ‘Calculation’ and in the ‘Formula’ field we entered {look_up_table}
. This tells the plugin that it’s going to get a result from one of the tables we uploaded.
Next we enter the ID of the number field we created above in the ‘Field ID for Y’ field. You need to use the Combined quantity field ID here that you entered when you created the upload field above.
Finally, choose the price table from the ‘Look Up Table’ field.
This field will now get the total combined quantities entered by the user for each upload. It will use this value in the specified look up table. Then it will return the price per print.
Setting the overall product price
Last of all, we’re going to use the price from the look up table to set the overall product price. Let’s say the user has specified a total quantity of 10 prints and our cost per print for 10 prints is 0.25. We just need to multiply 10 * 0.25 for our overall product price.
To do this, add one more calculation field as follows:

We set the field type as ‘Calculation’ then in the ‘Formula’ field we multiply the combined quantity field by the price per print field.
Set the ‘Action’ to ‘Set Product Price’ in order to use the result of this calculation field as the product price.
Don’t forget to check out the demo product here.
Getting different print prices based on size or format
And just in case you want to return different prices based on another user selection, like the print size or format, you can add conditions to the group you just created.

In the screenshot above, you can see that we added our calculation fields into a group. Then we set a condition on this group to show only if the user selects ’10 x 10′ in the ‘Size’ option field.
We can then duplicate this group and choose to display the duplicated version if the user chooses a different option. You can also change the look up table used in each group.
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
For some of the more advanced features, you might need the Advanced Uploads and/or the Advanced Calculations extensions:
Advanced Uploads for Add-Ons Ultimate
Power up your file uploads - let users crop, size and rotate their uploaded files
Advanced Calculations for Add-Ons Ultimate
Make your calculations and look up tables easier to manage
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.
Do you offer a facility – so we can check the image first – and then take payment?
Hi – not at the moment but it’s a feature I plan to add.
Thanks.
Can I connect this to my cloud storage so all uploaded images and orders are saved in my cloud storage account?
Hi Christian
That’s something I’m looking into at the moment.
Thanks.
Do you know roughly when this will be added? Is it something you 100% plan on adding?
Thanks
Hi Christian
I don’t have a date for this at the moment.
Thanks.
Hello,
Is it possible to upload an image and have that image displayed on the product so that customer can see how that particular image will look on the final product?
Thanks
That’s a feature that I’m working on.
Thanks.
Do you have any specific timeline for when this feature will be added?
Thanks
Unfortunately I don’t have a specific date that I can give you.
Ok. Thank you for letting me know.
Thanks
This would be awesome!