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.

WooCommerce upload files to the product page

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

Find Out More

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.

WooCommerce Product Add-Ons tab

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.

WooCommerce custom file upload field

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

WooCommerce file upload on the product page

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.

WooCommerce image upload thumbnail

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.

WooCommerce image upload thumbnail in cart

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.

WooCommerce file upload price

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

WooCommerce additional price for upload

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.

WooCommerce enable bulk uploads product page

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.

WooCommerce AJAX file upload on product page

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

Enable AJAX uploader setting

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.

Price per upload

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.

WooCommerce product page with custom fields and file uploader

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.

WooCommerce product page with bulk upload and calculated price

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’.

WooCommerce 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’.

WooCommerce download files by order

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.

WooCommerce rename uploaded files

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

Find Out More


  1. Avatar

    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?

    • Avatar

      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.

  2. Avatar

    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 ?

  3. Avatar

    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.

  4. Avatar

    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.

  5. Avatar

    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.

    • Avatar

      Hi Borissa – if you would like to display a gallery of images that the user can select, you could use the ‘Image Swatch’ field.



  6. Avatar


    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!

  7. Avatar


    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

  8. Avatar

    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.


  9. Avatar

    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?

  10. Avatar

    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?

  11. Avatar

    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?

Leave a Reply

Your email address will not be published. All fields are required.