Woocommerce 對於需求單純的電商網站,功能綽綽有餘,雖然功能要求不多,但需要在產品介紹顯示額外的資訊,就要自己生出欄位了。
接下來分享如何新增 Woocommerce 自訂欄位,應用情境是產品編號要顯示兩種,一個是原廠編號,一個是自己公司的編號。
目標要如下圖紅框標示,額外顯示原廠編號(Factory SKU)
首先我們需要寫程式碼來新增欄位,自己寫太慢,直接用 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.透過這個媒介將輸入的資訊存放在資料庫。
選擇左側的 [Meta Box] 連結,進入功能頁後,點擊 [Go to Online Generator], 免費版的只能被引導至官網產生程式碼,想要在自己的後台一氣呵成,付錢買他們家的 Extension 就可以囉
進到線上產生器,選你要的欄位屬性、填一填欄位基本資料,按 [GENERATE CODE]
根據我們提供的基本資料產生的原始碼,先 Copy 起來,等下要貼在主題的 function.php 💪
在上一步驟我們從 Meta Box 複製以下這串程式碼,他的功能就是讓後台的產品編輯頁產生自訂欄位。
請開啟 function.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囉!
回到 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>";
}
大功告成 👍👍👍 趕快動手建立自己的欄位吧~
想請問如果只是要在自訂欄位內的"欄位名稱"選取的選單內新增一個常用的欄位名稱(例如invoice)而不用每次都手動點擊"輸入新的欄位名稱"的話,可以怎麼做呢?
謝謝
你好,
就我理解的問題,答覆如下。
如果我有誤會,您可以詳加說明,我盡可能協助喔^^
---
您應該是問在後台invoice這個欄位,是否每一個產品都要做一次新增欄位的工?
如果是,那設定一次就好,以後只要是產品頁面(不論新增或修改),
都會顯示這個自訂欄位,不用每次手動作。
您好
不好意思沒有說明清楚~
是指在每筆訂單的管理頁面內的"自訂欄位"部分,原本就有新增自訂欄位的功能,但需要每一次都輸入新的欄位名稱,想要直接新增到下拉選單內,這個部分需要透過Meta Box來完成嗎?
非常感謝您的回覆
您好,剛剛透過Meta box 直接把‘post_types’ => [‘shop_order’]是可以直接在訂單頁面出現想要固定的欄位,只是就獨立一個區塊出來了,不知道是否有方法可以一併放在原本的自訂欄位內,謝謝~