增强的 WooCommerce 变体自定义字段

Question

使用 Remi Coulson 教程，已为产品变体添加自定义字段。

这有效，但是自定义字段由添加到购物车按钮定位。我希望将它放在附加信息选项卡中。我试过将前端代码添加到additional-information.php但它不显示。

 <div class="woocommerce-variation-custom-text-field">
    {{{ data.variation.text_field }}}
</div>

添加到 functions.php 以显示变体

   // Add Variation Settings
add_action( 'woocommerce_product_after_variable_attributes', 'variation_settings_fields', 10, 3 );

// Save Variation Settings
add_action( 'woocommerce_save_product_variation', 'save_variation_settings_fields', 10, 2 );

/**
 * Create new fields for variations
 *
*/
function variation_settings_fields( $loop, $variation_data, $variation ) {

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

}

/**
 * Save new fields for variations
 *
*/
function save_variation_settings_fields( $post_id ) {

    // Text Field
    $text_field = $_POST['_text_field'][ $post_id ];
    if( ! empty( $text_field ) ) {
        update_post_meta( $post_id, '_text_field', esc_attr( $text_field ) );
    }
    

}

<?php

// Add New Variation Settings
add_filter( 'woocommerce_available_variation', 'load_variation_settings_fields' );

/**
 * Add custom fields for variations
 *
*/
function load_variation_settings_fields( $variations ) {
    
    // duplicate the line for each field
    $variations['text_field'] = get_post_meta( $variations[ 'variation_id' ], '_text_field', true );
    
    return $variations;

}

Answer 1

请注意，自 WooCommerce 3 以来，您的代码有点过时了。

jQuery 和其他一些更改需要在单个产品页面上的特定位置的任何位置显示所选变体自定义字段值，特别是在变体表单之外。

在下面的示例中，选择的 变体自定义字段值将显示在产品属性 table 之后的“附加信息”产品选项卡上。

这是完整的重访代码：

// 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'          => '_text_field[' . $loop . ']',
        'label'       => __( 'My Text Field', 'woocommerce' ),
        'placeholder' => 'http://',
        'desc_tip'    => 'true',
        'description' => __( 'Enter the custom value here.', 'woocommerce' ),
        'value'       => get_post_meta( $variation->ID, '_text_field', 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['_text_field'][$loop]) ) {
        $variation->update_meta_data( '_text_field', sanitize_text_field($_POST['_text_field'][$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['text_field'] = $variation->get_meta('_text_field');

    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
}

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

增强的 WooCommerce 变体自定义字段

Enhanced WooCommerce Custom Fields for Variations

php

wordpress

jquery

woocommerce

product-variations