How to add custom fields and metadata to WooCommerce product pages

When building a professional WooCommerce store, the default product page fields often do not meet all business requirements. For example, you might need to add fields such as “Model” or “Warranty Period” for electronic products, or “Material Composition” or “Washing Instructions” for clothing. In such cases, it is essential to add custom fields and metadata to the products. This not only enriches the product information and enhances the user experience but also provides a data foundation for subsequent searches, filtering, and the development of advanced features.

This article will provide a detailed explanation of several core methods for implementing custom product fields in WooCommerce, ranging from the most basic code additions to the use of advanced plugins, and will include complete, functional code examples.

Using the built-in action hooks in WooCommerce to add fields

WooCommerce provides a wealth of action hooks, which allow developers to insert content in specific locations within the product data panel. This is the most straightforward method and the least invasive approach to modifying the native functionality of the system.

Recommended Reading In-Depth Analysis of WordPress Custom Fields: From Beginner to Advanced Application Practices。

The most commonly used hook is… woocommerce_product_options_general_product_dataIt is used to add fields to the “Regular Product Data” section.

UltaHost WordPress Hosting

30-day refund guarantee, unlimited bandwidth and database usage, free DDoS protection; purchase for 3 years and get a discount of 50%.

access page

Add fields to the regular product data panel.

The following code demonstrates how to add a text input box and a dropdown selection box to the general data panels for both “Simple Products” and “Variable Products”.

add_action( 'woocommerce_product_options_general_product_data', 'add_custom_general_fields' );
function add_custom_general_fields() {
    global $post;

echo '<div class="options_group">';

// 文本字段示例：产品型号
    woocommerce_wp_text_input(
        array(
            'id'          =&gt; '_product_model',
            'label'       =&gt; __( '产品型号', 'woocommerce' ),
            'placeholder' =&gt; '例如：X-2024Pro',
            'desc_tip'    =&gt; 'true',
            'description' =&gt; __( '请输入此产品的具体型号。', 'woocommerce' ),
        )
    );

// 下拉选择框示例：保修期
    woocommerce_wp_select(
        array(
            'id'          =&gt; '_warranty_period',
            'label'       =&gt; __( '保修期', 'woocommerce' ),
            'options'     =&gt; array(
                ''        =&gt; __( '请选择...', 'woocommerce' ),
                '1year'   =&gt; __( '一年', 'woocommerce' ),
                '2years'  =&gt; __( '两年', 'woocommerce' ),
                'lifetime'=&gt; __( '终身保修', 'woocommerce' ),
            ),
            'desc_tip'    =&gt; 'true',
            'description' =&gt; __( '请选择该产品提供的保修时长。', 'woocommerce' ),
        )
    );

echo '</div>';
}

Save the values of the custom fields.

It's not enough to just display the fields in the background; the values entered by the users must also be saved in the product’s metadata. This requires the use of… woocommerce_process_product_meta This save hook.

add_action( 'woocommerce_process_product_meta', 'save_custom_general_fields' );
function save_custom_general_fields( $post_id ) {
    // 保存产品型号字段
    $product_model = isset( $_POST['_product_model'] ) ? sanitize_text_field( $_POST['_product_model'] ) : '';
    update_post_meta( $post_id, '_product_model', $product_model );

// 保存保修期字段
    $warranty_period = isset( $_POST['_warranty_period'] ) ? sanitize_text_field( $_POST['_warranty_period'] ) : '';
    update_post_meta( $post_id, '_warranty_period', $warranty_period );
}

Display custom fields on the front-end product page.

The ultimate goal is to display the values of the saved fields on the front-end product page. We can achieve this by… woocommerce_product_additional_information Or woocommerce_single_product_summary Wait for the hook to be executed, and then output the data after the product description or within the tag page.

Display on the “Additional Information” tab page.

The following code adds custom fields to the default “Additional Information” tab in WooCommerce.

Recommended Reading In-Depth Analysis of WooCommerce: A Comprehensive Guide to Building High-Performance E-commerce Websites。

add_action( 'woocommerce_product_additional_information', 'display_custom_fields_on_product_page' );
function display_custom_fields_on_product_page() {
    global $product;

$product_model = get_post_meta( $product->get_id(), '_product_model', true );
    $warranty_period = get_post_meta( $product->get_id(), '_warranty_period', true );

if ( $product_model ) {
        echo '<div class="product-model"><strong>' . esc_html__( '产品型号：', 'woocommerce' ) . '</strong>'`. esc_html($product_model).`'</div>';
    }

if ( $warranty_period ) {
        // 将存储的值转换为可读的标签
        $warranty_options = array(
            '1year'    =&gt; __( '一年', 'woocommerce' ),
            '2years'   =&gt; __( '两年', 'woocommerce' ),
            'lifetime' =&gt; __( '终身保修', 'woocommerce' ),
        );
        $warranty_label = isset( $warranty_options[ $warranty_period ] ) ? $warranty_options[ $warranty_period ] : $warranty_period;
        echo '<div class="warranty-period"><strong>' . esc_html__( '保修期：', 'woocommerce' ) . '</strong>'`. esc_html($warranty_label)`.'</div>';
    }
}

Use the Advanced Custom Fields plugin for visual configuration.

For users who are not familiar with coding or who need to handle complex field types (such as images, relationship selections, repeaters, etc.), using plugins is a more efficient option.Advanced Custom Fields This is the industry standard in this field.

Create a field group and associate it with the product.

