How to add image uploads for your WooCommerce products

How to Add Image Uploads for Your WooCommerce Products

Do you want your WooCommerce customers to be able to upload images when making an order on your store? Then read further to learn how to allow image uploads on your WooCommerce product pages.

Allowing customers to add image uploads to products is an excellent way to offer extra customization options. This will come in very handy for gift stores, print shops, bespoke fashion brands, or any other store that sells custom-made products.

Out of the box, WooCommerce doesn't allow customers to upload images on the product page. The best way around this is to use WooCommerce Product Options. As well as letting you add image upload fields, you can use it to add a wide range of extra product options to product pages.

In this article, we'll break down the entire process of adding image upload fields to WooCommerce. You'll learn:

Let's get to it!

Introducing Product Options - the best WooCommerce image upload plugin

WooCommerce Product Options is the best WordPress plugin for adding image upload fields to your WooCommerce product pages. The tool is very beginner-friendly and with just a few clicks, your store visitors can start uploading images when making orders on the front end.

Product Options has a very modern user interface that helps you to set up image upload fields and manage customer images with zero coding experience. The easy-to-use interface saves you a lot of time and eliminates the need to hire a developer, thereby saving you money as well.

Key features

Here are a few key WooCommerce Product Options features that make it ideal for adding image uploads to WooCommerce product pages:

  • Upload any image file typeWooCommerce Product Options is a powerful extra options plugin that supports all types of image upload. Using this plugin, your customers will be able to upload JPG, JPEG, PNG, and other image file types. With PNG's, you can easily accept logo uploads with transparent backgrounds and use them for branding purposes. Customers get to upload as many images as they want. The plugin also makes it possible for them to choose from images and templates that you've previously added to the product.
  • Add extra product optionsCombine image upload fields with other extra product options to give your customers as much flexibility as possible. The plugin supports the ability to add text to their designs, set custom fonts, choose paper weight, and tweak other order details using dropdowns, radio buttons, and checkboxes.
  • Specify maximum image sizeUse an upper image size limit to optimize your hosting storage and site performance. Among other input rules, you can also add a character length limit for text fields.
  • Custom pricing for image uploadsYou may want to price customized products differently than other products in your store. Product Options lets you add extra fees based on the product options a buyer adds to their order. You can charge a flat fee, per character count, or even charge more for printing multiple images.
  • Use conditional logic to show/hide image upload fields and printing optionsTailor the ordering process as much as possible using conditional logic. You can hide certain product options based on the previous options the buyer chooses. For example, you can set the image upload field to appear only when a customer select 'Create custom design'. Alternatively, the shopper can select 'Choose from template' to choose from existing images.

WooCommerce Product Options also integrates seamlessly with other Barn2 plugins like Quick View Pro and Bulk Variations. Together, they bring even more features to your WooCommerce store.

How to add an image upload option to WooCommerce product pages

Ready to add image uploads to your WooCommerce product pages? The first thing you need to do is get your copy of WooCommerce Product Options here. Once you're done, you'll receive an email with a downloadable ZIP file and license key.

Next;

  1. Log into your WordPress admin area and go to Plugins → Add New → Upload Plugin.
  2. Select the plugin ZIP file. Click Install Now then Activate Plugin.
  3. Use the setup wizard to apply the basic settings and activate your license key.

At this point, WooCommerce Product Options should be fully functional. It's time to add your first image upload field to your WooCommerce product page.

To do this, go to Products → Product Options → Add Group.

woocommerce product options add new options group

On the next page, set the group name and select the products or product categories you want the product options to apply to. Then click Add option.

woocommerce product options add new option in group

Add an options name and select File upload under the Type section.

woocommerce product options add image upload field

Next, scroll to edit the following image upload field settings:

