1

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

这可行，但是自定义字段由添加到购物车按钮定位。我希望将其放置在附加信息选项卡中。我尝试将前端代码添加到附加信息.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;

}
4

1 回答 1

3

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

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

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

这是完整的重新访问的代码：

// 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 文件中。测试和工作。

于 2021-02-12T10:44:19.913 回答