如何为WooCommerce后台自定义产品数据选项卡添加内容？

你需要使用woocommerce_product_data_panels这个动作钩子来渲染自定义选项卡的内容——这个钩子专门用于输出所有产品数据面板的内容，包括你创建的自定义选项卡。

具体实现代码 #

1. 渲染自定义选项卡内容

把你的自定义字段放在与选项卡target值（leadlovers_product_data）对应的div中，确保WooCommerce能正确关联选项卡和内容：

function render_leadlovers_product_panel() {
    ?>
    <div id="leadlovers_product_data" class="panel woocommerce_options_panel hidden">
        <div class="options_group">
            <!-- 复选框示例 -->
            <?php
            woocommerce_wp_checkbox( array(
                'id'            => '_leadlovers_enable',
                'label'         => __( '启用LeadLovers集成', 'text-domain' ),
                'description'   => __( '勾选后开启产品的LeadLovers功能', 'text-domain' )
            ) );

            <!-- 文本框示例 -->
            woocommerce_wp_text_input( array(
                'id'            => '_leadlovers_list_id',
                'label'         => __( 'LeadLovers列表ID', 'text-domain' ),
                'placeholder'   => '输入列表ID',
                'description'   => __( '填写对应的LeadLovers列表ID', 'text-domain' )
            ) );
        </div>
    </div>
    <?php
}
add_action( 'woocommerce_product_data_panels', 'render_leadlovers_product_panel' );

2. 保存自定义字段数据（必加步骤）

如果需要将字段值保存到数据库，添加以下代码处理保存逻辑：

function save_leadlovers_product_fields( $post_id ) {
    // 保存复选框状态
    $enable_status = isset( $_POST['_leadlovers_enable'] ) ? 'yes' : 'no';
    update_post_meta( $post_id, '_leadlovers_enable', $enable_status );

    // 保存文本框内容
    if ( isset( $_POST['_leadlovers_list_id'] ) ) {
        update_post_meta( $post_id, '_leadlovers_list_id', sanitize_text_field( $_POST['_leadlovers_list_id'] ) );
    }
}
add_action( 'woocommerce_process_product_meta', 'save_leadlovers_product_fields' );

关键注意点 #

• 自定义选项卡的target值（leadlovers_product_data）必须和内容容器的div ID完全一致，否则点击选项卡时无法显示对应内容。
• 使用WooCommerce内置的woocommerce_wp_checkbox、woocommerce_wp_text_input等函数创建字段，能保证样式和后台原生UI统一，无需额外写CSS。

内容的提问来源于stack exchange，提问作者Daniel Weber