woocommerce product options image upload field settings
  • LabelThis appears beside the image upload field on the store's front end.
  • Price typeYou can either charge a flat fee, quantity-based fee, or percentage increase or decrease.
  • PricingEnter an appropriate value here based on the price type.
  • DescriptionThis optional text appears beneath the image upload field on the store's front end
  • RequiredCheck the box to make it a required field to be able to add the product to the cart.
  • Advanced settingsClick this toggle button to access advanced settings for your image upload field. We'll explore more of these settings later.

Once you're satisfied with your selections, click Save.

Now when you go to the WooCommerce single product page, you'll see your newly added image upload fields.

woocommerce product options new image upload fields

Next, let's add some advanced features to our image uploads.

Add image upload options

So far, we’ve demonstrated how to add a simple image upload field to a WooCommerce product page. But WooCommerce Product Options offers even more features that give you better control.

Let's take a look at the advanced WooCommerce image upload features.

Enable multiple image uploads

As mentioned earlier, WooCommerce Product Options allows site users to upload multiple images on the same product page. Customers can upload bulk images to WooCommerce products in either of two ways.

1. Add multiple image uploads to a single product option field

In this case, the user will be able to select multiple images from the local storage when uploading images. Alternatively, they can simply drag and drop multiple images into the upload field on the product page.

To do this, go to Product → Product Options and click Add Group to create a new products option group. Alternatively, click Edit after hovering over an existing group to make changes to it.

edit woocommerce product options group

Next, click Edit option under the product option you want to edit. On the next page, toggle on Advanced settings and scroll down to the Maximum number of files tab. Enter a specific value and click Save changes.

woocommerce product options enable image uploads

This will immediately apply to all the products where the option group is visible. And there's no limit to the maximum number of files you can allow for each image upload field.

2. Add multiple image upload fields to a product page

Alternatively, you can add several product options to one product page and allow one image upload per option. This forces the customer to upload each image separately, one at a time. It's an ideal solution for adding different images to different sections of a product's design.

One common use case is a custom t-shirt design shop.  In this case, you can allow site visitors to upload one image for the front design of the t-shirt and another for the back.

t-shirt design add multiple upload fields

To implement this, go to the options group settings page and click Add option.

woocommerce product options add multiple product options

Make sure you set the type to "File upload". Then fill in the other option settings fields accordingly.

woocommerce product options one image upload to product page

You can add as many image upload fields as you want this way. Once you're done, click Save changes.

3.Set the allowed image upload types

WooCommerce Product Options also allows your customers to upload different image file types to the product page. To allow a certain type of image, use the toggle button to enable Advanced settings on the product option settings page.

Then enter the image file extension, e.g. jpg. The plugin will suggest the available image types. Select the one you want to accept.

woocommerce product options allow multiple file types

You can add as many image types as you want. Afterward, click Save changes.

4. Add a maximum file size for images uploaded to WooCommerce product pages

Still in the Advanced settings section, you can set a maximum image size for the image uploads on a WooCommerce product page.

Simply enter a specific value in megabytes (MB) in the Maximum file size field.

woocommerce product options set maximum image upload file size

Now, users won't be able to upload image that are bigger than the size you've set.

5. Charge for images uploaded to WooCommerce products

When adding WooCommerce image uploads to product pages, you can also choose to charge separately for this type of product. Product Options offers four pricing structures:

  • Flat fee - Adds a fixed fee to the main product price (e.g. charge an extra $10 for uploading 1 or more images, regardless of how many of the product the customer purchases).
  • Quantity-based fee - Adds a fixed fee based on the quantity of the product. For example, if you add a quantity-based fee of $10 and the customer orders a quantity 2 of the product, then they will be charged $20. (Please note that this is based on the quantity of products purchased and not the number of images uploaded. If you want to charge for each image uploaded, then you would need to add multiple image upload fields, set the maximum number of fields for each one to 1, and add a separate fee to each one.)
  • Percentage increase or decrease - Applies a specific percentage price change to the original price of the product.

If you're adding more than one image upload field to the same product page, the first option is to charge a flat fee regardless of the number of images the user adds. To do this, select "Flat fee" in the Price type dropdown. Then enter a specific value.

