WooCommerce产品变体中的自定义字段

Question

随着人们似乎误解了IT，问题得到了更新：

使用用于WooCommerce的WordPress插件，我希望在“附加信息”选项卡中以与显示权重和度数相同的方式显示产品变体名称。

例如，我有一个两种大小的产品，2升和10升，因此它是一个可变的产品，有两种不同的产品“2升”和“10升”。如果我选中“产品页面上的显示”框，大小将显示在“附加信息”选项卡中，如“大小:2升，10升”。我希望它能像重量和尺寸一样工作，所以当选择产品变化'2升‘时，附加信息选项卡将显示’大小:2升‘，当产品变化'10升’被选中时，附加信息选项卡将显示‘大小: 10升’。

这能办到吗？

Answer 1

下面是为添加所有类型的自定义输入字段的完整代码：

<?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 )
        )
    );
    // Number Field
    woocommerce_wp_text_input( 
        array( 
            'id'          => '_number_field[' . $variation->ID . ']', 
            'label'       => __( 'My Number Field', 'woocommerce' ), 
            'desc_tip'    => 'true',
            'description' => __( 'Enter the custom number here.', 'woocommerce' ),
            'value'       => get_post_meta( $variation->ID, '_number_field', true ),
            'custom_attributes' => array(
                            'step'  => 'any',
                            'min'   => '0'
                        ) 
        )
    );
    // Textarea
    woocommerce_wp_textarea_input( 
        array( 
            'id'          => '_textarea[' . $variation->ID . ']', 
            'label'       => __( 'My Textarea', 'woocommerce' ), 
            'placeholder' => '', 
            'description' => __( 'Enter the custom value here.', 'woocommerce' ),
            'value'       => get_post_meta( $variation->ID, '_textarea', true ),
        )
    );
    // Select
    woocommerce_wp_select( 
    array( 
        'id'          => '_select[' . $variation->ID . ']', 
        'label'       => __( 'My Select Field', 'woocommerce' ), 
        'description' => __( 'Choose a value.', 'woocommerce' ),
        'value'       => get_post_meta( $variation->ID, '_select', true ),
        'options' => array(
            'one'   => __( 'Option 1', 'woocommerce' ),
            'two'   => __( 'Option 2', 'woocommerce' ),
            'three' => __( 'Option 3', 'woocommerce' )
            )
        )
    );
    // Checkbox
    woocommerce_wp_checkbox( 
    array( 
        'id'            => '_checkbox[' . $variation->ID . ']', 
        'label'         => __('My Checkbox Field', 'woocommerce' ), 
        'description'   => __( 'Check me!', 'woocommerce' ),
        'value'         => get_post_meta( $variation->ID, '_checkbox', true ), 
        )
    );
    // Hidden field
    woocommerce_wp_hidden_input(
    array( 
        'id'    => '_hidden_field[' . $variation->ID . ']', 
        'value' => 'hidden_value'
        )
    );
}
/**
 * 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 ) );
    }

    // Number Field
    $number_field = $_POST['_number_field'][ $post_id ];
    if( ! empty( $number_field ) ) {
        update_post_meta( $post_id, '_number_field', esc_attr( $number_field ) );
    }
    // Textarea
    $textarea = $_POST['_textarea'][ $post_id ];
    if( ! empty( $textarea ) ) {
        update_post_meta( $post_id, '_textarea', esc_attr( $textarea ) );
    }

    // Select
    $select = $_POST['_select'][ $post_id ];
    if( ! empty( $select ) ) {
        update_post_meta( $post_id, '_select', esc_attr( $select ) );
    }

    // Checkbox
    $checkbox = isset( $_POST['_checkbox'][ $post_id ] ) ? 'yes' : 'no';
    update_post_meta( $post_id, '_checkbox', $checkbox );

    // Hidden field
    $hidden = $_POST['_hidden_field'][ $post_id ];
    if( ! empty( $hidden ) ) {
        update_post_meta( $post_id, '_hidden_field', esc_attr( $hidden ) );
    }
}
?>

为了在前端获取这些值，我们只需要使用流行的get_post_meta()函数.

这里的参考文章：

http://www.remicorson.com/woocommerce-custom-fields-for-variations/

Answer 2

这是第一次尝试。属性表中没有太多可执行的操作，但是当属性下拉列表发生更改时，它将在附加信息选项卡(默认的WooCommerce中列出该属性)中找到属性，并更改文本以匹配下拉列表中的标签。当客户切换回空的“选择”选项时会出现问题，因此您需要对此进行扩展以解决这个问题。

jQuery( document ).ready(function($) {

    $( ".variations_form" ).on( 'change', '.variations select', function() {
        id = $(this).attr('id');
        attribute = toTitleCase( $(this).attr('id').replace("pa_", "") );
        selected = $(this).find('option:selected').text();
        $('#tab-additional_information').find('.shop_attributes th:contains('+attribute+')').next('td').text(selected);
    });

    function toTitleCase(str){
        return str.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
    }
});

将以上内容保存为主题文件夹中的somescript.js。然后将以下内容添加到functions.php中，以正确地对脚本进行排队。

/**
 * Proper way to enqueue scripts and styles
 */
function theme_name_scripts() {
    wp_enqueue_script( 'script-name', get_template_directory_uri() . '/somescript.js', array('jquery'), '1.0.0', true );
}

add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );