本篇文章更新時間：2023/09/07
如有資訊過時或語誤之處，歡迎使用 Contact 功能通知。
一介資男的 LINE 社群開站囉！歡迎入群聊聊～
如果本站內容對你有幫助，歡迎使用 BFX Pay 加密貨幣 或 新台幣 贊助支持。
這功能有一個知名的外掛做得很成功：Product Addons & Fields for WooCommerce 早期簡稱「PPOM」。
其實就是如他外掛名稱一樣，附加商品的其他欄位（價值）。
WooCommerce 預設建立的商品除了簡單商品直覺的使用外，進階就是帶有簡單變化的可變商品這兩類型為主。
建立其他類型商品可以參考這篇 [WooCommerce] 客製化新商品類型，實現開發特殊購物網站的方法
但，有些時候還真的不夠用。所以這也是為什麼 PPOM 這套會這麼夯！因為它可以讓原本預設的商品，加上一些自訂屬性去完成結帳。
所以如果下單一台「電腦」，希望可以去客製化這台電腦上的所有配件都是可以辦得到了，不會被侷限在簡單商品的「某種固定配置電腦」又或是可變商品的「多幾種款式，但也還是固定配置的電腦」。彈性增加非常多～
而這款外掛的關鍵就是做到了管理「購物車商品項目的中繼資料 （Cart item meta data）」。
有興趣的人可以去拆解那款外掛來研究，本篇文就是筆記核心部分。
主要分下面流程：
- 商品頁的客製化表單
- 購物車接收表單資料呈現
- 結帳訂單記錄設定的中繼資料
商品頁的客製化表單
這邊能下手的點很多，從 WooCommerce 內建的範本去繼承來改，到使用勾點來輸出這個客製化表單都沒問題。
以勾點來說，我會選用 woocommerce_before_add_to_cart_button 這組來輸出。
購物車接收表單資料呈現
由於是表單，所以會隨著表單送出前端處理好的 input 送值，接受並記錄與呈現。下方範例算偷懶，沒去收前端 POST 過來的值，但概念一樣，就是先接收處理。
function mxp_add_custom_cart_item_data($cart_item_data, $product_id, $variation_id) {
$product_type = WC_Product_Factory::get_product_type($product_id);
// 一些邏輯判斷，像是有沒有符合某種商品類型
if ('MAGIC_TYPE' === $product_type) {
$product = wc_get_product($product_id);
// 一些取資料做處理的過程，這邊舉例拿商品的某個設定來儲存
$mxp_meta_data = $product->get_meta('MAGIC_MXP_META');
// 用特殊的關鍵字 MXP_META 來當 key 寫入這筆暫存資料
$cart_item_data['MXP_META'] = $mxp_meta_data;
}
return $cart_item_data;
}
add_filter('woocommerce_add_cart_item_data', 'mxp_add_custom_cart_item_data', 10, 3);其後就是呈現到購物車上顯示：
function mxp_display_custom_cart_item_data($cart_item_data, $cart_item) {
// 判斷有沒有那組特殊關鍵字的資料
if (isset($cart_item['MXP_META'])) {
// 有就撈出來呈現在購物車上
$cart_item_data[] = array(
'name' => '呈現的項目名稱',
'value' => '呈現的項目值',
);
}
return $cart_item_data;
}
add_filter('woocommerce_get_item_data', 'mxp_display_custom_cart_item_data', 10, 2);到這步也是把前端表單讓消費者操作的結果呈現與確認，沒問題就是去結帳。
而程式這端也是要最後一步驟：紀錄上述資料
結帳訂單記錄設定的中繼資料
function mxp_save_custom_order_item_meta($item, $cart_item_key, $values, $order) {
// 最後判斷是否有這關鍵字的值，有就真的紀錄在購物車項目的中繼資料裡
if (isset($values['MXP_META'])) {
$meta_value = '紀錄的項目數值';
$item->add_meta_data('最後儲存進去的META名稱', $meta_value, true);
}
}
add_action('woocommerce_checkout_create_order_line_item', 'mxp_save_custom_order_item_meta', 10, 4);將資料寫進去對應的購物車項目 Line item 中後，結帳時就會把這些資訊帶進去訂單裡呈現。
商店管理員查看訂單的時候也就知道消費者當初前端做了哪些客製化的配置。
結語
到這邊就是主要的原理拆解，PPOM 這款外掛厲害的點就是已經都把這些繁瑣以及藥開發的部分包裝成一個有操作介面的外掛，讓沒程式開發能力的人也能輕鬆使用這個功能！
最後補充一個情境是：「如果已經建立好的訂單，要如何更新客製化商品項目的中繼資料？」
$order = wc_get_order('帶入數字的訂單編號');
foreach ($order->get_items() as $item_id => $item_obj) {
if ($item_obj->get_product_id() == '訂單中某個指定的商品ID') {
wc_update_order_item_meta($item_id, '中繼資料的項目欄位名稱', '欄位值');
}
}
clean_post_cache($order->get_id());
wc_delete_shop_order_transients($order);
wp_cache_delete('order-items-' . $order->get_id(), 'orders');使用上述這段方法，就可以對已經建立的訂單，挑項目來更新中繼資料了。