1. Home
  2. Knowledge Base
  3. WooCommerce Product Add-Ons Ultimate
  4. Add-On Fields
  5. Upload fields
  1. Home
  2. Knowledge Base
  3. WooCommerce Product Add-Ons Ultimate
  4. Upload fields

Upload fields

Upload fields allow you to add upload fields to your WooCommerce product.

upload field

To add an upload field, just choose ‘Upload’ from the ‘Field Type’ dropdown list.

Parameters

  • Allow multiple uploads – check this to allow the user to upload more than one file per upload field
  • Price per upload – check this to multiply the field price per the number of uploaded files (only available when using the AJAX upload method – see below)
  • Maximum files – enter the maximum number of files that can be uploaded to this field (only available when using the AJAX upload method – see below)

AJAX uploads

If you’d like to enable AJAX uploads, go to WooCommerce > Settings > Product Add-Ons > Uploads and check the option to ‘Enable AJAX uploader’. This option is enabled by default since version 3.20.0.

enable ajax uploader

AJAX gives a better user experience, including displaying upload status and progress and thumbnails for all uploaded files.

It also allows you to charge a price per uploaded file and set the maximum number of uploaded files.

Show the ‘Upload files’ graphic

If you want to retain the ‘Upload files’ graphic to make it clear to the user that they can upload further files, just check the ‘Retain upload graphic’ option.

retain upload graphic

Disable add to cart button

You can opt to disable the add to cart button while files are uploading. This will prevent users trying to add the product to their cart before the upload is complete.

disable add to cart button

Where are uploaded files stored?

Files are uploaded to the wp-content/uploads/product-extras directory. If you prefer, you can upload files to directories based on order number.

To upload files to separate directories for each order, go to WooCommerce > Settings > Product Add-Ons and enable ‘Organise uploads by order’.

woocommerce uploads by order

How to download uploaded files

You can access the uploads in a number of ways:

  • You can view the files directly from the order screen
  • If you have the ‘Organise uploads by order’ option selected, you can click the ‘Download files’ button to download all uploads per order in a single zip
  • You can use FTP to access the uploads folder directly

How to rename uploaded files

You might want to rename uploaded files. You can do this by entering the new file name format in ‘Rename files’.

rename uploads

You can use a number of dynamic tags which will be replaced by information about the file, including:

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

Uploading different file types

By default, the plugin will allow you to upload the following file types:

  • GIF
  • JPEG
  • PNG

Uploading PDF files

If you’d like to enable PDFs as a file type, go to WooCommerce > Settings > Product Add-Ons and check the option to ‘Enable PDF uploads’.

enable pdf uploads

Uploading other file types

You can specify which file types are permitted in the ‘File types’ setting. By default, GIF, PNG and JPG image files are enabled.

File types setting

If enabling file types that are not natively supported by WordPress, please see this article.

Setting the maximum file size for uploads

To increase the permitted upload file size, go to WooCommerce > Settings > Product Add-Ons > Uploads and update the ‘Max file size’ setting.

Upload file size

Uploading without logging in

As a security measure, users are required to log in before uploading a file. If you wish to allow any user to upload files, go to WooCommerce > Settings > Product Add-Ons and ensure the ‘Users must be logged in to upload’ setting is deselected.

Hiding uploaded images in the cart and checkout

If you’d like to hide uploaded files from the cart and checkout pages, use this CSS:

.mini_cart_item dl img,
.cart_item dl img,
.pewc-upload-thumb-wrapper,
.mini_cart_item dl br,
.cart_item dl br,
.pewc-upload-thumb-wrapper br {
display: none
}

Change upload table layout

You can adjust the widths of the columns in the upload field by using this CSS:

.dropzone .dz-preview.dz-image-preview {
table-layout: fixed;
}
.dropzone table.dz-preview td.pewc-dz-image-wrapper {
width: 20%;
}
.dropzone .dz-preview.dz-image-preview .dz-details {
width: 60%;
}

Managing and clearing uploaded files

As more and more users upload files to your site, you will want to clean up any unwanted files. You can do this in a couple of ways.

Deleting files by order

Once you have processed and completed an order, you might not want to keep its uploaded files on your server. To remove all uploaded files associated with add-on fields in an order:

  • Edit the order
  • Click the ‘Delete files’ button
Delete uploaded add-on files

This will permanently delete the files uploaded to the order through an add-on upload field.

Deleting files from all completed orders

If you prefer, you can delete uploaded files from all orders with the status ‘Completed’:

  • Go to Product Add-Ons > Clean Up Files
  • Click the ‘Delete uploaded files from Completed orders’ button
Delete files from completed orders

This will permanently delete the files uploaded through an add-on upload field from all completed orders.

Bulk deleting old files

Finally, you can also choose to bulk delete all files uploaded before a certain date. This will delete all uploads – whether they are associated with an order or not, and whether or not that order is completed.

  • Go to Product Add-Ons > Clean Up Files
  • Select a date in the ‘Delete files uploaded before date’ field. Files uploaded before this date will be deleted
  • Click the ‘Scan files to delete’ button
  • A list of all scanned files to be deleted will appear
  • Click the ‘Confirm delete?’ button
Scan files to be deleted

This will permanently delete the files uploaded through an add-on upload field to your site before the selected date.

Tutorials and video

There’s an extensive tutorial on uploading files to WooCommerce products here.

Was this article helpful?

Related Articles

  • Number range slider fields
    • Plugin: WooCommerce Product Add-Ons Ultimate
    • Content Type: Support Document
  • Text swatches
    • Plugin: WooCommerce Product Add-Ons Ultimate
    • Content Type: Support Document
  • Information fields
    • Plugin: WooCommerce Product Add-Ons Ultimate
    • Content Type: Support Document
  • Calculation fields
    • Plugin: WooCommerce Product Add-Ons Ultimate
    • Content Type: Support Document
  • Textarea fields
    • Plugin: WooCommerce Product Add-Ons Ultimate
    • Content Type: Support Document
  • Text fields
    • Plugin: WooCommerce Product Add-Ons Ultimate
    • Content Type: Support Document