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

Question

问题已更新，因为人们似乎误解了它：

使用 WordPress 的 WooCommerce 插件，我想在“附加信息”选项卡中显示产品变体名称，其方式与显示重量和尺寸的方式相同。

例如，我有一个产品有两种尺寸，2 升和 10 升，因此它是具有“2 升”和“10 升”两种产品变体的可变产品。如果我选中“在产品页面上显示”框，尺寸会显示在“附加信息”选项卡中，如下所示：“尺寸：2 升，10 升”。 I want it to work like the weight and dimensions, so when the product variation '2 litres' is selected, the Additional Information tab will display 'Size: 2 litres', and when the product variation '10 litres' is selected, the Additional信息选项卡将显示“尺寸：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' );