After installing and activating the ACF plugin, you can easily create field groups in the WordPress administration panel. For example, you can create a field group called “Product Specifications” that includes a “Model” (text field) and a “Warranty Period” (select field). Then, in the “Location Rules” section, you can set it to be displayed when the article type is “Product”.

ACF will automatically handle the rendering of fields in the background, the saving of data, and the retrieval of values on the front end, without the need to write any code for the management interface.

hosting.com Shared Hosting

High performance with AMD EPYC CPUs, NVMe SSD storage and LiteSpeed, 24/7, 24x7 expert in-house support, advanced security measures including SSL, brute force, malware and DDoS protection, savings of up to 73%

access page

Calling ACF fields in the front-end template

When displaying on the front end, use what ACF provides. get_field() A function is used to retrieve a value.

add_action( 'woocommerce_single_product_summary', 'display_acf_fields_on_product_page', 25 );
function display_acf_fields_on_product_page() {
    $product_model = get_field( 'product_model' );
    $warranty_period = get_field( 'warranty_period' );

if ( $product_model ) {
        echo '<p class="acf-product-model"><strong>Product Model:</strong>'`. esc_html($product_model).`'</p>';
    }

if ( $warranty_period ) {
        echo '<p class="acf-warranty-period"><strong>Warranty Period:</strong>'`. esc_html($warranty_period).`'</p>';
    }
}

Add variant-level custom fields for variable products.

For variable products, it is sometimes necessary to set separate custom fields for each variant (such as different sizes, colors, etc.). This requires the use of hooks related to the specific variants. woocommerce_product_after_variable_attributes。

Add fields to the Variant Panel.

add_action( 'woocommerce_product_after_variable_attributes', 'add_custom_field_to_variations', 10, 3 );
function add_custom_field_to_variations( $loop, $variation_data, $variation ) {
    // 变体专属字段：例如，每个颜色变体的 Pantone 色号
    woocommerce_wp_text_input(
        array(
            'id'          => '_pantone_code[' . $variation->ID . ']',
            'label'       => __( 'Pantone 色号', 'woocommerce' ),
            'value'       => get_post_meta( $variation->ID, '_pantone_code', true ),
            'placeholder' => '例如：PMS 185 C',
            'wrapper_class' => 'form-row form-row-first',
        )
    );
}

Save the values of the variant fields.

Saving variant fields requires the use of specialized hooks. woocommerce_save_product_variation。

Recommended Reading A complete guide to creating a professional website: Develop your WordPress theme from scratch。

add_action( 'woocommerce_save_product_variation', 'save_custom_variation_field', 10, 2 );
function save_custom_variation_field( $variation_id, $loop ) {
    $pantone_code = isset( $_POST['_pantone_code'][ $variation_id ] ) ? sanitize_text_field( $_POST['_pantone_code'][ $variation_id ] ) : '';
    update_post_meta( $variation_id, '_pantone_code', $pantone_code );
}

summarize

Adding custom fields to WooCommerce products is the foundation for deeply customizing a store’s functionality. Using the native action hooks, developers can precisely control the location, type, and data processing logic of these fields, enabling seamless and lightweight integration. For projects that require rapid deployment or involve complex field types, leveraging additional tools or frameworks can further enhance the customization process. Advanced Custom Fields These types of plugins can greatly improve development efficiency. Whether you are working on simple products or products with dynamic features, mastering these methods will enable you to flexibly expand the product data structure, thereby meeting the diverse needs of e-commerce businesses and enhancing the professionalism of your website as well as the user experience.

FAQ Frequently Asked Questions

Will the data in custom fields be exported/imported along with the product?

Yes, but additional processing is required. When using WooCommerce’s native CSV import/export tools, custom fields added through code are not included in the exported data by default. You need to manually add the corresponding column headers to the CSV file. _product_model), or use the “Export all metadata” option during the export process. The export/import of ACF fields is usually better supported by the ACF plugin itself or related import/export plugins (such as WP All Import).

InterServer Shared Hosting

Shared hosting $2.50 USD per month , first month $0.1 USD promo code tryinterserver, 461 cloud apps scripts, one click install.

access page

Is it possible to create product filters based on custom fields?

Sure, but this goes beyond the simple task of adding fields. You will need to index the values of these custom fields into WooCommerce’s product taxonomy, or use third-party filtering plugins (such as WooCommerce Product Filters) to identify these custom metadata. An even more advanced approach is to write custom queries to retrieve and manipulate the data accordingly. pre_get_posts Or woocommerce_product_query Modify the main loop within the hook to filter products based on specific metadata.

What is the fundamental difference between the fields added by the code and the fields added by the ACF plugin?

The fundamental difference lies in the way data is managed and stored. When you add data manually through code, you have direct control over the HTML output of the fields, as well as the logic for validation and saving. You can also make use of WordPress’s built-in functionality to handle these processes. update_post_meta and get_post_meta The function is used for data access. The ACF plugin builds upon this functionality by providing a complete management layer with a user-friendly interface for defining field groups and rules, and it stores data in a more structured manner (possibly within the same array). get_field() These functions return formatted values. ACF simplifies the process, but the code approach is more lightweight and directly controllable.

After adding a new field, how can it be displayed on the product archive page (the shop page)?

To display custom fields on the product archive page (such as the store homepage or category page), it is usually necessary to modify the template for the product loop items. The safest approach is to copy the WooCommerce template files. templates/content-product.php Go to the corresponding path of your sub-topic to make the necessary changes, and then call the relevant function in an appropriate location (for example, after the price information). get_post_meta() You can also use it to output the field values. woocommerce_after_shop_loop_item_title These hooks are used to insert content, but it should be noted that the layout may vary depending on the theme.