How to Add and Display WooCommerce Custom Fields: 2024 Updated Guide

WooCommerce is a powerful platform, but its default features might not cover all your needs. WooCommerce custom fields let you add personalized product details, collect extra customer info, and enhance functionality. In this guide, we will walk you through:

• The basics of WooCommerce custom fields;
• How to manually add custom fields in WooCommerce;
• How to add custom fields via a plugin;
• And how to display WooCommerce custom fields.

Let’s get in!

---

What Are Custom Product Fields in WooCommerce?

Definition of custom fields

Custom product fields in WooCommerce refer to additional data points you can create and manage to provide more detailed product information or collect extra customer data. These fields are not part of WooCommerce's default setup, but they can be added easily using plugins or custom code. Custom fields allow you to extend your product information beyond the basic options like name, price, and description.

For example, if you sell customizable products, such as T-shirts with personalized prints, you might add a text input field where customers can specify their desired text. Alternatively, custom fields can be used to provide detailed product specifications or to collect information like gift messages at checkout.

Here are some common WooCommerce field types you should know:

• Text Field: For short text inputs.
• Textarea: For longer text entries.
• Dropdown/Select Field: For predefined choices.
• Checkboxes and Radio Buttons: For multiple-choice options.
• File Uploads: To allow customers to upload files (e.g., images).
• Date Fields: For selecting dates relevant to the product or order.

Use cases of WooCommerce custom fields

Custom fields can be used in a variety of ways, depending on your business needs. Here are some common scenarios where custom fields might be beneficial:

Difference between custom fields and attributes

It's important to understand the difference between custom fields and attributes in WooCommerce. While they may seem similar, they serve different purposes:

1. Attributes

These are used to define variations of a product, such as size or color, and are typically used in conjunction with variable products. Attributes are essential when customers need to select from a set of predefined options.

2. Custom fields

These are more versatile and can be used to add extra, non-variant-specific information to products or to collect custom data from customers. For instance, if you need to gather special instructions or display technical details that do not affect product variations, custom fields are the way to go.

---

Method 1: How to Add Custom Fields in WooCommerce Product Programmatically

For those who want complete control over how custom fields are added to their WooCommerce products, adding fields programmatically is the way to go. This method is perfect for developers or tech-savvy users who are comfortable writing PHP code and modifying theme files. The benefit of doing this without a plugin is that it keeps your site lightweight and avoids relying on third-party tools.

Step 1: Create a function to add custom fields

First, you’ll want to add a function that defines your custom fields. You can add this code to your child theme's functions.php file or use a site-specific plugin for custom code.

Here’s a sample function to add custom fields to the product data panel in the WooCommerce backend:

function my_custom_product_fields() {

    global $woocommerce, $post;

    echo ‘<div class=”options_group”>';    

    // Text Field

    woocommerce_wp_text_input( 

        array( 

            ‘id' => ‘_custom_product_material', 

            ‘label' => __(‘Product Material', ‘woocommerce'), 

            ‘placeholder' => ‘e.g., 100% Cotton', 

            ‘desc_tip' => ‘true',

            ‘description' => __(‘Enter the material used for this product.', ‘woocommerce')

        )

    );

    // Number Field

    woocommerce_wp_text_input( 

        array( 

            ‘id' => ‘_custom_product_weight', 

            ‘label' => __(‘Product Weight (kg)', ‘woocommerce'), 

            ‘placeholder' => ‘e.g., 1.5', 

            ‘type' => ‘number', 

            ‘desc_tip' => ‘true',

            ‘description' => __(‘Enter the weight of the product in kilograms.', ‘woocommerce'),

            ‘custom_attributes' => array(

                ‘step' => ‘0.1',

                ‘min' => ‘0'

            )

        )

    );

    echo ‘</div>';

}

add_action(‘woocommerce_product_options_general_product_data', ‘my_custom_product_fields');

Explanation:

• The woocommerce_wp_text_input() function is used to add text and number input fields in the WooCommerce product data panel.
• The id attribute uniquely identifies each field, while label and description provide context to the user.
• The custom fields are wrapped inside an HTML <div> with the class options_group to group them appropriately in the WooCommerce interface.

Step 2: Save the custom field data