woocommerce product options charge flat fee for image upload on product page

Alternatively, you can charge a certain fee for every additional image the buyer adds to the product. To achieve this, you need to create a separate product option for each image as we demonstrated earlier.

woocommerce product options add multiple product options

You can then add an extra charge for each image upload field.

6. Conditionally show/hide your image upload fields

WooCommerce Product Options also ships with a conditional logic feature that allows you to decide when to show image upload fields on the WooCommerce product page. This can be very useful when you want to sell a product with and without customization options.

To achieve this, create a checkbox product option with the label ‘Upload my own design’ first.

woocommerce product options customize design checkbox

Then add the upload fields with a condition that they will only appear when the checkbox add-on has been selected.

Here, we selected "Any choice" in the Value field because the first product option is a checkbox.

Here's the final result on the front end.

This feature helps you to show extra options only to customers who need them. This way, you get to keep your product page clean and tidy.

7. Allow customers to remove images uploads

This is a default feature you get with the plugin. As a rule of thumb, your customers can cancel an image upload before it's completed.

woocommerce product options image upload progress bar

They can also delete uploaded images too.

woocommerce product options delete uploaded image

8. Add an AJAX uploader with an upload progress bar while images are uploading

Additionally, your customers get to see a progress bar that lets them know the progress of their image upload. This is particularly important for large images.

woocommerce product options ajax image uploader progress bar

9. Displaying uploaded images on the WooCommerce cart and checkout

After a shopper uploads images on a WooCommerce product page, Product Options also displays the images in their cart and during checkout.

After clicking Add to cart, the shopper will see a link to the uploaded image in their cart. They can click the link to review the image in a different tab.

uploaded image on woocommerce product page in cart

The link is also available on the checkout page.

uploaded image on woocommerce product page on checkout page

Receiving images uploaded by customers

As a WooCommerce store owner, it's important to manage the images customers upload to your product pages properly. WooCommerce Product Options handles these image uploads in an intuitive manner that ensures you never miss or mix up images added to any order.

Each time a shopper completes an order, a link to the uploaded image is also included in the order confirmation email.

You can also find the image link on the individual order page by going to WooCommerce → Orders.

manage order image upload on woocommerce product page

This makes it very easy to manage image uploads on your WooCommerce product pages and deliver the buyer's exact order.

Worried about image files not associated with any particular order? For example, a customer may abandon their cart after uploading files. WooCommerce Product Options only stores such images temporarily and deletes them automatically after 7 days. This helps to optimize your hosting storage.

Bonus: Create a bulk variations order form with image uploads

Making bulk orders on WooCommerce stores with multiple product variations can be quite cumbersome. For example, many clothing stores and custom t-shirt brands allow customers to order their products in different sizes and color options.

Having to order each item individually and upload images to the WooCommerce product pages every time will impact the customer experience negatively.

For a better user experience, you can easily combine the Product Options plugin with WooCommerce Bulk Variations. This allows you to list variations in an order form on the product page while displaying image upload fields and other product options beneath.

woocommerce product options bulk variations integration

We highly recommend this approach for WooCommerce stores where the customer is likely to order multiple variants of the same product, e.g. different clothing sizes for team-branded workwear.

What sort of sites need image upload fields on the WooCommerce product page?

An image upload field isn't a standard feature of WooCommerce product pages. But certain stores need it in order to sell the types of products they offer. These stores use images which customers submit to create custom-made products.

Here are some common WooCommerce site types that require users to upload files on the product pages:

1. Gift stores

If you own a store that sells personalized gifts, then it makes sense to allow customers to upload images while making orders.


image upload on woocommerce product page personalized gift store

Whether it's a personalized mug, tote bag, wine box, or virtually any gift item, user-generated content will help you deliver the buyer's exact order.

2. Bespoke fashion stores

