如何為 woocommerce product variation 加入自定欄目 custom field

當 WordPress 一般文章 post 或頁面 page 的後台輸入不能滿足及方便日後更新，或令客戶難於管理。自定欄目 custom field 就是其中之一的理想工具，特別是自定主題 theme 的設計版面 template。

要加入自定欄目 custom field 正常情況可使用本身 WordPress custom field 功能，或透過插件 plug-in。根據經驗比例喜歡使用 Advanced Custom Fileds (ACF) 。但有時也可自行制定，如今次例子想在 woocommerce 產品的多選項目 variation 下加入。

修改 theme 內的 function.php

// Add a custom field to variation settings
function hrx_variation_settings_fields( $loop, $variation_data, $variation ) {

    // Text Field
    woocommerce_wp_text_input( 
        array( 
            'id'          => 'custom_field', 
            'label'       => __( 'Barcode field', 'texdomain' ), 
            'placeholder' => '',
            'desc_tip'    => 'true',
            'description' => __( 'design custom field', 'texdomain' ),
            'value'       => get_post_meta( $variation->ID, 'custom_field', true )
        )
    );
}
add_action( 'woocommerce_product_after_variable_attributes', 'hrx_variation_settings_fields', 10, 3 );
/**
 * Save new fields for variations
 *
*/
function hrx_save_variation_settings_fields( $post_id ) {

    // Text Field
    $isbn_value = $_POST['custom_field'];
    if( ! empty( $isbn_value ) ) {
        update_post_meta( $post_id, 'custom_field', esc_attr( $isbn_value ) );
    }
    

}
add_action( 'woocommerce_save_product_variation', 'hrx_save_variation_settings_fields', 10, 2 );