How to upload images to WooCommerce product pages

Many stores need to allow their users to upload images to the product page – online print shops, personalized gift stores or stationery stores are prime examples. WooCommerce doesn’t have this feature by default so you’ll need an extra plugin.

WooCommerce image upload plugin

The WooCommerce Product Add-Ons Ultimate plugin is the simplest, fastest, and most powerful way for you to add WooCommerce image uploads to your product pages.

How to add an image upload button to WooCommerce product pages

Once you install and activate the WooCommerce Product Add-Ons Ultimate plugin, you can add custom fields to your products. The plugin offers over 20 different field types, like checkboxes, text fields, etc – plus it allows you to add a file uploader to your product page.

In this article, we’ll look at two different types of image upload field – a simple file input field and a modern drag and drop uploader for multiple files. You can see examples of each below.

Decide which image upload to use

By default, Product Add-Ons Ultimate will use the modern image uploader with progress bar. This provides a better user experience on the front end and offers you more options:

• Progress bar to display the upload status for each file. This helps the user to see that the upload is taking place and how long it’s likely to take
• Thumbnails for uploaded images
• Ability to add or remove uploaded images
• Drag-and-drop functionality allowing the user to drag images into the field directly from their desktop or file explorer

However, if you prefer to use the standard file input field:

• Go to WooCommerce > Settings > Product Add-Ons > Uploads
• Deselect the ‘Enable AJAX uploader’

Add an image upload field to your product page

To add an image uploader to your product page, click the ‘Product Add-Ons’ tab in the ‘Product data’ meta box on any product within your store:

Next, click the ‘Add Group’ and ‘Add Field’ options, then choose ‘Upload’ as the ‘Field Type’. From here, enter a value in ‘Field Label’:

If you save your product and take a look on the front end, you’ll see that the product page contains an image upload field:

This is all you need to do to add WooCommerce image uploads to product pages.

There’s working demo of the product here.

Add an image upload field to multiple product pages

If you need to add an image upload field to multiple product pages, you can set up a ‘global’ field:

• Go to Product Add-Ons > Global Groups and click ‘Add New Group’ then ‘Add Field’
• Follow the steps above to create your upload field
• Decide which products to display the field on. Choose from ‘All Products’, ‘Specific Categories’ or ‘Specific Products’

This means you can add an image upload field from a single place and apply it to as many product pages as you like.

Now let’s look at some further options for our image upload field.

How to charge a price for WooCommerce image uploads

If you want to charge the customer an additional fee on top of the basic product price, enter the price for using the ‘Field Price’ setting on the ‘Pricing’ tab:

When the user uploads an image to this field, the overall product price will be increased by the value of the field price.

How to charge per image upload

Even better, you can charge the user for each upload that they make. Here, enable the ‘Price per upload’ option.

With this setting enabled, if the user uploads multiple images to the field the overall price will be increased by the field price multiplied by the number of uploaded images. The image below shows the total price of $7 – that’s $5 base price for the product plus two uploads at $1 each.

How to enable bulk WooCommerce image uploads

To allow the user to upload images in bulkd to the same field, you can enable the ‘Allow multiple uploads’ option in the ‘Uploads’ field settings:

How to set a maximum number of image uploads

If you have enabled ‘Allow multiple uploads’, you can also define the maximum number of images that can be uploaded to a field.

To do this, enter a value in the ‘Max Files’ field in your field settings:

Once you save your changes, the AJAX uploader won’t accept more images than you’ve specified.

Additional settings for image uploads

Let’s have a look at some further options.

Require users to log-in to upload

If you want, you can require your users to log in to your site before they can upload any images to the product pages. To require users to log in”

• Go to WooCommerce > Settings > Product Add-Ons > Uploads
• Enable the ‘Users must be logged in to upload’ option

With this enabled, guest users will not be able to upload images.

How to set the maximum image file size

You can set a maximum file size for your image uploads to prevent your customers from uploading files that are too big:

• Go to WooCommerce > Settings > Product Add-Ons > Uploads
• Set the maximum file size in Megabytes (MB)

This will help to prevent your server space from getting filled up from user uploads. See below for how to clean and manage uploads.

How to define which file types can be uploaded

By default, the WooCommerce Product Add-Ons Ultimate plugin lets your customers upload image files only. The default file types you can upload are JPEGs, PNGs, and GIFs. To define file types:

• Go to WooCommerce > Settings > Product Add-Ons > Uploads
• Enter the permitted file types in the ‘File types’ field

Image uploads in the order process

