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