Once the fields are added, you need to save the input data when a product is updated. Use the following code to save custom field values:

function save_my_custom_product_fields($post_id) {

    // Save the Product Material field

    $custom_product_material = isset($_POST[‘_custom_product_material']) ? sanitize_text_field($_POST[‘_custom_product_material']) : ”;

    update_post_meta($post_id, ‘_custom_product_material', $custom_product_material);

    // Save the Product Weight field

    $custom_product_weight = isset($_POST[‘_custom_product_weight']) ? sanitize_text_field($_POST[‘_custom_product_weight']) : ”;

    update_post_meta($post_id, ‘_custom_product_weight', $custom_product_weight);

}

add_action(‘woocommerce_process_product_meta', ‘save_my_custom_product_fields');

Explanation:

• The sanitize_text_field() function is used to sanitize the input data, ensuring it is safe for storage and display.
• update_post_meta() updates the product metadata with the sanitized input values, saving them in the WordPress database.

Step 3: Display the custom fields on the product page

To display the saved custom fields on the product page, use the following code in your theme’s single-product.php file or add it to your child theme’s functions.php:

function display_my_custom_product_fields() {

    global $post;

    // Retrieve the custom field values

    $custom_product_material = get_post_meta($post->ID, ‘_custom_product_material', true);

    $custom_product_weight = get_post_meta($post->ID, ‘_custom_product_weight', true);

    // Display the values if they are not empty

    if (!empty($custom_product_material)) {

        echo ‘<p class=”custom-field”>Material: ‘ . esc_html($custom_product_material) . ‘</p>';

    }

    if (!empty($custom_product_weight)) {

        echo ‘<p class=”custom-field”>Weight: ‘ . esc_html($custom_product_weight) . ‘ kg</p>';

    }

}

add_action(‘woocommerce_single_product_summary', ‘display_my_custom_product_fields', 25);

Explanation:

• The get_post_meta() function retrieves the custom field values from the database.
• The esc_html() function is used to escape HTML output, ensuring data is displayed safely on the frontend.
• The woocommerce_single_product_summary hook places the custom field information below the product summary on the product page.

Step 4: Validate and sanitize input

It’s crucial to validate and sanitize user input to protect your site from potential security vulnerabilities, such as cross-site scripting (XSS). Always use built-in WordPress functions like sanitize_text_field() and esc_html() to sanitize data before saving or displaying it.

For example, you can copy code below:

// Sanitize and save input

$custom_product_material = isset($_POST[‘_custom_product_material']) ? sanitize_text_field($_POST[‘_custom_product_material']) : ”;

But, always remember that security is a top priority when dealing with user-generated input so you should make sure to test your code thoroughly.

Step 5: Testing your custom fields

Here are the steps involved:

• Go to your WooCommerce products and check the new custom fields under the product data panel.
• Input data in the custom fields and save the product to ensure the values are stored correctly.
• Visit the product page on the frontend to confirm that the custom field values are displayed properly.
• Verify that there are no PHP errors or warnings and that your data is sanitized and displayed securely.

So as you can see, adding custom fields without using a plugin provides greater flexibility and control over your WooCommerce store. While this method requires some coding knowledge, it ensures your site remains lightweight and optimized.

---

Method 2: How to Add Custom Fields to WooCommerce Products Using a Plugin

For those who prefer a simple and efficient way to add custom fields to their WooCommerce store, using the Advanced Custom Fields (ACF) plugin is highly recommended. ACF is a robust and user-friendly plugin that allows you to create custom fields without writing any code, making it ideal for business owners and managers who may not have technical expertise.

Step 1: Install the Advanced Custom Fields WooCommerce plugin

Follow these steps to install the plugin:

• First, navigate to Plugins > Add New in your WordPress admin dashboard.
• Search for “Advanced Custom Fields” and click “Install Now”.

• Once the installation is complete, click “Activate” to enable the plugin.

ACF will now be available in your WordPress admin menu and ready for use.

Step 2: Create a new field group

To create a new field group, follow the below steps:

• Go to Custom Fields > Add New in your WordPress dashboard.
• Click “Add New” to create a new field group. Name this group something descriptive, like “Product Custom Fields,” to keep your custom fields organized.
• Click “Add Field” to start creating your custom fields. You can add multiple fields depending on what information you want to collect or display.

Here are some common field types you might use:

• Text: For short descriptions or inputs, like “Product Material” or “Engraving Text.”
• Number: For numeric values, such as weight or dimensions.
• Select: For dropdown options, such as color choices.
• Checkbox: For options like “Gift Wrapping” or “Special Packaging.”
• Textarea: For longer inputs, like special instructions from the customer.

Step 3: Configure your field settings

First, let’s define the label (visible to you or the customer) and the field name (used for templates or data retrieval). For example, if you add a “Product Material” field, the label would be “Product Material,” and the field name could be “product_material.”

Then, under the “Location” section, you need to set rules to determine where these fields will be displayed. For product pages, choose “Post Type” is equal to “Product”. This ensures the custom fields only show on WooCommerce product pages.

For other settings, you can configure additional options as below:

• Required: Make the field mandatory if necessary.
• Default value: Set a default value if needed.
• Instructions: Provide a brief explanation for the user about what should be entered in the field.

Step 4: Display the custom fields on the product page

By default, ACF doesn’t automatically display fields on the frontend. You may need to add a small code snippet to your theme to display the custom field data.

First, open your child theme’s functions.php file or the template file where you want to display the custom fields (e.g., single-product.php).

Then, you can use the following code to display a custom field:

<?php

if (function_exists(‘get_field')) {

    $product_material = get_field(‘product_material'); // Replace ‘product_material' with your field name

    if ($product_material) {

        echo ‘<p class=”custom-field”>Material: ‘ . esc_html($product_material) . ‘</p>';

    }

}

?>

Explanation: This code checks if the get_field function from ACF is available, retrieves the value of the “Product Material” field, and displays it on the product page.

Step 5: Save and test your custom fields

Now, click “Publish” or “Update” to save your field group and settings. You should visit one of your WooCommerce product pages and verify that the custom fields are displayed correctly. If the fields don’t display as expected, double-check your code or review the ACF documentation for additional guidance.

You can also use the custom fields you’ve created to provide richer product details. For example:

• For clothing stores: Add fields for fabric type, washing instructions, or a care guide.
• For personalized gifts: Add a text input field for customers to specify custom text, such as names or special messages.
• For electronics: Use number fields to specify technical specifications like battery life or weight.

Custom fields can also help with SEO by providing more detailed and structured content on your product pages.

Tip: If you’re comfortable with more advanced features, ACF also allows for conditional logic to show or hide fields based on certain criteria, making it easier to tailor the user experience.

---

How to Display Custom Field Data in Specific Pages

Displaying custom field data in the cart and checkout pages allows you to share relevant information with customers and store administrators during the purchasing process. This can be particularly useful for custom orders, personalized products, or additional details collected during checkout.

In this section, we’ll cover how to display custom field data in the cart and checkout pages using programmatic methods.

1. Add custom fields to the product page

To customize where and how your custom fields are displayed on the product pages, you may need to modify your theme’s product templates. This method gives you precise control over the placement and styling of your custom field data.

Step 1: Locate the template file

Most WooCommerce themes store product templates in the woocommerce folder within the theme directory. The main file for single product pages is single-product.php, but for more targeted placement, you might work with content-single-product.php or specific template hooks.

Step 2: Modify the template

Open the appropriate template file in your code editor. Then you can use the following code snippet to display your custom field:

<?php

// Ensure this code is within the product loop

global $post;

$custom_field_value = get_post_meta($post->ID, ‘_custom_product_material', true);

if (!empty($custom_field_value)) {

    echo ‘<p class=”custom-field”>Material: ‘ . esc_html($custom_field_value) . ‘</p>';

}

?>

Explanation: This snippet retrieves and displays the value of the custom field _custom_product_material for the current product. The esc_html() function ensures the output is sanitized.

Step 3: Save and upload

Let’s save the modified file and upload it back to your theme’s folder via FTP or your hosting control panel if editing locally. You should also clear your site cache (if applicable) to see the changes on your product pages.

Tip: Always use a child theme when making changes to template files to prevent your edits from being overwritten during theme updates.

2. Add custom fields to the cart page

Step 1: Add custom field data to the cart item

You can use the woocommerce_add_cart_item_data hook to save custom field data into the cart item metadata.

function add_custom_field_to_cart_item($cart_item_data, $product_id, $variation_id) {

    if (isset($_POST[‘_custom_product_material'])) {

        $cart_item_data[‘custom_product_material'] = sanitize_text_field($_POST[‘_custom_product_material']);

    }

    return $cart_item_data;

}

add_filter(‘woocommerce_add_cart_item_data', ‘add_custom_field_to_cart_item', 10, 3);

Explanation: This function retrieves the value of the custom field (_custom_product_material) from the product page form and adds it to the cart item metadata.

Step 2: Display custom field data in the cart

You can use the woocommerce_get_item_data hook to display the custom field data in the cart.

function display_custom_field_in_cart($item_data, $cart_item) {

    if (isset($cart_item[‘custom_product_material'])) {

        $item_data[] = array(

            ‘key'   => __(‘Material', ‘woocommerce'),

            ‘value' => sanitize_text_field($cart_item[‘custom_product_material']),

        );

    }

    return $item_data;

}

add_filter(‘woocommerce_get_item_data', ‘display_custom_field_in_cart', 10, 2);

Explanation: This code ensures that the custom field data appears as an additional line item under the product name in the cart.

3. Add custom fields to the checkout page

Step 1: Add custom field data to the order

You can use the woocommerce_checkout_create_order_line_item hook to save the custom field data to the order.

function save_custom_field_to_order($item, $cart_item_key, $values, $order) {

    if (isset($values[‘custom_product_material'])) {

        $item->add_meta_data(__(‘Material', ‘woocommerce'), $values[‘custom_product_material']);

    }

}

add_action(‘woocommerce_checkout_create_order_line_item', ‘save_custom_field_to_order', 10, 4);

Explanation: This function saves the custom field data to the order line item metadata, ensuring it’s available for display in the checkout and backend.

Step 2: Display custom field data in the checkout

To show the custom field data on the checkout page, you can modify the cart and order review sections:

function display_custom_field_at_checkout($cart_item, $cart_item_key) {

    if (isset($cart_item[‘custom_product_material'])) {

        echo ‘<p class=”custom-field”>Material: ‘ . esc_html($cart_item[‘custom_product_material']) . ‘</p>';

    }

}

add_action(‘woocommerce_cart_item_name', ‘display_custom_field_at_checkout', 10, 2);

Explanation: This code adds the custom field value as part of the cart item details displayed on the checkout page.

4. Include custom fields in order emails

To include custom fields in order confirmation emails sent to customers and administrators, you can use the woocommerce_email_order_meta_fields hook.

function add_custom_field_to_order_email($fields, $sent_to_admin, $order) {

    $items = $order->get_items();

    foreach ($items as $item) {

        if ($item->get_meta(‘Material')) {

            $fields[‘custom_material'] = array(

                ‘label' => __(‘Material', ‘woocommerce'),

                ‘value' => $item->get_meta(‘Material'),

            );

        }

    }

    return $fields;

}

add_filter(‘woocommerce_email_order_meta_fields', ‘add_custom_field_to_order_email', 10, 3);

Explanation: This function retrieves the custom field metadata (Material) for each item in the order and adds it to the email order details.

Relevant reading: How to customize WooCommerce product pages.

---

WooCommerce Custom Fields: FAQs

---

Wrapping Up!

WooCommerce custom fields are powerful features that can help you personalize your WooCommerce store, enhance the customer experience, and streamline business operations. Whether you’re adding additional product details, collecting personalized customer inputs, or organizing product-specific data, custom fields give you the flexibility to tailor your store to meet unique requirements.

Here are the key takeaways from this article:

• Use custom fields to display detailed product specifications, offer personalization options, or gather important information at checkout.
• Depending on your technical expertise, you can use plugins for an easy setup or add custom fields programmatically for more control.
• Ensure your custom fields flow seamlessly through the product page, cart, checkout, and order process to maintain a consistent user experience.

We hope you found this article insightful and now have a clear understanding of the WooCommerce custom fields. For more content like this, be sure to visit the WooCommerce blog section and join our eCommerce community to gain further insights and connect with fellow business owners.