如何为 WooCommerce 产品页面添加自定义字段和元数据?

3 分钟阅读时间
2026-03-18
2026-06-03
2,474
通过下方链接进行购物时,您无需支付额外费用,我就能获得佣金。.

在構建專業的 WooCommerce 商店時,默認的產品頁面字段往往無法滿足所有業務需求。例如,你可能需要為電子產品添加“型號”或“保修期”,為服裝添加“面料成分”或“洗滌説明”。這時,為產品添加自定義字段和元數據就變得至關重要。這不僅能夠豐富產品信息,提升用户體驗,還能為後續的搜索、篩選和高級功能開發提供數據基礎。

本文將詳細介紹在 WooCommerce 中實現產品自定義字段的幾種核心方法,從最基礎的代碼添加到利用高級插件,並提供完整、可運行的代碼示例。

使用 WooCommerce 內置動作鈎子添加字段

WooCommerce 提供了豐富的動作鈎子(Action Hooks),允許開發者在產品數據面板的特定位置插入內容。這是最直接、對原生系統侵入性最小的方法。

推荐阅读 深入解析WordPress自定义字段:从入门到高级应用实践

最常用的鈎子是 woocommerce_product_options_general_product_data,它用於在“常規產品數據”部分添加字段。

UltaHost WordPress 主機
30天退款保證,無限帶寬與數據庫,免費的 DDoS 防護,購買3年優惠50%

在常規產品數據面板添加字段

下面的代碼展示瞭如何向“簡單產品”和“可變產品”的通用數據面板添加一個文本輸入框和一個下拉選擇框。

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'          => '_product_model',
            'label'       => __( '产品型号', 'woocommerce' ),
            'placeholder' => '例如:X-2024Pro',
            'desc_tip'    => 'true',
            'description' => __( '请输入此产品的具体型号。', 'woocommerce' ),
        )
    );

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

echo '</div>';
}

保存自定義字段的值

僅僅在後台顯示字段是不夠的,必須將用户輸入的值保存到產品的元數據中。這需要用到 woocommerce_process_product_meta 這個保存鈎子。

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 );
}

在前端產品頁面顯示自定義字段

將保存的字段值顯示在前端產品頁面是最終目的。我們可以通過 woocommerce_product_additional_information 或者 woocommerce_single_product_summary 等鈎子,將數據輸出到產品描述之後或標籤頁內。

在“額外信息”標籤頁中顯示

以下代碼將自定義字段添加到 WooCommerce 默認的“額外信息”標籤頁中。

推荐阅读 深入解析 WooCommerce:構建高性能電商網站的完整指南

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-&gt;get_id(), '_product_model', true );
    $warranty_period = get_post_meta( $product-&gt;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'    => __( '一年', 'woocommerce' ),
            '2years'   => __( '两年', 'woocommerce' ),
            'lifetime' => __( '终身保修', '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>';
    }
}

使用高級自定義字段插件進行可視化配置

對於不熟悉代碼的用户或需要複雜字段類型(如圖片、關係選擇、重複器等)的情況,使用插件是更高效的選擇。Advanced Custom Fields 是這一領域的行業標準。

創建字段組並關聯產品

安裝並激活 ACF 插件後,你可以在 WordPress 後台直觀地創建字段組。例如,創建一個名為“產品規格”的字段組,包含“型號”(文本字段)和“保修期”(選擇字段)。然後,在“位置規則”中,將其設置為“如果文章類型等於產品”時顯示。

ACF 會自動處理字段在後台的渲染、數據的保存和前端值的獲取,無需編寫任何管理界面的代碼。

hosting.com 共享主机
高性能配置,搭载 AMD EPYC CPU、NVMe SSD 存储和 LiteSpeed 技术,提供全天候 24 小时专业内部支持,具备 SSL、暴力破解、恶意软件及 DDoS 防护等高级安全措施,节省成本高达 73%。

在前端模板中調用 ACF 字段

在前端顯示時,使用 ACF 提供的 get_field() 函數來獲取值。

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>产品型号:</strong>' . esc_html( $product_model ) . '</p>';
    }

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

為可變產品添加變體級自定義字段

對於可變產品,有時需要為每個變體(如不同尺寸、顏色)設置獨立的自定義字段。這需要用到變體相關的鈎子 woocommerce_product_after_variable_attributes

向變體面板添加字段

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',
        )
    );
}

保存變體字段值

變體字段的保存需要使用專門的鈎子 woocommerce_save_product_variation

推荐阅读 打造專業網站的完整指南:從零開始開發你的WordPress主題

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 );
}

总结

為 WooCommerce 產品添加自定義字段是深度定製商店功能的基礎。通過原生的動作鈎子,開發者可以精準控制字段的位置、類型和數據處理邏輯,實現輕量級的集成。而對於需要快速部署或涉及複雜字段類型的項目,藉助 Advanced Custom Fields 這類插件可以極大提升開發效率。無論是簡單產品還是可變產品,掌握這些方法都能讓你靈活地擴展產品數據結構,從而滿足多樣化的電商業務需求,提升網站的專業性和用户體驗。

常见问题解答(FAQ)

自定義字段的數據會隨產品導出/導入嗎?

是的,但需要額外處理。使用 WooCommerce 原生的 CSV 導入/導出工具時,通過代碼添加的自定義字段默認不會被包含在導出列中。你需要手動在 CSV 文件中添加對應的列標題(如 _product_model),或者在導出時使用“導出所有元數據”的選項。ACF 字段的導出/導入則通常由 ACF 插件自身或相關的導入導出插件(如 WP All Import)提供更好支持。

InterServer 共享主机
虚拟主机每月价格为 1TB + 5TB,费用为 2.50 美元,首月优惠价为 1TB + 5TB,价格为 0.1 美元。优惠码为 "tryinterserver",支持一键安装 461 款云应用脚本。

能否基於自定義字段創建產品篩選器?

可以,但這超出了簡單添加字段的範疇。你需要將自定義字段的值索引到 WooCommerce 的 product taxonomy 中,或者使用第三方篩選插件(如 WooCommerce Product Filters)來識別這些自定義元數據。更高級的做法是編寫自定義查詢,在 pre_get_posts 或者 woocommerce_product_query 鈎子中修改主循環,來過濾特定元數據的產品。

代碼添加的字段和 ACF 插件添加的字段有何根本區別?

根本區別在於數據的管理和存儲方式。通過代碼手動添加,你直接控制字段的 HTML 輸出、驗證、保存邏輯,並利用 WordPress 的 update_post_meta 以及 get_post_meta 函數進行數據存取。而 ACF 插件在其之上構建了一個完整的管理層,提供了一個用户友好的界面來定義字段組和規則,並將數據以更結構化的方式存儲(可能在同一數組內),通過 get_field() 等函數返回格式化後的值。ACF 簡化了流程,但代碼方式更輕量、更直接可控。

添加字段後,如何在產品歸檔頁面(商店頁面)顯示?

在產品歸檔頁面(如商店主頁、分類頁面)顯示自定義字段,通常需要修改產品循環項的模板。最安全的方法是複製 WooCommerce 模板文件 templates/content-product.php 到你的子主題相應路徑進行覆蓋,然後在其中適當位置(如價格後面)調用 get_post_meta() 來輸出字段值。也可以使用 woocommerce_after_shop_loop_item_title 這類鈎子來插入內容,但需注意佈局可能因主題而異。