Woocommerce 對於需求單純的電商網站，功能綽綽有餘，雖然功能要求不多，但需要在產品介紹顯示額外的資訊，就要自己生出欄位了。

接下來分享如何新增 Woocommerce 自訂欄位，應用情境是產品編號要顯示兩種，一個是原廠編號，一個是自己公司的編號。

目標要如下圖紅框標示，額外顯示原廠編號(Factory SKU)

4 個步驟，新增 Woocommerce 自訂欄位

1. 安裝外掛 Meta Box

首先我們需要寫程式碼來新增欄位，自己寫太慢，直接用 Meta Box 來生成，以這個需求來說，免費版就夠用了。

由於自己更多的開發經驗是使用 CodeIgniter 建置系統，在設計表單時，要什麼去MySql 直接加資料表跟欄位就好，哪還透過 api 或 function 這麼麻煩，因此一開始看到 Meta box，還不太理解它是什麼東西，這個搞剛？！🤔 這感覺就像明明九九乘法表可以一分鐘解題的是，非要用建構式數學搞五分鐘才算出來。不過系統大，的確是需要一些機制來組成防火牆，避免網站輕易被改壞，anyway, 這是 wordpress 對 Meta Box 的解釋：

2. 透過 Meta Box online generator 產生程式碼

選擇左側的 [Meta Box] 連結，進入功能頁後，點擊 [Go to Online Generator], 免費版的只能被引導至官網產生程式碼，想要在自己的後台一氣呵成，付錢買他們家的 Extension 就可以囉

進到線上產生器，選你要的欄位屬性、填一填欄位基本資料，按 [GENERATE CODE]

根據我們提供的基本資料產生的原始碼，先 Copy 起來，等下要貼在主題的 function.php 💪

3. 在後台產品頁顯示自訂欄位

在上一步驟我們從 Meta Box 複製以下這串程式碼，他的功能就是讓後台的產品編輯頁產生自訂欄位。

請開啟 function.php, 貼上程式碼，請注意！貼上之後先別急著存檔，有兩個小地方需要修改：

1. 'post_types' => ['post','pages'], 要改成 'post_types' => ['product'], 這是要指定這組欄位要顯示在產品頁。
2. 開頭的 <?php 拿掉

//在後台產品頁加上自訂欄位
<?php
add_filter( 'rwmb_meta_boxes', 'your_prefix_register_meta_boxes' );
function your_prefix_register_meta_boxes( $meta_boxes ) {
    $prefix = '';
    $meta_boxes[] = [
        'title'      => esc_html__( 'Factory Group', 'online-generator' ),
        'id'         => 'factory-group',
        'post_types' => ['post', 'page'],
        'context'    => 'normal',
        'fields'     => [
            [
                'type' => 'text',
                'name' => esc_html__( 'Factory SKU', 'online-generator' ),
                'id'   => $prefix . 'factory_sku',
            ],
            [
                'type' => 'textarea',
                'name' => esc_html__( 'Factory Note', 'online-generator' ),
                'id'   => $prefix . 'factory_note',
            ],
        ],
    ];
    return $meta_boxes;
}

可是，輸入完資料，到前台怎麼沒顯示出來？這是正常的，再加一小段程式碼，就ok囉！

4. 在前台產品頁顯示自訂內容

回到 function.php 接著貼上以下程式碼，功能是讓前台的產品顯示自訂內容。

//將內容顯示在前台產品頁
add_action( 'woocommerce_product_meta_end', 'extra_info' );
function extra_info() {
    echo "<div class='extra-info'>";
     if ( $meta = rwmb_meta( 'factory_sku' ) ) {
        echo '<div>' . __( 'Factory SKU: ', 'pure' ) . $meta . '</div>';
    }
	 if ( $meta = rwmb_meta( 'factory_note' ) ) {
        echo '<div>' . __( 'Factory Note: ', 'pure' ) . $meta . '</div>';
    }
    echo "</div>";
}

大功告成 👍👍👍 趕快動手建立自己的欄位吧～