2021-09-07

如何用 Meta Box 簡單 4 步驟新增 Woocommerce 自訂欄位

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

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

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

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

1. 安裝外掛 Meta Box

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

在後台搜尋 Meta Box,就可以找到直接安裝

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

What is Meta Box?

When a user edits a post, the edit screen is composed of several default boxes: Editor, Publish, Categories, Tags, etc. These boxes are meta boxes. Plugins can add custom meta boxes to an edit screen of any post type. ::: Meta Box 是後台編輯界面的欄位,比如:編輯器、發佈按鈕、分類或 Tag 選擇框等...都叫 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;
}
完成後,請隨便開啟一個產品來編輯,應該會看到產品敘述底下多一個 Factory Group, 也就是我們自訂的欄位。

可是,輸入完資料,到前台怎麼沒顯示出來?這是正常的,再加一小段程式碼,就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>";
}

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

woocommerce custom fields
請我喝杯咖啡吧 ^^
No active "bsf-sb-post-end" sidebar

4 comments on “如何用 Meta Box 簡單 4 步驟新增 Woocommerce 自訂欄位”

  1. 想請問如果只是要在自訂欄位內的"欄位名稱"選取的選單內新增一個常用的欄位名稱(例如invoice)而不用每次都手動點擊"輸入新的欄位名稱"的話,可以怎麼做呢?
    謝謝

    1. 你好,
      就我理解的問題,答覆如下。
      如果我有誤會,您可以詳加說明,我盡可能協助喔^^
      ---
      您應該是問在後台invoice這個欄位,是否每一個產品都要做一次新增欄位的工?
      如果是,那設定一次就好,以後只要是產品頁面(不論新增或修改),
      都會顯示這個自訂欄位,不用每次手動作。

      1. 您好
        不好意思沒有說明清楚~
        是指在每筆訂單的管理頁面內的"自訂欄位"部分,原本就有新增自訂欄位的功能,但需要每一次都輸入新的欄位名稱,想要直接新增到下拉選單內,這個部分需要透過Meta Box來完成嗎?
        非常感謝您的回覆

        1. 您好,剛剛透過Meta box 直接把‘post_types’ => [‘shop_order’]是可以直接在訂單頁面出現想要固定的欄位,只是就獨立一個區塊出來了,不知道是否有方法可以一併放在原本的自訂欄位內,謝謝~

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

PeiYing Tsai
author
愛藝術,喜歡以科技解決問題的數位產品設計師。 堅持信念,任何困難事,必有搞定的一天,Just try it! 隨手紀錄日常學習到的知識心得,希望對妳/你有幫助。
coffee-cup linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram