How to Add Custom Fields to WooCommerce Products

If you’re running a WooCommerce store, chances are you’ve come across a situation where the default product fields just don’t cut it. Maybe you need to collect personalization info, upload files, or capture custom measurements. That’s where custom fields come in—they let you tailor the product experience to meet your unique needs.

Here’s how to add custom fields to WooCommerce products the right way.

What Are Custom Fields in WooCommerce?

Custom fields (also known as product meta fields) are extra pieces of information that can be added to your product pages. These fields can be used to:

• Display additional product details
• Collect extra input from customers (like engraving text or custom colors)
• Create conditional logic for pricing or availability
• Improve your backend product management

Method 1: Use a Plugin (Beginner-Friendly)

If you’re not a developer, using a plugin is the easiest way to add and manage custom fields.

• Advanced Custom Fields (ACF) – Powerful and flexible; works best with a bit of theme customization
• Product Add-Ons by WooCommerce – Great for adding customer input fields like text boxes, checkboxes, and file uploads
• YITH WooCommerce Product Add-Ons & Extra Options – Drag-and-drop interface with advanced features

Steps using a plugin like “Product Add-Ons by WooCommerce”:

1. Install and activate the plugin
2. Go to Products > All Products, and choose a product
3. Scroll down to the Product Data section
4. Click the Add-ons tab and start adding fields like text inputs, checkboxes, or dropdowns
5. Save the product and preview it

Method 2: Add Fields with Code (For Developers)

Want full control? You can add custom fields manually using code.

Step 1: Add the Field to the Product Page

Add this snippet to your theme’s functions.php file:

add_action( 'woocommerce_before_add_to_cart_button', 'add_custom_field_to_product' );
function add_custom_field_to_product() {
    echo '<div class="custom-field-wrapper">';
    echo '<label for="custom_field">Your Custom Text:</label>';
    echo '<input type="text" name="custom_field" />';
    echo '</div>';
}

Step 2: Validate and Save the Field

Capture the input when the product is added to the cart:

add_filter( 'woocommerce_add_cart_item_data', 'save_custom_field_data', 10, 2 );
function save_custom_field_data( $cart_item_data, $product_id ) {
    if( isset( $_POST['custom_field'] ) ) {
        $cart_item_data['custom_field'] = sanitize_text_field( $_POST['custom_field'] );
    }
    return $cart_item_data;
}

Step 3: Display It in the Cart and Order Details

 
add_filter( 'woocommerce_get_item_data', 'display_custom_field_cart', 10, 2 );
function display_custom_field_cart( $item_data, $cart_item ) {
    if( isset( $cart_item['custom_field'] ) ) {
        $item_data[] = array(
            'name' => 'Custom Field',
            'value' => sanitize_text_field( $cart_item['custom_field'] )
        );
    }
    return $item_data;
}
 

Pro Tips for Using Custom Fields

• Keep UX in mind—don’t overwhelm customers with too many input options
• Use conditional fields to keep forms dynamic and relevant
• Always sanitize and validate user input for security
• Test across devices to ensure mobile usability

Final Thoughts

Adding custom fields to WooCommerce products lets you personalize and elevate the shopping experience. Whether you go the plugin route for convenience or dive into code for total control, the ability to extend product functionality can set your store apart from the competition.

Got a use case you’re unsure how to handle? Drop it in the comments—we’ll crack it together.