WooCommerce 中添加自定义产品字段

自定义产品字段是可以添加到在线商店中的产品中。这些字段允许商店所有者收集和显示有关其产品的更多信息，这些信息超出了通常包含的基本详细信息（例如名称、价格、颜色和描述）。

通过添加WooCommerce自定义产品字段，店主可以为客户提供有关其产品的更详细和准确的信息，这有助于改善客户体验并增加销售额。

在本教程中，我将展示如何将自定义产品字段添加到WooCommerce商店。

自定义产品数据页面

如下面的屏幕截图所示，这就是我们的配置完自定义字段后的效果。

在WooCommerce中添加钩子

第一步是钩到woocommerce_product_options_General_product_data。与此钩子关联的函数负责显示新字段。第二个钩子woocommerce_process_product_meta将保存自定义字段值。

以下代码执行了这两个操作：

// 显示WooCommerce产品自定义字段的代码
 add_action('woocommerce_product_options_General_product_data', 'woocommerce_product_custom_fields');
 // 以下代码保存WooCommerce产品自定义字段
 add_action('woocommerce_process_product_meta', 'woocommerce_product_custom_fields_save');

完整的代码实列

// 显示字段
add_action('woocommerce_product_options_general_product_data', 'woocommerce_product_custom_fields');
// 保存字段
add_action('woocommerce_process_product_meta', 'woocommerce_product_custom_fields_save');
function woocommerce_product_custom_fields()
{
    global $woocommerce, $post;
    echo '<div class="product_custom_field">';
    // 自定义产品文本字段
    woocommerce_wp_text_input(
        array(
            'id' => '_custom_product_text_field',
            'placeholder' => '自定义产品文本字段',
            'label' => __('自定义文本字段', 'woocommerce'),
            'desc_tip' => 'true'
        )
    );
    //自定义数字
    woocommerce_wp_text_input(
        array(
            'id' => '_custom_product_number_field',
            'placeholder' => '自定义数字',
            'label' => __('自定义产品数字', 'woocommerce'),
            'type' => 'number',
            'custom_attributes' => array(
                'step' => 'any',
                'min' => '0'
            )
        )
    );
    //自定义文本区域
    woocommerce_wp_textarea_input(
        array(
            'id' => '_custom_product_textarea',
            'placeholder' => '自定义文本区域',
            'label' => __('自定义文本区域', 'woocommerce')
        )
    );
    echo '</div>';
}



// 保存数据
function woocommerce_product_custom_fields_save($post_id)
{
    // 自定义文本字段
    $woocommerce_custom_product_text_field = $_POST['_custom_product_text_field'];
    if (!empty($woocommerce_custom_product_text_field))
        update_post_meta($post_id, '_custom_product_text_field', esc_attr($woocommerce_custom_product_text_field));
// 自定义数字字段
    $woocommerce_custom_product_number_field = $_POST['_custom_product_number_field'];
    if (!empty($woocommerce_custom_product_number_field))
        update_post_meta($post_id, '_custom_product_number_field', esc_attr($woocommerce_custom_product_number_field));
// 自定义文本区域
    $woocommerce_custom_procut_textarea = $_POST['_custom_product_textarea'];
    if (!empty($woocommerce_custom_procut_textarea))
        update_post_meta($post_id, '_custom_product_textarea', esc_html($woocommerce_custom_procut_textarea));
}

前端调用

在前端模板调用可以使用以下代码：

<?php
    echo get_post_meta($post->ID, '_custom_product_text_field', true);
    echo get_post_meta(get_the_ID(), '_custom_product_number_field', true);

    echo get_post_meta(get_the_ID(), '_custom_product_textarea', true);
//
    ?>