The ‘Upload’ custom field provides a powerful and secure way for your customers to upload one or more files directly on the product page. This is essential for personalized products that require a customer’s image, a design file, or any other document.
If you need assistance, kindly contact our support team. They will be able to assist you with certain issues.
You can set a price for the upload, control the number of files, limit the file size, and specify exactly which file types are allowed (e.g., .jpg, .png, .pdf).
Using the ‘Upload’ Field in WowAddons
When you add or edit an ‘Upload’ field, the settings panel opens, giving you access to the General, Styles, and Conditional Logic tabs.
The General tab, which is open by default, contains all the primary settings to configure how your file uploader will function. These options allow you to set pricing, customize labels, and define strict rules for file uploads.
General Tab Settings
The General tab contains all the core settings for your upload field.
Basic Setup
Title: The main label for the field, (e.g., “Upload Your Logo”).
Hide Title: (Toggle) Hides the main field title on the product page.
Help Text: Optional descriptive text that appears below the title to guide the customer.
Required: (Toggle) Prevents the customer from adding the product to the cart without uploading the required number of files.
Setting the Upload Price
You can optionally charge your customers a fee for the customization by uploading the file or you can keep it for free as the it’s mandatory for the order. Either way there are three steps to follow.
Price Type: First, set the price calculation type to control how the fee is calculated.
- Fixed: Select this to charge a single, flat fee for the upload (e.g., $12).
- Percentage: Select this to charge a fee based on a percentage of the main product’s price.
- No Cost: Select this to make the file upload free.
Regular: Here you will enter the standard, non-discounted price for the upload here.
Sales: This one is an optional choice. If you want to offer the upload at a discounted price, you can enter the sale price here. This price will override the ‘Regular’ price while active.
Uploader Labels
These fields let you customize the text inside the upload box.
- Upload Text: The text on the main upload button (e.g., “Upload”).
- Drag & Drop Text: The text that appears in the dropzone (e.g., “Click or drag and drop”).
Uploading Rules & Messages
This section gives you precise control over the files your customers can submit. It is broken into three main rule sets:
File Size
- Maximum File Size (MB): The largest size allowed for a single file (e.g., “2” for 2MB).
- File Size Error Message: The text shown to the customer if their file exceeds this size (e.g., “File is too large”).
- File Size Prefix Text: Informational text shown to the customer.You can use the variable
[max_size]to automatically display the limit you set (e.g.,Max File Size: [max_size]).
File Quantity
- Maximum Number of Files: The total number of files a customer can upload in this one field (e.g., “3”).
- Files Limit Error Message: The text shown if they try to upload more than the limit (e.g., “Too many files”).
- File Number Prefix Text: Informational text shown to the customer.You can use the variable
[max_files]to automatically display the limit (e.g.,Maximum Number of Files: [max_files]).
File Type
- Allowed File Types: Define exactly which file extensions are permitted. Type an extension (e.g.,
png,jpg,pdf) and press Enter to add it to the list. - Allowed Type Prefix Text: Informational text that displays the permitted file types.You can use the variable
[allowed_types]to automatically list all the types you have added (e.g.,Allowed Types are: [allowed_types]).
🎨 Styles Tab Settings
The Styles tab lets you customize the look and layout of the Upload field, with four main settings to explore.
Description Position: Decide where the “Help Text” appears — below the title (default), as a tooltip with a “?” icon, or beneath the upload field.
Width: Set the field’s width relative to its container (e.g., 50% to make it half-width, 100% for full width).
Element Class Name: Add your own custom CSS class for advanced styling.
Element ID: A unique, non-editable ID for this specific field, which can also be used for CSS.