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.

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.

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.

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.

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.

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.

For some of the more advanced features, you might need the Advanced Uploads and/or the Advanced Calculations extensions: