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

问题描述

基于 Enhanced WooCommerce Custom Fields for Variations 答案代码，用于将自定义字段添加到有效的产品变体中。

我添加了额外的自定义字段，总共 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.','value'       => get_post_meta( $variation->ID,'_model',true )
        )
    );

    // Text Field
    woocommerce_wp_text_input( 
        array( 
            'id'          => '_wattage[' . $variation->ID . ']','label'       => __( 'wattage','_wattage',true )
        )
    );

    // Text Field
    woocommerce_wp_text_input( 
        array( 
            'id'          => '_lumen[' . $variation->ID . ']','label'       => __( 'lumen','_lumen',true )
        )
    );

    // Text Field
    woocommerce_wp_text_input( 
        array( 
            'id'          => '_material[' . $variation->ID . ']','label'       => __( 'material','_material',true )
        )
    );

    // Text Field
    woocommerce_wp_text_input( 
        array( 
            'id'          => '_dimension[' . $variation->ID . ']','label'       => __( 'dimension','_dimension',true )
        )
    );

    // Text Field
    woocommerce_wp_text_input( 
        array( 
            'id'          => '_year[' . $variation->ID . ']','label'       => __( 'year','_year',true )
        )
    );

}
    


    // Save custom field value from variation settings
add_action( 'woocommerce_admin_process_variation_object','save_variation_settings_fields',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',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
}

解决方法

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

// 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...','value'       => get_post_meta( $variation->ID,'_model',true )
    ) );

    woocommerce_wp_text_input(
        array(
        'id'          => '_wattage[' . $loop . ']','label'       => __( 'wattage','_wattage',true )
    ) );

    woocommerce_wp_text_input( array(
        'id'          => '_lumen[' . $loop . ']','label'       => __( 'lumen','_lumen',true )
    ) );

    woocommerce_wp_text_input( array(
        'id'          => '_material[' . $loop . ']','label'       => __( 'material','_material',true )
    ) );

    woocommerce_wp_text_input( array(
        'id'          => '_dimension[' . $loop . ']','label'       => __( 'dimension','_dimension',true )
    ) );

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

// Save custom field value from variation settings
add_action( 'woocommerce_admin_process_variation_object','save_variation_settings_fields',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]) );
    }
}

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

现在前端显示部分是错误的（你的最后两个功能）。

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

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

// Add variation custom field to single variable product form
add_filter( 'woocommerce_available_variation','add_variation_custom_field_to_variable_form',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 文件中。经测试有效。