WooCommerce 产品变体设置选项卡中的多个 select 自定义字段

Multiple select custom fields in WooCommerce Product Variations setting tab

现在我可以将 1 个自定义 select 菜单添加到我的产品变体区域。

但是,我想向产品变体添加一个额外的 select 菜单,但不确定如何添加。

这是我在子主题中生成一个菜单的代码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 ) );
    }

}

要在产品变体选项卡设置中添加 "select" 类型的 2 个自定义字段,非常简单,您应该为每个不同的 ID slug 和 key slug 复制字段设置。我稍微更改了代码,它也能正常工作。

代码如下:

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

代码进入您的活动子主题(或主题)的 function.php 文件或任何插件文件。

所有代码都在 Woocommerce 3+ 上测试过并且有效。你会得到这个:


使用或显示此值的示例(在前端):

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