How to add image uploads for your WooCommerce products

Do you want to add image upload capabilities to your WooCommerce products? Then read this step-by-step tutorial to allow customers to upload images on your product pages. The uploaded images are added to the order and store administrators can download them from the order admin backend screen.

By default, WooCommerce doesn’t have any features to upload images on the product page. The best way to do it is by using the powerful Advanced Product Fields (APF) plugin. It’s a powerful WooCommerce plugin that lets you add image upload fields (and many other form fields) to your product pages. This way, customers can configure and personalize their product before ordering it from your store.

What we’ll build: an image upload field on a WooCommerce product

Below is an example of the WooCommerce product we will build. As you can see, the product contains an image uploader for JPG or PNG images with a maximum allowed file size (in megabytes).

How to add an image upload field to a product in WooCommerce

The rest of this step-by-step guide will explain how to add an image upload field to your WooCommerce products. It’s a lot easier than it sounds!

Step 1: install the APF plugin

To get started, purchase Advanced Product Fields for WooCommerce (APF) from the Studio Wombat store. Find it here: studiowombat.com/advanced-product-fields-for-woocommerce. To install and activate the plugin, follow these steps:

1. In your WordPress admin dashboard, go to Plugins → Add New → Upload Plugin.
2. Choose the zip file you downloaded. Upload it and click Activate.
3. Enter your license key.

Now that you have the APF plugin installed, you can move onto adding an image upload field to a product in your WooCommerce store.

Step 2: create the image upload field

For this part of the tutorial, we assume you already have a WooCommerce product set up and ready to go. If you need help in this department, we recommend reading Kinsta’s guide to setting up and using WooCommerce.

Let’s dive in!

In the admin dashboard, go to Products → All Products and edit your product. Scroll down to the Custom fields section:

Click Add your first field and a new section will appear with the settings for your new field. Change the following settings:

• Set Type to File Upload.
• Enter a Label to appear above the field.
• Additionally, you can enter some Instructions. They will appear below the field.
• Set the field as Required if a file must be uploaded before the product can be added to the cart.
• Optionally, you can turn on the Multiple setting to allow multiple file uploads.
• In the Accepted file types box, search for JPG and PNG. This instructs the file upload field to only accept images. The APF plugin supports a wide variety of file types, so you can allow customers to upload PDFs for example.
• Set the Maximum file size so customers cannot upload files that are too large.

When you are done, save your work by clicking the Update button on the right hand side. Visit your product page to preview the result:

It’s functional, but it looks nothing like the file upload example we showed at the start of this tutorial. We’ll fix that in the next step.

Step 3: enable the modern file uploader

By default, the browser renders a standard file upload button. It looks outdated and lacks some features. Luckily, the Advanced Product Fields plugin has a way to bypass this limitation: enabling a modern file uploader.

To enable the modern file upload in WordPress, go to WooCommerce → Settings → Product Fields and enable Modern Uploader.

Save the settings and visit your product page again to see the difference:

Power up your image uploads

There is a lot more you can do with the APF plugin in combination with image uploads (or other file types). We’ve only scratched the surface with this simple tutorial. If you’d like to read about all features and complex use-cases, we recommend reading the complete guide to adding image uploads to WooCommerce product pages.

You’ll be amazed what you can do with this powerful WordPress plugin!

Adding image uploaders to products is simple

That’s it, your WooCommerce shop now has the ability to add one or multiple image uploads to products in WooCommerce. Visitors can upload images that will be attached to the checkout and order.

You can limit the file types and restrict the maximum file size to make your store secure when accepting images from customers.

Make these changes quickly and easily with Advanced Product Fields for WooCommerce.