Adding custom fields to your WooCommerce product pages lets you collect extra information from customers at checkout, such as engraving text, gift wrap notes, or file uploads for personalization. This guide shows you how to add those fields without writing any code, using the Product Addons and Custom Fields Manager so your store can offer tailored products and capture the exact details you need to fulfill each order.
Why Custom Fields Matter for WooCommerce Stores
Standard WooCommerce product pages let customers choose a quantity and click "Add to Cart." That is enough for simple products, but not for businesses that sell customizable items. A custom field lets you ask a specific question right on the product page.
Think about a store selling personalized mugs. Without a custom field, the customer has no way to tell you what name to print. With one, the field appears under the price, and the customer types the name before adding the mug to their cart. The text then appears in the order details so you can produce the correct item. This eliminates back-and-forth emails and the risk of wrong orders.
Beyond personalization, custom fields are useful for gathering measurements for clothing, selecting a delivery date for perishable goods, choosing a monogram style for jewelry, or attaching a design file for printed products. They turn a one-size-fits-all product page into a configurable order form that matches your real business workflow.
What You'll Need
- Administrator access to your WordPress site (you need the ability to install plugins).
- A self-hosted WordPress site running WooCommerce.
- The Product Addons and Custom Fields Manager plugin installed and activated.
- Estimated completion time: 10-15 minutes for the first custom field group.
- Difficulty level: Beginner. No code or developer skills required.
Full documentation: Official Documentation
Quick Answer: How to Add Custom Fields Without Code
Install and activate the Product Addons and Custom Fields Manager plugin from WooCommerce.com. Create a new add-on group, choose your field types (text, file upload, radio buttons, checkboxes, etc.), assign the group to specific products or categories, and save. The fields appear automatically on the front end, and the customer's input is recorded in the order details.
How Do I Add Custom Fields to WooCommerce Product Pages?
There are two reliable approaches. The plugin method is faster and safer for non-developers. The manual method requires editing your theme's template files, which is riskier and not recommended for most store owners. This guide covers both, with the plugin method first because it is the right choice for the majority of WooCommerce users.
Method 1: Product Addons and Custom Fields Manager
This official WooCommerce extension gives you a visual interface for building custom field groups. You do not touch any code, and the fields integrate cleanly with the WooCommerce cart and checkout system.
Step 1: Install and Activate the Plugin
Why: The plugin adds the configuration interface and the code that displays custom fields on product pages. Without it, you have no way to create fields visually.
Action:
- Go to Plugins → Add New in your WordPress admin.
- Click Upload Plugin and select the ZIP file you downloaded from your WooCommerce.com account.
- Click Install Now and then Activate.
Result: A new menu item called Product Add-ons appears in your WordPress admin sidebar. This is where you build your custom field groups.
Step 2: Create a New Add-On Group
Why: A single custom field (like a text box for engraving) is useful, but often you need multiple related fields for one product. Grouping them keeps your configuration organized.
Action:
- Navigate to Product Add-ons → Add New.
- Enter a Title for the group, for example "Personalized Mug Options." This title is for your internal reference only.
- In the Add-Ons section, click Add Field.
Result: You see a blank field configuration panel where you set the field type, label, and options.
Step 3: Choose Your Field Type and Configure It
Why: Different types of information require different input elements. A short text field is right for a name. A file upload field is right for a print-ready design. The plugin offers a range of field types, including text, textarea, radio buttons, checkboxes, select dropdowns, date picker, file upload, color picker, and number input.
Action:
- From the Type dropdown, select the input type you need. For an engraving text box, choose Text.
- Enter the Label customers will see, for example "Name to engrave."
- Optionally enter a Description to guide the customer, for example "Enter up to 15 characters."
- Set Required to Yes if the customer must fill this field before adding the product to their cart.
- For text fields, you can set a Maximum Characters limit (e.g., 15) to prevent inputs that are too long.
Result: The field appears in the add-on group preview. Continue adding more fields as needed for your product.
Step 4: Assign the Add-On Group to Products
Why: You need to tell WooCommerce which products should display the custom fields. You can assign the group to all products, specific products, product categories, or product tags.
Action:
- Scroll to the Product Add-Ons meta box on the product edit screen.
- Search for and select the product(s) you want the add-on group to appear on.
- Alternatively, go to the group's settings page (Product Add-ons → Edit on your group) and set the Product Filter to Categories or Tags and select the appropriate terms.
Result: The custom fields now appear on the front-end product page, below the price and above the "Add to Cart" button.
Step 5: Test the Customer Experience
Why: You need to confirm the fields display correctly, enforce any required-field rules, and pass the entered data into the cart and order.
Action:
- Visit the product page on your live store (or a staging site).
- Fill in the custom field and click Add to Cart.
- Go to the cart page and verify the field value is displayed next to the product.
- Complete a test checkout and check the order details in WooCommerce → Orders to confirm the custom field data is saved.
Result: If the data appears in the order, the setup is correct. If not, double-check that the group is assigned to the right product and that the field is set to visible.
Step 6: Manage Pricing Options (Optional)
Why: Some custom selections should affect the product price. For example, adding gift wrapping might cost extra, and selecting a larger size might add more.
Action:
- In the add-on field configuration, find the Price setting.
- Enter the additional cost for the option. You can set a flat fee per item or a percentage of the base product price.
- For checkbox or radio button fields with multiple options, you can assign a different price to each option.
Result: The price updates in real time on the front end as the customer selects options, and the correct total is passed to the cart.
Other Plugins That Can Also Do This
Several other WooCommerce extensions offer similar custom field functionality, each with a slightly different focus. If the Product Addons and Custom Fields Manager does not fit your workflow, consider these alternatives.
Custom Fields for WooCommerce
This extension focuses on checkout and account page fields rather than product page fields. Use it to simultaneously add custom fields to the Registration, My Account, and Checkout pages. Select from a range of 19 different field types. It is ideal if your primary need is gathering data during the checkout process rather than on each product page.
Product Input Fields
A simpler plugin that adds text boxes, dropdowns, and upload fields directly to product pages. It is lightweight and works well for stores that need only a few basic custom fields without price modifiers or complex conditional logic.
Flexi Custom Order Numbers
This plugin is not for product-page custom fields, but it solves a related problem: generating order numbers that include information from custom fields. If your store uses custom fields heavily, this extension can incorporate that data into your order numbering system for easier tracking.
Method 2: Manual Template Changes (Not Recommended for Beginners)
If you cannot install a plugin, you can edit your theme's template files to add a custom field directly. This method is risky because theme updates can overwrite your changes, and a single syntax error can break your site.
Step 1: Locate the Correct Template File
WooCommerce uses template files in your theme's woocommerce folder. The file that controls the product page content area is single-product/add-to-cart/simple.php for simple products, or variable.php for variable products. Copy the file to your child theme to preserve changes during updates.
Step 2: Add the HTML for Your Custom Field
Inside the copied template file, find the line before the "Add to Cart" button (typically <?php do_action( 'woocommerce_before_add_to_cart_button' ); ?>). Insert your custom field HTML, for example a text input with a label.
Step 3: Save the Data to the Cart
Use a custom function in your child theme's functions.php file to capture the field value when the product is added to the cart. Hook into woocommerce_add_cart_item_data to store the value, and use woocommerce_get_item_data to display it in the cart and checkout.
Because the exact code depends on your field type and theme structure, this method is not something you can copy-paste generically. If you need a reliable, no-code solution, the plugin method in Method 1 is the safer and faster choice.
Troubleshooting
Custom field plugins usually work immediately after activation, but a few common issues can prevent fields from appearing or saving correctly.
If custom fields do not appear on the product page
The most likely cause is that the add-on group is not assigned to that specific product or category. Go to Product Add-ons and edit your group. Check the Product Filter setting and make sure the correct products or categories are selected. Clear your site cache if you use a caching plugin.
If the cart shows incorrect pricing after adding options
The price setting in the field configuration may have been applied incorrectly. Edit the add-on field and verify that the Price value is set to the correct number and that the Price Type (flat fee or percentage) matches your business logic.
If custom field data is lost during checkout
This typically indicates a theme conflict. Temporarily switch to a default WordPress theme like Twenty Twenty-Four and test again. If the data saves correctly with the default theme, the issue is with your active theme. Contact your theme developer for support.
If file uploads fail or the file type is rejected
Check the field's File Types setting to ensure the allowed extensions match what your customers need to upload. Also verify that your server's PHP upload settings (upload_max_filesize and post_max_size) are large enough for the files your customers will send.
Best Practices
Using custom fields effectively requires some planning to avoid confusing customers or creating extra work for your fulfillment team.
- Keep field labels short and descriptive. Use language your customers understand, like "Engraving Text" instead of "Customization String."
- Mark fields as required only when absolutely necessary. If a field is optional, the customer should not be forced to fill it out.
- Use character limits on text fields. If your product has physical constraints (e.g., a coin can only fit 12 characters), enforce that limit in the plugin to prevent bad orders.
- Test every custom field with a real order. Walk through the complete purchase flow on a staging site to verify the data appears in the admin order screen the same way your fulfillment team will see it.
Conclusion: Build Custom Product Pages That Collect the Right Details
Adding custom fields to your WooCommerce product pages transforms a standard product page into a configurable ordering tool. The Product Addons and Custom Fields Manager gives you a visual interface to create text boxes, file uploads, dropdowns, and more, all without writing a single line of code.
Once your fields are configured correctly, every order includes the exact specifications your customer chose. That reduces errors, saves time, and makes your shopping experience feel tailored and professional. If your store sells customizable products, this plugin is the most straightforward way to collect the details you need to fulfill each order correctly. For more customization options, check out the Custom Product Fields for WooCommerce or the Custom Fields Manager for additional flexibility. Start with the Product Addons and Custom Fields Manager today to give your customers the options they need.
Frequently Asked Questions
Can I add custom fields to all my products at once?+–
Will custom fields affect my site speed?+
Can customers upload files through custom fields?+
Do I need a separate plugin for checkout fields?+
What happens to custom field data when an order is deleted?+
Can I price each custom field option differently?+
We test tools on real stores and publish hands-on, fact-checked guides for store owners.
Ready to get started?
Put what you just read into action.
Explore Product Addons and Custom Fields Manager →