Image upload fields are also ideal for bespoke fashion brands. One common use case is adding images and custom designs on t-shirts, hoodies, and sweatshirts.

image upload on woocommerce product page bespoke fashion brand

But this goes beyond customized t-shirts or branded sports jerseys only. Customers can also upload multiple images of the exact outfit and style they're looking to order.

3. Electronic accessories shops

Customized cases and skins for mobile phones, laptops, tablets, and even gaming consoles have become fairly popular among electronic device users. If you sell electronic devices, allowing users to upload images to your WooCommerce product pages makes it very easy for them to personalize their orders the way they want.

image upload on woocommerce product page mobile phone case

Here's an ideal use case where you can combine the image upload field with other extra product options like dropdown selection for case color and device type. Once the buyer made their selections, they can then upload their images and preview the result in real time.

4. Multipurpose print stores

Other types of print shops with print-on-demand products aren't left out either. Irrespective of the customer's print needs, allowing them to upload images directly to your WooCommerce product page can come in really handy. It makes the process of making online orders seamless and eliminates the need to come to a physical store.

image upload on woocommerce product page picture frame

Combined with other product options, site visitors can select different print materials, paper dimensions, and other important parameters. This applies to print projects as small as bedside picture frames and as large as billboards. The customer can upload images - such as attaching a PDF - and submit it with their order.

5. Branding companies

All types of branding companies can also this feature on their WooCommerce product pages. Corporate entities often need branded items. These could be business cards, employee badges, conference swags, branded pens, umbrellas, brooches, and even giveaway items.

image upload on woocommerce product page employee badge

There are loads of other use cases for image upload fields on WooCommerce product pages. If you ever need your store visitors to customize their orders using their own images, bear in mind that you aren't limited to WooCommerce's default features.

You can easily use a WooCommerce image upload plugin to offer your customers this feature. Let's take a look at the best plugin for this.

Get started with WooCommerce Product Options for image uploads

Certain online stores require customers to customize their orders with user-generated designs. Allowing image uploads on WooCommerce product pages ensures your store visitors get as many customization options as they want.

Though WooCommerce doesn't support image uploads by default, you can easily achieve this with WooCommerce Product Options. Using this plugin, you get to:

  • Accept any image type
  • Charge for each image added to the order
  • Use conditional logic to show or hide the image upload fields
  • Add other types of product options

Ready to start accepting image uploads on your WooCommerce product pages? Then get your copy of WooCommerce Product Options and boost your store's shopping experience today.

We hope this detailed step-by-step guide has helped you add your first image upload fields to WooCommerce. If you ever get stuck along the way, kindly let us know in the comments section below!

6 Comments

  1. Hey,
    Woocommerce upload image on-product-page showed perfectly on laptop screens but when we open a website on mobile screen the photo upload option is on waiting sign.. and not shown, before the person select ad to cart option, and after that its disappeared again!! please tell what is the issue?

    • Hi Muhammad. I'm sorry that you encountered an issue with the file upload field. I'd be glad to take a closer look into that for you. I've responded to your support ticket earlier where you raised the same issue. To streamline our communication, I suggest we continue corresponding via our Support Center. Thanks!

  2. Is it possible make the product main image change based on the customer input?

    • Hi, Fred.

      WooCommerce Product Options doesn't update the main product image based on the files/photos uploaded by customers. Thanks for mentioning this to us! This is a popular feature request and we are hoping to add it to the plugin in the future, although unfortunately I can’t give you any exact timescales right now.

      I have added your ‘vote’ to our feature request list which will help us to decide when to prioritize it over other new features. We will let you know if/when we add this in future.

  3. Hello, is there an option to manipulate image after upload. Eg adding different filters, rotate and crop?

    Thank you

    • Hi Vladimir, WooCommerce Product Options doesn't have this option. I'd recommend advising people to edit the image before uploading it, e.g. using Photoshop.

Please share your thoughts...

Your email address will not be published. Required fields are marked *