Custom fields in WooCommerce product variations

Question

QUESTION UPDATED AS PEOPLE SEEMED TO MISUNDERSTAND IT:

Using the WooCommerce plugin for WordPress, I'd like to display the product variation names in the Additional Information tab in the same way as weight and dimesions are displayed.

For instance, I have a product that comes in two sizes, 2 litres and 10 litres, therefore it's a variable product with the two product variations '2 litres' and '10 litres'. If I check the box 'display on product page', size is displayed in the Additional Information tab like this: 'Size: 2 litres, 10 litres'. 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 Information tab will display 'Size: 10 litres'.

Can this be done?

Answer 1

Here is the full code to add all types of custom input fields for Product Variations:

<?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 ) );
    }
}
?>

To get those values on the frontend we just need to use the popular get_post_meta() function.

Reference article at here:

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

Answer 2

Here's a first attempt. There's not a lot to go on in the attributes table, but when an attribute dropdown is changed, it will find the attribute in the additional information tab (where it is listed in default WooCommerce) and change the text to match the label in the dropdown. A problem occurs when the customer switches back to the empty "choose" option, so you'd need to expand this to somehow account for that.

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();});
    }
});

Save the above as somescript.js in your theme's folder. Then add the following to functions.php to properly enqueue the script.

/**
 * 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' );