Once the user has uploaded one or more images to the product and clicked the ‘Add to cart’ button, the images will become part of the order. It will be displayed in the cart, checkout and order pages for the user.

Images will also be included on admin order pages as URLs. Just click to view the image.

You can also choose to attach image uploads to the emails you receive when a customer places a new order:

• Go to WooCommerce > Settings > Product Add-Ons > Uploads screen
• Enable the ‘Attach uploads to emails’ option:

How to upload images to product pages – video

At this point, you have all of the basics you need. In fact, we have a video to help sum up and explain everything we cover up to this point:

How to use WooCommerce image uploads with other custom fields

Because Add-Ons Ultimate offers over 20 different field types, you can use your image upload field along with other custom fields.

In the example, customers can upload their images and have them printed. They can also pick a frame type.

To achieve this, we’re going to add a swatch field to show the users which frames they can pick.

To add a new field, click ‘Add Field’ and select ‘Swatch’ as the field type: Give it a ‘Field label’ as well.

On the ‘Options’ tab, upload an image for each option and enter a label. If you want to charge extra for certain options, enter a price in the ‘Price’ column.

On the front end, you can see the additional options. You can add as many fields as you like.

How to manage image uploads

Let’s take a look at some settings and options for managing images uploaded by users on the product page.

How to organize WooCommerce image uploads by order number

By default, the plugin places uploaded images in a unique directory for each user. If you prefer, you can organize uploads by order number.

To ensure all image uploads within an order all live in the same directory:

• Go to WooCommerce > Settings > Product Add-Ons
• Enable ‘Organize uploads by order’

How to download all image uploads by order in a single ZIP file

If you’ve enabled ‘Organize uploads by order’ above, you’ll be able to download all the file uploads from an order in a single ZIP file.

You’ll see a new button in the order screen to ‘Download files’:

At this point, WordPress takes over and serves the files to the user.

How to rename image uploads

If you wish, you can rename uploaded files. To do this:

• Go to WooCommerce > Settings > Product Add-Ons
• Enter the format for your file names in the ‘Rename uploads’ field:

You can use the following tags, and WooCommerce replace these when a user places an order:

• {original_file_name}
• {order_number}
• {group_id}
• {field_id}
• {date}
• {product_id}
• {product_sku}

Think of them like mail merge tags, where they refer to database elements that turn into readable text on the front end.

How to delete unwanted uploads

You can manage and delete images that have been uploaded to your server in a number of ways:

• Delete all uploaded images associated with a specific order
• Delete uploaded images associated with all completed orders
• Delete all images uploaded before a certain date

This ensures that your server is not full of unwanted image uploads. To bulk delete uploads:

• Go to Product Add-Ons > Clean Up Files
• Choose ‘Delete uploaded files from Completed orders’ to delete all images uploaded to orders that have been marked ‘Complete’
• Alternatively, select a date and delete all images uploaded before that date

Extend Add-Ons Ultimate with additional plugins

You can extend the image upload features in WooCommerce Product Add-Ons Ultimate using one or more of the following plugins. All these plugins, plus Add-Ons Ultimate itself, are included in the Product Add-Ons Ultimate Bundle. Pricing for a single-site license for the bundle starts at $129.

How to edit image uploads

You might want to let users edit the images they upload. You can do this with WooCommerce Product Add-Ons Ultimate and with the Advanced Uploads extension.

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.

With Advanced Uploads, you can also allow the user to upload multiple images per field and specify a quantity for each file.

How to preview uploaded images on the main product image

With the Image Preview extension, you can allow users to upload images and see them previewed as part of the main product image.

You can also have multiple image previews on the same product page if you wish.

How to review and approve WooCommerce image uploads

You might want to enable your customers to upload files that you then rework or revise. This way, you can present the order details page to the customer for their review and approval.

You can do this using the WooCommerce Review and Approve plugin. There’s a full tutorial on creating a WooCommerce file approval process elsewhere on the blog. It’s essential reading if you want to implement this functionality.

Adding WooCommerce image uploads to product pages – final thoughts

Using the WooCommerce Product Add-Ons Ultimate plugin, it’s simple to implement image uploads on a product page. You will set parameters such as file size and file types, and display thumbnails. For more advanced functionality, you can enable an AJAX drag-and-drop file uploader. This lets users upload their images in bulk.

For some of the more advanced features, you can use the extensions contained in the Product Add-Ons Ultimate Bundle

All our plugins come with a 14 day money back guarantee – so you can try risk-free. They’re compatible with all themes and page builders – and backed by our world-class support team.