Multiple select custom fields in WooCommerce Product Variations setting tab

Question

Right now I'm able to add 1 custom select menu to my product variation area.

However, I'd like to add an additional select menu to the product variation, but not sure how.

Here's my code for generating one menu in my child theme 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 ) {

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

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

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

}

Answer 1

To add 2 custom fields of "select" type in product variations tab settings, is very easy, you should duplicate fields setting for each different ID slug and key slugs. I have lightly change the code and it works too.

Here is that code:

// Add 2 custom fields in Variation Settings
add_action( 'woocommerce_product_after_variable_attributes', 'variation_settings_fields', 10, 3 );
function variation_settings_fields( $loop, $variation_data, $variation ) {

    // Select 1
    woocommerce_wp_select( array(
        'id'          => 'first_custom_field_' . $variation->ID,
        'label'       => __( 'My Select Field 1', 'woocommerce' ),
        'value'       => get_post_meta( $variation->ID, '_first_custom_field', true ),
        'options' => array(
            ''   => __( 'Please choose a value', 'woocommerce' ),
            'value 1'   => __( 'Option 1', 'woocommerce' ),
            'value 2'   => __( 'Option 2', 'woocommerce' ),
            'value 3'   => __( 'Option 3', 'woocommerce' )
        )
    ) );

    // Select 2
    woocommerce_wp_select( array(
        'id'          => 'second_custom_field_' . $variation->ID,
        'label'       => __( 'My Select Field 2', 'woocommerce' ),
        'value'       => get_post_meta( $variation->ID, '_second_custom_field', true ),
        'options' => array(
            ''   => __( 'Please choose a value', 'woocommerce' ),
            'value 1'   => __( 'Option 1', 'woocommerce' ),
            'value 2'   => __( 'Option 2', 'woocommerce' ),
            'value 3'   => __( 'Option 3', 'woocommerce' )
        )
    ) );
}
// Save  2 custom fields values in Variation post meta data
add_action( 'woocommerce_save_product_variation', 'save_variation_settings_fields', 10, 2 );
function save_variation_settings_fields( $post_id ) {

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

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

Code goes in function.php file of your active child theme (or theme) or also in any plugin file.

All code is tested on Woocommerce 3+ and works. You will get this:

---

Example to use or display this values (in frontend):

// You need to get the variation Id from somewhere
$variation_id = 41;

// Then you get this custom post meta data
$value1 = get_post_meta( $variation_id, '_first_custom_field', true);
$value2 = get_post_meta( $variation_id, '_second_custom_field', true);

// And may be display it
echo '<p>My value 1: ' . $value1 . '</p>';
echo '<p>My value 2: ' . $value2 . '</p>';