How to Add Custom Fields to WooCommerce Products (Step-by-Step Guide)

Why Add Custom Fields to WooCommerce?

Adding custom fields to your WooCommerce products lets you collect specific information from customers, whether that is a personal engraving message, a preferred delivery date, or a file upload for a custom design. By the end of this guide, you will be able to add, configure, and display custom fields on your product pages without writing any code.

To add custom fields to WooCommerce products, use the Product Addons and Custom Fields Manager plugin for a code-free setup. Alternatively, for a free solution, add PHP snippets to your theme's functions.php file using WooCommerce hooks like woocommerce_product_options_general_product_data for the admin side and woocommerce_before_add_to_cart_button for the front-end display. Both methods let you collect extra data like text inputs, file uploads, or select options directly on the product page.

Custom fields transform your product pages from static listings into interactive sales tools. Instead of selling a simple T-shirt, you can ask for a monogrammed name, a preferred colour, or a specific size not covered by standard variations. A furniture store might let customers upload a blueprint for a custom desk. A print shop can collect a file upload for personalised photo books. The key outcome is that each product becomes flexible enough to fit different buyer needs without cloning dozens of variations.

The business impact is measurable. Ecommerce stores that add custom options see a notable lift in average order value. Proven ways to increase AOV include offering personalised add-ons and charging for customisations that customers actively request. When a customer selects engraving for a watch or adds a gift wrap to a perfume bottle, they spend more without needing a discount. Smart custom fields let you charge exactly what the extra work is worth, converting a generic product into a premium one.

Beyond revenue, custom fields reduce manual work. A clothing brand that once exchanged emails with buyers about embroidery text can now capture that information during checkout. An electronics retailer can require a serial number field on a warranty registration product. This moves the data collection from your inbox to your database, cutting order errors and support tickets. Every extra field you add should serve a clear purpose, whether it is personalisation, pricing tiers, or mandatory compliance data such as a monogrammed name for a gift.

Method 1: Add WooCommerce Custom Fields with a Plugin (No Code)

Using a dedicated plugin is by far the most efficient route for most store owners. It gives you a visual interface for building fields, setting rules, and controlling prices without touching a single line of code. The Product Addons and Custom Fields Manager is built specifically for WooCommerce and handles everything from simple text inputs to complex pricing groups.

Here is how to add custom fields in a few minutes.

Step 1: Install and Activate the Plugin

Why it matters: You need the plugin installed before WooCommerce can display any custom fields on your product pages.

Go to Plugins → Add New in your WordPress dashboard. Search for the plugin name or upload the ZIP file you downloaded from WooCommerce.com. Click Install Now and then Activate.

You should now see a new menu item labelled Product Add-ons in your WordPress admin sidebar.

Step 2: Create a New Field Group

Why it matters: Field groups let you organise related custom fields (for example, all engraving options under one group) so your product pages stay clean and logical.

Navigate to Product Add-ons → Add New. Give your group a descriptive title, like "Personalisation Options" or "Delivery Preferences".

Your new group is now ready for field types.

Step 3: Add Fields and Configure Settings

Why it matters: Each field type collects different information from customers. Choosing the right type prevents confusion and ensures you capture exactly what you need.

Click Add Field and select a type. Common choices include:

• Text for short customer input like a monogram
• Textarea for longer messages like a gift note
• Select or Checkboxes for predefined options like colour or size
• File Upload for customer images or designs

For each field, set the label, a default value if needed, and whether it is required. If you want to charge extra for a specific option, enable the Price setting and enter an amount. This is a proven method to increase average order value: offering optional add-ons like gift wrapping or priority processing encourages customers to spend more per transaction.

You should now see the field listed inside your group with all its settings visible.

Step 4: Assign the Field Group to Products

Why it matters: You rarely want every custom field on every product. Assigning groups selectively keeps product pages tidy and relevant.

In the Product Add-ons editor, locate the Display Rules section. Choose whether to apply the group to all products, specific categories, or individual products. Use the search box to find the products or categories you need.

Your custom fields will now appear only on the products you selected.

Step 5: Preview the Front-End Experience

Why it matters: Checking the customer view ensures the fields look right and work correctly before you go live.

Visit a product page where you applied the field group. You should see the custom fields displayed below the product description and above the Add to Cart button. Fill in a few fields and add the product to your cart. The custom data and any extra price should carry through to the cart and checkout pages.

You should now have a fully functional custom field setup with no code required.

Method 2: Add Custom Fields to WooCommerce Products with Code (Free)

If you have some familiarity with WordPress theme files, using code gives you complete control over your WooCommerce custom fields. This method does not rely on any plugin, so it is free and highly customisable. It works well for developers building bespoke stores or for technical store owners who want to avoid plugin overhead.

Before you start, create a full backup of your site and work on a staging environment if possible. A small mistake in your functions.php file can break your store.

Step 1: Add Custom Fields to the Product Admin Page

This snippet adds a text field, a dropdown, and a checkbox to the standard WooCommerce product data metabox. It uses the woocommerce_product_options_general_product_data action hook.

How it works: The code first uses woocommerce_wp_text_input() to generate a text field. You can change the id and label attributes to match your own product data. Next, woocommerce_wp_select() creates a dropdown with your chosen options. Finally, woocommerce_wp_checkbox() adds a simple yes/no toggle.

// Add custom fields to WooCommerce product general tab
add_action( 'woocommerce_product_options_general_product_data', 'add_custom_product_fields' );
function add_custom_product_fields() {
    global $post;
    echo '<div class="options_group">';
    
    // Text field
    woocommerce_wp_text_input( array(
        'id'          => '_custom_text_field',
        'label'       => 'Custom Text Field',
        'placeholder' => 'Enter value',
        'desc_tip'    => true,
        'description' => 'This field stores custom product data.'
    ) );
    
    // Dropdown
    woocommerce_wp_select( array(
        'id'      => '_custom_dropdown',
        'label'   => 'Custom Dropdown',
        'options' => array(
            ''       => 'Select an option...',
            'option1' => 'Option 1',
            'option2' => 'Option 2',
            'option3' => 'Option 3'
        )
    ) );
    
    // Checkbox
    woocommerce_wp_checkbox( array(
        'id'            => '_custom_checkbox',
        'label'         => 'Custom Checkbox',
        'description'   => 'Enable this feature for this product'
    ) );
    
    echo '</div>';
}

Step 2: Save the Custom Field Values

When you update a product, WooCommerce triggers the woocommerce_process_product_meta hook. Use it to save your custom field data safely.

// Save custom field values
add_action( 'woocommerce_process_product_meta', 'save_custom_product_fields' );
function save_custom_product_fields( $post_id ) {
    $text_field = isset( $_POST['_custom_text_field'] ) ? sanitize_text_field( $_POST['_custom_text_field'] ) : '';
    update_post_meta( $post_id, '_custom_text_field', $text_field );
    
    $dropdown = isset( $_POST['_custom_dropdown'] ) ? sanitize_text_field( $_POST['_custom_dropdown'] ) : '';
    update_post_meta( $post_id, '_custom_dropdown', $dropdown );
    
    $checkbox = isset( $_POST['_custom_checkbox'] ) ? 'yes' : 'no';
    update_post_meta( $post_id, '_custom_checkbox', $checkbox );
}

Step 3: Display Custom Fields on the Front End

To show the custom fields on the single product page, use the woocommerce_single_product_summary hook. This example displays the values inside a simple unordered list.

// Display custom fields on the front end
add_action( 'woocommerce_single_product_summary', 'display_custom_product_fields', 25 );
function display_custom_product_fields() {
    global $post;
    $text_value   = get_post_meta( $post->ID, '_custom_text_field', true );
    $dropdown_value = get_post_meta( $post->ID, '_custom_dropdown', true );
    $checkbox_value = get_post_meta( $post->ID, '_custom_checkbox', true );
    
    if ( $text_value || $dropdown_value || $checkbox_value === 'yes' ) {
        echo '<ul class="custom-fields-list">';
        if ( $text_value ) {
            echo '<li><strong>Custom Text:</strong> ' . esc_html( $text_value ) . '</li>';
        }
        if ( $dropdown_value ) {
            echo '<li><strong>Custom Dropdown:</strong> ' . esc_html( $dropdown_value ) . '</li>';
        }
        if ( $checkbox_value === 'yes' ) {
            echo '<li><strong>Custom Checkbox:</strong> Enabled</li>';
        }
        echo '</ul>';
    }
}

Who should use this method: This is best for store owners running a custom theme or those comfortable editing PHP files. If you manage multiple products or need to add many field types, a plugin like Product Addons and Custom Fields Manager saves significant development time and includes built-in validation and display controls. For a one-off field on a handful of products, the code approach works perfectly.

How to Save and Display Custom Field Data on the Product Page

Adding the field is only half the work. You also need to save the customer's input to the database and display it where it matters: on the product page, in the cart, during checkout, and within order details. Without this step, any data a customer enters will disappear when they leave the page.

The two actions you care about are saving the value and echoing it back. Both require hooking into WooCommerce's built-in events.

Saving the data correctly is what turns a cosmetic field into usable order information.

Saving the Value with woocommerce_process_product_meta

When you save a product in the admin area, WooCommerce fires the woocommerce_process_product_meta action. You attach your own function to this hook. Inside the function, you check whether your custom field exists in the $_POST data, sanitise the input, and then call update_post_meta to store it against the product ID. This makes the value persist in the database and appear in the product's meta box.

• Why it matters: Without saving, the field is a dummy element. Persisting the value via update_post_meta keeps it attached to the product record.
• Action: Add your callback to woocommerce_process_product_meta in your theme's functions.php file or a custom plugin.
• Result: You should now see the custom field value stored under the product's meta keys in the database, accessible wherever product meta is read.

Displaying the Field on the Front-End Product Page

To show the custom field input on the storefront (so customers can fill it in), hook into woocommerce_before_add_to_cart_button. This places the field right before the "Add to Cart" button, which is the most intuitive spot for optional data like engraving text or gift messages.

• Why it matters: Placement influences conversion rates. Fields that appear after the "Add to Cart" button often get ignored.
• Action: Output your HTML input (text, select, or checkbox) inside the callback. Ensure each field has a unique name attribute so WooCommerce can pass it through the cart lifecycle.
• Result: Customers now see and can fill in the custom field directly on the product page.

Carrying the Data Through the Cart and Order

If you want the custom field to follow the item into the cart, checkout, and order details, you need additional hooks. woocommerce_add_cart_item_data captures the posted field value and stores it in the cart object. Then woocommerce_get_item_data displays it on the cart and checkout pages. Finally, woocommerce_add_order_item_meta saves it against the order item so it appears on admin and customer order screens.

• Why it matters: Skipping these hooks means the data vanishes after the "Add to Cart" click.
• Action: Implement each hook in sequence, passing the $cart_item_data argument forward.
• Result: The custom field value persists from the product page all the way through to the completed order email.

For store owners who prefer a code-free approach, the Product Addons and Custom Fields Manager plugin handles all these hooks automatically. You configure the field type and position in the admin interface, and the plugin manages the data flow without touching a single line of code.

Where Do Custom Field Values Show Up? (Cart, Checkout, Orders)

After you add a custom field to a product, you need to know exactly where the data collected from your customers will appear. The visibility of this information matters for both your admin workflow and the customer’s experience. A poorly placed field can confuse shoppers at the cart stage or leave your order admin missing critical details.

When you use a dedicated plugin like Product Addons and Custom Fields Managerthe data typically follows a clear path through four locations.

1. Cart item meta. As soon as the customer adds the product to the cart, the custom field value appears alongside the product details. For example, if you create a text field for “Engraved Message,” the shopper will see their entered text below the product name in the cart dropdown or cart page.
2. Checkout review. On the checkout page, the custom field data is visible in the order summary section before the customer completes the purchase. This confirmation lets them double-check their customisation before paying.
3. Order admin. Inside your WooCommerce admin panel, navigate to WooCommerce → Orders and open a specific order. The custom field value appears in the order item details table, often displayed as a line item meta row alongside the product name and quantity.
4. Email notifications. Both the new order email sent to the admin and the order confirmation email sent to the customer include the custom field data. This is critical for customisation requests like personalised engraving, monogramming, or gift-wrapping instructions.

Most quality plugins allow you to toggle the visibility of each field independently. You can choose whether a field shows in the cart, the checkout review, and the emails, giving you granular control. For fields that only your team needs to see, such as internal production notes, you can keep them hidden from the customer entirely while still storing the data on the order record.

Always verify where your fields appear by placing a test order. Check the admin order page and the customer confirmation email to confirm the data is present and formatted correctly.

If you want even more control over display locations, look into the Custom Product Fields for WooCommerce extension, which offers advanced visibility rules for different field types.

Common Mistakes When Adding Custom Fields (and How to Fix Them)

Even with a straightforward setup, things can go wrong. Here are the most frequent problems store owners run into when adding WooCommerce custom fields and how to resolve each one.

• Custom field data is not saving. This usually happens when the field name contains spaces or special characters, or when there is a conflict with another plugin that uses the same field key. Stick to lowercase letters, underscores, and numbers for field names. Deactivate other plugins one by one to isolate the conflict.
• The field appears on the product page but does not show in the cart or checkout. Custom fields only display in the cart if the plugin or code explicitly passes the data through the cart object. If you are using a manual snippet, you may be missing the woocommerce_add_cart_item_data hook. With the Product Addons and Custom Fields Manager extension, this behaviour is handled automatically.
• The product page loads slowly after adding custom fields. Too many custom fields, or fields that query the database on every page load, can slow things down. Limit custom fields to only what you need. If you are using code, cache the field data where possible. Plugin-based solutions generally perform better because they are built to handle field rendering efficiently.
• Field data disappears after updating the product. This often occurs when a theme or plugin runs save_post or woocommerce_process_product_meta and removes unknown meta keys. Check your functions.php file for any custom save actions. A dedicated plugin preserves your field data because it manages the save process deliberately.

If you run into a problem that is not listed here, start by switching to a default WordPress theme like Storefront and deactivating all plugins except WooCommerce. If the custom field works in that environment, reactivate your theme and plugins one by one until the issue reappears. This isolation method identifies the culprit in minutes.

Troubleshooting WooCommerce Custom Fields

When custom fields do not behave as expected, a few common issues tend to cause the problem. Here is how to diagnose and fix them quickly.

• If the custom field does not appear on the product page. The likely cause is that the field group is not assigned to that specific product or category. Check the display conditions in your plugin settings and confirm the product is selected. If using a code-based approach, verify that the hook woocommerce_before_add_to_cart_button is running on that particular product page.
• If the custom field shows but the price adjustment is not applied in the cart. The likely cause is that the pricing configuration in the field settings was not saved correctly. Reopen the field editor and confirm that the "Adjust Price" toggle is enabled and the amount is entered. Place a test order to verify the additional cost carries through.
• If the custom field data appears in the admin but not in customer emails. The likely cause is that the email template does not include the custom field metadata. With the plugin, check the visibility settings for each field and enable the "Email Display" option. For code-based fields, you need to add a custom template override for the email templates.
• If a file upload field does not work and customers see an error. The likely cause is that the server file size limit is too low or the upload directory permissions are incorrect. Check your server's PHP upload settings (upload_max_filesize and post_max_size) and verify that the /wp-content/uploads directory is writable. Reset the field and ask a customer to try again.

Best Practices for WooCommerce Custom Fields

To get the most out of your custom fields without introducing friction, follow these guidelines. Keep the customer's experience in mind at every step.

• Limit the number of custom fields on a single product. Too many fields overwhelm buyers and can decrease conversion rates. Aim for no more than three to five optional fields per product, and make required fields only for essential data.
• Use clear labels and placeholder text. Customers should know exactly what to enter. Instead of "Extra Info" use "Gift Message (up to 100 characters)". This reduces errors and support questions.
• Test every field after adding it. Place a test order for each product that has custom fields. Check the cart display, the checkout summary, the admin order page, and the customer confirmation email.
• Monitor field performance over time. If a field rarely gets filled, consider removing it or making it optional. If a field causes frequent support tickets, reword the label or add validation rules.

Conclusion

Adding custom fields to your WooCommerce products transforms your store from a static catalogue into an interactive sales platform. You now know two methods to achieve this: using the code-free Product Addons and Custom Fields Manager for speed and ease, or writing custom PHP snippets for complete control. Both approaches let you collect personalised data, charge for upgrades, and reduce manual order processing.

The real value comes from applying fields that serve a clear business purpose. Whether you are selling customised gifts, configurable furniture, or personalised prints, your custom fields should make it easier for customers to buy exactly what they want and for you to fulfil those orders accurately. A well placed custom field does the work of a sales assistant without the salary.

To get started today, install the Product Addons and Custom Fields Manager and build your first field group. Within 30 minutes you will have a product page that captures the exact details your customers need to provide.

Frequently Asked Questions About WooCommerce Custom Fields