A common source of frustration when you run a WooCommerce store is selling customizable products. A customer wants to upload their logo for a custom print job, or they want to pick a specific color for a product that comes in multiple shades, and the default WooCommerce setup just does not have a clean way to handle either of those things out of the box.
The standard product page gives you variations through the attribute system, and that is about it. No file upload field, no color swatch picker, no way to collect specific customer input that goes beyond a basic dropdown. For stores selling personalized products, custom merchandise, bespoke items, or anything that requires the customer to provide information or make a visual selection before the order is placed, this gap creates real operational friction.
WooCommerce product addons plugins solve this by letting you add custom fields and interactive options directly to the product page. This blog covers specifically how to add file upload fields and color swatches, two of the most requested custom field types, using the Product Addons and Custom Fields Manager plugin by FmeAddons.
Table of Contents
Why File Uploads and Color Swatches Specifically?
These two field types come up more than any others when store owners start thinking seriously about product customization, and there are good reasons for that.
File uploads are needed any time a customer has to provide an asset for the order to be fulfilled. A printing business needs the customer’s design file. A custom portrait artist needs a reference photo. An embroidery service needs the logo.
A laser engraving shop needs the text or artwork file. Without a proper file upload field on the product page, stores resort to email back-and-forth to collect these files after the order is placed, which delays production, creates version control problems, and generates unnecessary customer service load.
Color swatches serve a different purpose. They give customers a visual way to select a color option rather than reading a text label and imagining what the color actually looks like. A customer choosing between “Slate Blue” and “Cobalt” from a dropdown is deciding with considerably less confidence than one who can see the actual color before selecting it.
Lower confidence at the selection stage means higher return rates after delivery because the product did not look the way the customer imagined. Both of these field types address specific gaps in the default WooCommerce product page experience, and adding them properly makes a real difference to both the customer experience and the operational side of fulfilling custom orders.
What The Plugin Actually Offers?
The Product Addons and Custom Fields Manager by FmeAddons is built around a rule-based system where you create rules that define a set of custom fields and then assign those rules to specific products or categories. One rule can cover many products, which saves significant setup time for stores with large catalogues where the same field configuration applies across multiple products.
The plugin supports 19 different field types which is a wider range than most comparable plugins and it includes both the file upload and color swatch types we are focused on here alongside text fields, text areas, number inputs, email fields, date pickers, time pickers, checkboxes, radio buttons, select menus, multiselect options, image radio buttons, a color picker, a Google Map field, paragraph text for instructions, and heading fields for visual organization.
Each field can be set as mandatory or optional, priced or free, and shown or hidden based on conditional logic tied to other fields the customer has already interacted with.
Getting the Plugin Installed:
Installation follows the WooCommerce subscriptions process:
- Log in to your WooCommerce account and go to My Subscriptions
- Find the Product Addons and Custom Fields Manager and click Add to Store
- Follow the on-screen instructions, and the plugin installs automatically
- Once installed, activate it from the Plugins section in WordPress admin
- Navigate to WooCommerce > Settings > Custom Product Fields tab, where all configuration lives
Creating a Rule Before Adding Fields:
Everything in this plugin starts with a rule. The rule is the container that holds all the fields you want to display, and the rule settings determine which products or categories those fields appear on.
Click Add New Rule in the Custom Product Fields settings tab.
A rule settings panel appears where you:
- Set the Rule Name so you can identify it in the rules list. Use something descriptive like “Custom Print Product Fields” or “Color Selection and File Upload” rather than a generic name
- Toggle the rule to Enabled
Once the rule is created, you move into the field settings where the actual field configuration happens.
Adding a File Upload Field:
Inside the rule’s field settings, click to add a new field and select File Upload as the field type.
The file upload field has several configuration options worth working through carefully:
Field Label:
This is what the customer sees above the upload button on the product page. Make it specific and instructional rather than generic. “Upload Your Design File” or “Attach Your Logo Here” tells the customer exactly what to do and what format of file is expected, rather than leaving them guessing.
Placeholder:
Use the placeholder text to give customers additional guidance. Something like “Accepted formats: JPG, PNG, PDF, AI, SVG” gives the customer the information they need to submit the right file without having to contact support to ask.
Make Field Mandatory:
If the order literally cannot be fulfilled without the customer providing a file, mark this field as mandatory. The customer will not be able to add the product to the cart without uploading a file, which prevents the store from receiving incomplete orders that then require follow-up.
Field Price:
If the store charges a processing or setup fee for custom file orders, you can attach a price to the file upload field itself. When the customer uploads a file, the fee adds to the product total automatically. This is cleaner than building the fee invisibly into the product price and is more transparent for customers who can see exactly what they are paying for.
What we noticed with stores that implement mandatory file upload fields is that the volume of incomplete custom orders drops significantly because the product page itself enforces the information collection rather than relying on customers to voluntarily provide files through a separate channel.
Adding Color Swatches
For the color selection, the plugin offers two relevant field types: Radio Color for standard color swatches, where the customer clicks a color tile, and Radio Image for swatches that display an actual image or pattern rather than a solid color.
Setting Up Radio Color Swatches:
Add a new field and select Radio Color as the field type.
Configure the following:
- Field Label: Something like “Choose Your Color” makes the purpose immediately clear
- Add color options: For each color available, add a swatch option by entering the color name and selecting the hex color value. The swatch displays as a clickable color tile on the product page rather than a text label in a dropdown
- Field Price per option: If different colors carry different pricing, for example, a premium color that costs more to source or produce, you can attach individual prices to specific swatch options rather than a single price for the whole field
- Make Field Mandatory: For products where a color must be selected before fulfillment is possible, mark this mandatory so customers cannot add to cart without making a selection
- Picked WooCommerce because it gave me flexibility without paying a huge fee
- Installed only the plugins I needed at first, later I added more as the store grew
- Focused on making the website look clean and easy to use instead of wasting time on a perfect design
Setting Up Radio Image Swatches:
If the product variations are better represented by an image of the material, pattern, or texture rather than a solid color tile, use the Radio Image field type instead.
The setup follows the same structure, but instead of selecting a hex color for each option, you upload an image that represents that variation. A fabric store showing different pattern options, a flooring store showing different timber grain finishes, or a wallpaper store showing different print designs are all situations where image swatches communicate the option more accurately than a color tile.
Assigning the Rule to Products or Categories:
Once the fields are configured, go to the Display Settings tab within the rule.
Here, you select which products or categories the rule applies to. You can assign the rule to:
- Specific individual products selected from the product list
- Entire categories, so every product in those categories automatically shows the fields
- Both a mix of specific products and categories if the rule is relevant across different parts of the catalogue
The category-level assignment is particularly time-saving for stores with large catalogues. Assigning one rule to a category means every product in that category gets the fields automatically, and adding new products to the category in the future means they inherit the fields without any additional configuration.
Using Conditional Logic to Keep the Page Clean:
This is where the product add-ons WooCommerce setup gets meaningfully more sophisticated. If both the file upload and the color swatch are on the same product page, there may be scenarios where one should only appear when the other has been interacted with in a specific way.
For example, if the product offers both a standard color option and a custom color option, the file upload field asking for a custom color reference image should only appear when the customer has selected “Custom Color” from the swatch options rather than one of the preset colors.
Setting up this conditional behavior in the plugin works through the Set Conditions option within each rule:
- Click Set Conditions on the relevant rule
- Define the condition by selecting the field that acts as the trigger, in this case, the color swatch field
- Set the comparison, for example, “equals,” and select “Custom Color” as the value
- Assign the file upload field as the one that appears when this condition is met
The plugin applies AND logic between conditions within a group and OR logic between multiple groups, which gives enough flexibility to handle most conditional display scenarios without needing complex nested logic.
Sorting Field Order:
Once all fields are configured, the Sort Fields option within the rule lets you drag and drop fields into the order they should appear on the product page.
Putting the color swatch before the file upload field makes logical sense because the customer selects their color first and then uploads any reference material. Getting the sequence right makes the product page flow feel natural and deliberate rather than like a collection of fields that appeared in whatever order they were created.
A Few Practical Tips Before Going Live:
- Test the mandatory fields by trying to add the product to the cart without filling them in. Verify that the error messages are clear and helpful rather than just generic form validation messages
- Test the conditional logic by selecting options that should and should not trigger dependent fields and confirming the right fields appear and disappear correctly
- Test on mobile because upload fields and color swatches both behave differently on touchscreens, and issues that do not appear on desktop often surface on mobile
- Check that uploaded files appear correctly on the order by placing a test order with a file attached and confirming the file is accessible from the WooCommerce order details page in the admin
Summary:
Adding file upload fields and color swatches to WooCommerce product pages solves two of the most common gaps in the default product customization experience. File uploads eliminate the email back-and-forth that comes with custom orders, and color swatches give customers the visual confidence they need to select the right option without second-guessing a text label.
The Product Addons and Custom Fields Manager by FmeAddons handles both through a rule-based configuration system that is practical enough to manage across a large catalogue, detailed enough to handle conditional display logic, and flexible enough to attach pricing to specific fields or field options.
Getting these fields properly set up is one of those product page improvements that consistently produces cleaner order information, fewer post-order complications, and a notably better experience for customers building a customized product from scratch.
About the Author:I’m Jeff Harrison. I’ve been exploring WooCommerce for quite some time, mainly by installing plugins and seeing how they actually perform in real stores. I spend a lot of time working with plugins like WooCommerce product addons and similar others that help store owners add functionality and improve the shopping experience. I usually focus on what a plugin actually delivers once it’s active, how its pricing holds up over time, and whether its features actually work in day-to-day use. Polished marketing claims aren’t my concern. My goal is simple: give store owners a clear sense of whether a plugin will genuinely help their store or end up gathering dust after a week.
Be the first to write a comment.