在 WooCommerce 中添加和显示变体的多个自定义字段

Question

基于将自定义字段添加到有效的产品变体的答案代码。

我添加了额外的自定义字段，总共 6 个。当我更新产品时，数据不保存，前端也不显示。

我在添加额外的自定义字段时做错了什么？

我的代码：

   // Add a custom field to variation settings
add_action( 'woocommerce_product_after_variable_attributes', 'variation_settings_fields', 10, 3 );
function variation_settings_fields( $loop, $variation_data, $variation ) {

    // Text Field
    woocommerce_wp_text_input( 
        array( 
            'id'          => '_model[' . $variation->ID . ']', 
            'label'       => __( 'model', 'woocommerce' ), 
            'placeholder' => 'http://',
            'desc_tip'    => 'true',
            'description' => __( 'Enter the custom value here.', 'woocommerce' ),
            'value'       => get_post_meta( $variation->ID, '_model', true )
        )
    );

    // Text Field
    woocommerce_wp_text_input( 
        array( 
            'id'          => '_wattage[' . $variation->ID . ']', 
            'label'       => __( 'wattage', 'woocommerce' ), 
            'placeholder' => 'http://',
            'desc_tip'    => 'true',
            'description' => __( 'Enter the custom value here.', 'woocommerce' ),
            'value'       => get_post_meta( $variation->ID, '_wattage', true )
        )
    );

    // Text Field
    woocommerce_wp_text_input( 
        array( 
            'id'          => '_lumen[' . $variation->ID . ']', 
            'label'       => __( 'lumen', 'woocommerce' ), 
            'placeholder' => 'http://',
            'desc_tip'    => 'true',
            'description' => __( 'Enter the custom value here.', 'woocommerce' ),
            'value'       => get_post_meta( $variation->ID, '_lumen', true )
        )
    );

    // Text Field
    woocommerce_wp_text_input( 
        array( 
            'id'          => '_material[' . $variation->ID . ']', 
            'label'       => __( 'material', 'woocommerce' ), 
            'placeholder' => 'http://',
            'desc_tip'    => 'true',
            'description' => __( 'Enter the custom value here.', 'woocommerce' ),
            'value'       => get_post_meta( $variation->ID, '_material', true )
        )
    );

    // Text Field
    woocommerce_wp_text_input( 
        array( 
            'id'          => '_dimension[' . $variation->ID . ']', 
            'label'       => __( 'dimension', 'woocommerce' ), 
            'placeholder' => 'http://',
            'desc_tip'    => 'true',
            'description' => __( 'Enter the custom value here.', 'woocommerce' ),
            'value'       => get_post_meta( $variation->ID, '_dimension', true )
        )
    );

    // Text Field
    woocommerce_wp_text_input( 
        array( 
            'id'          => '_year[' . $variation->ID . ']', 
            'label'       => __( 'year', 'woocommerce' ), 
            'placeholder' => 'http://',
            'desc_tip'    => 'true',
            'description' => __( 'Enter the custom value here.', 'woocommerce' ),
            'value'       => get_post_meta( $variation->ID, '_year', true )
        )
    );

}
    


    // Save custom field value from variation settings
add_action( 'woocommerce_admin_process_variation_object', 'save_variation_settings_fields', 10, 2 );
function save_variation_settings_fields( $variation, $loop ) {
    if( isset($_POST['_model'][$loop]) ) {
        $variation->update_meta_data( '_model', sanitize_text_field($_POST['_model'][$loop]) );
    }
    if( isset($_POST['_wattage'][$loop]) ) {
        $variation->update_meta_data( '_wattage', sanitize_text_field($_POST['_wattage'][$loop]) );
    }
    if( isset($_POST['_lumen'][$loop]) ) {
        $variation->update_meta_data( '_lumen', sanitize_text_field($_POST['_lumen'][$loop]) ); 
    }
    if( isset($_POST['_material'][$loop]) ) {
        $variation->update_meta_data( '_material', sanitize_text_field($_POST['_material'][$loop]) );  
    }
    if( isset($_POST['_dimension'][$loop]) ) {
        $variation->update_meta_data( '_dimension', sanitize_text_field($_POST['_dimension'][$loop]) );
    }
    if( isset($_POST['_year'][$loop]) ) {
        $variation->update_meta_data( '_year', sanitize_text_field($_POST['_year'][$loop]) );
    }
}

// Add variation custom field to single variable product form
add_filter( 'woocommerce_available_variation', 'add_variation_custom_field_to_variable_form', 10, 3 );
function add_variation_custom_field_to_variable_form( $variation_data, $product, $variation ) {
    $variation_data['model'] = $variation->get_meta('_model');
    $variation_data['wattage'] = $variation->get_meta('_wattage');
    $variation_data['lumen'] = $variation->get_meta('_lumen');
    $variation_data['material'] = $variation->get_meta('_material');
    $variation_data['dimension'] = $variation->get_meta('_dimension');
    $variation_data['year'] = $variation->get_meta('_year');

    return $variation_data;
}

add_action( 'woocommerce_product_additional_information', 'add_html_container_to_display_selected_variation_custom_field' );
function add_html_container_to_display_selected_variation_custom_field( $product ){
    echo '<div class="custom_variation-text-field"></div>';
}
        
// Display selected variation custom field value to product the tab
add_action( 'woocommerce_after_variations_form', 'display_selected_variation_custom_field_js' );
function display_selected_variation_custom_field_js(){
    ?>
    <script type="text/javascript">
    (function($){
        $('form.cart').on('show_variation', function(event, data) {
            $('.custom_variation-text-field').text(data.text_field);
        }).on('hide_variation', function(event) {
            $('.custom_variation-text-field').text('');
        });
    })(jQuery);
    </script>
    <?php
}

Answer 1

为了保存数据，我对第一个函数做了一些修改（第二个保持不变）:

// Add a custom field to variation settings
add_action( 'woocommerce_product_after_variable_attributes', 'variation_settings_fields', 10, 3 );
function variation_settings_fields( $loop, $variation_data, $variation ) {

    woocommerce_wp_text_input( array(
        'id'          => '_model[' . $loop . ']',
        'label'       => __( 'model', 'woocommerce' ),
        'placeholder' => '',
        'desc_tip'    => 'true',
        'description' => __( 'This is the description text...', 'woocommerce' ),
        'value'       => get_post_meta( $variation->ID, '_model', true )
    ) );

    woocommerce_wp_text_input(
        array(
        'id'          => '_wattage[' . $loop . ']',
        'label'       => __( 'wattage', 'woocommerce' ),
        'placeholder' => '',
        'desc_tip'    => 'true',
        'description' => __( 'This is the description text...', 'woocommerce' ),
        'value'       => get_post_meta( $variation->ID, '_wattage', true )
    ) );

    woocommerce_wp_text_input( array(
        'id'          => '_lumen[' . $loop . ']',
        'label'       => __( 'lumen', 'woocommerce' ),
        'placeholder' => '',
        'desc_tip'    => 'true',
        'description' => __( 'This is the description text...', 'woocommerce' ),
        'value'       => get_post_meta( $variation->ID, '_lumen', true )
    ) );

    woocommerce_wp_text_input( array(
        'id'          => '_material[' . $loop . ']',
        'label'       => __( 'material', 'woocommerce' ),
        'placeholder' => '',
        'desc_tip'    => 'true',
        'description' => __( 'This is the description text...', 'woocommerce' ),
        'value'       => get_post_meta( $variation->ID, '_material', true )
    ) );

    woocommerce_wp_text_input( array(
        'id'          => '_dimension[' . $loop . ']',
        'label'       => __( 'dimension', 'woocommerce' ),
        'placeholder' => '',
        'desc_tip'    => 'true',
        'description' => __( 'This is the description text...', 'woocommerce' ),
        'value'       => get_post_meta( $variation->ID, '_dimension', true )
    ) );

    woocommerce_wp_text_input( array(
        'id'          => '_year[' . $loop . ']',
        'label'       => __( 'year', 'woocommerce' ),
        'placeholder' => 'http://',
        'desc_tip'    => 'true',
        'description' => __( 'Enter the custom value here.', 'woocommerce' ),
        'value'       => get_post_meta( $variation->ID, '_year', true )
    ) );
}

// Save custom field value from variation settings
add_action( 'woocommerce_admin_process_variation_object', 'save_variation_settings_fields', 10, 2 );
function save_variation_settings_fields( $variation, $loop ) {
    if( isset($_POST['_model'][$loop]) ) {
        $variation->update_meta_data( '_model', sanitize_text_field($_POST['_model'][$loop]) );
    }
    if( isset($_POST['_wattage'][$loop]) ) {
        $variation->update_meta_data( '_wattage', sanitize_text_field($_POST['_wattage'][$loop]) );
    }
    if( isset($_POST['_lumen'][$loop]) ) {
        $variation->update_meta_data( '_lumen', sanitize_text_field($_POST['_lumen'][$loop]) );
    }
    if( isset($_POST['_material'][$loop]) ) {
        $variation->update_meta_data( '_material', sanitize_text_field($_POST['_material'][$loop]) );
    }
    if( isset($_POST['_dimension'][$loop]) ) {
        $variation->update_meta_data( '_dimension', sanitize_text_field($_POST['_dimension'][$loop]) );
    }
    if( isset($_POST['_year'][$loop]) ) {
        $variation->update_meta_data( '_year', sanitize_text_field($_POST['_year'][$loop]) );
    }
}

最好将字段数据自定义到数据库并在管理中显示保存的值。

现在前端显示部分是错误的（你的最后2个函数）。

您首先需要考虑如何显示多个自定义字段，html 结构以及与每个自定义字段相关的标签应该如何显示。所以编辑你的问题，因为我无法为你猜测。

这是一个包含所有自定义字段的工作示例，用于在前端单个产品页面中显示所选变体的数据：

// Add variation custom field to single variable product form
add_filter( 'woocommerce_available_variation', 'add_variation_custom_field_to_variable_form', 10, 3 );
function add_variation_custom_field_to_variable_form( $variation_data, $product, $variation ) {
    $variation_data['model'] = $variation->get_meta('_model');
    $variation_data['wattage'] = $variation->get_meta('_wattage');
    $variation_data['lumen'] = $variation->get_meta('_lumen');
    $variation_data['material'] = $variation->get_meta('_material');
    $variation_data['dimension'] = $variation->get_meta('_dimension');
    $variation_data['year'] = $variation->get_meta('_year');

    return $variation_data;
}

add_action( 'woocommerce_product_additional_information', 'add_html_container_to_display_selected_variation_custom_field' );
function add_html_container_to_display_selected_variation_custom_field( $product ){
    echo '<div class="custom_variation-text-field">aaa</div>';
}

// Display selected variation custom field value to product the tab
add_action( 'woocommerce_after_variations_form', 'display_selected_variation_custom_field_js' );
function display_selected_variation_custom_field_js(){
    ?>
    <script type="text/javascript">
    (function($){
        var a = '.custom_variation-text-field', b = $(a).html();

        $('form.cart').on('show_variation', function(event, data) {
            outputHtml = '';

            if( data.model ) {
                outputHtml += '<span><strong><?php _e("Model"); ?><strong>: '+data.model+'<span><br>';
            }
            if( data.wattage ) {
                outputHtml += '<span><strong><?php _e("Wattage"); ?><strong>: '+data.wattage+'<span><br>';
            }
            if( data.lumen ) {
                outputHtml += '<span><strong><?php _e("Lumen"); ?><strong>: '+data.lumen+'<span><br>';
            }
            if( data.material ) {
                outputHtml += '<span><strong><?php _e("Material"); ?><strong>: '+data.material+'<span><br>';
            }
            if( data.dimension ) {
                outputHtml += '<span><strong><?php _e("Dimension"); ?><strong>: '+data.dimension+'<span><br>';
            }
            if( data.year ) {
                outputHtml += '<span><strong><?php _e("Year"); ?><strong>: '+data.year+'<span>';
            }
            if( outputHtml ) {
                $(a).html(outputHtml);
            }
        }).on('hide_variation', function(event) {
            $(a).html(b);
        });
    })(jQuery);
    </script>
    <?php
}

代码进入活动子主题（或活动主题）的 functions.php 文件。已测试并有效。

在 WooCommerce 中添加和显示变体的多个自定义字段

Add and display multiple Custom Fields for Variations in WooCommerce

php

jquery

woocommerce

custom-fields

product-variations