woocommerce – 小豬日常

WooCommerce 後台訂單自訂欄位資料儲存實作說明

小豬 — Sun, 28 Dec 2025 22:20:33 +0000

前言

在 WooCommerce 訂單後台管理時，常會需要額外新增自訂欄位以收集特定資訊，例如客戶的聯絡電話。這段程式碼示範如何在訂單編輯頁面保存自訂欄位資料，確保資料能正確存入訂單元資料中。適合已熟悉 WooCommerce 且想擴充後台訂單欄位功能的工程師或自學者。

為什麼需要自訂欄位儲存機制

WooCommerce 預設訂單資料結構無法涵蓋所有業務需求，因此經常會透過自訂欄位來擴充。這些欄位必須在後台訂單編輯時能夠被正確讀取與保存，否則資料會遺失。

使用 woocommerce_process_shop_order_meta 鉤子

這個 action 鉤子會在 WooCommerce 處理訂單後台編輯表單時觸發，適合用來攔截並保存自訂欄位資料。

add_action('woocommerce_process_shop_order_meta', function ($order_id) {
    // 權限檢查，避免非授權使用者修改訂單
    if (!current_user_can('edit_shop_order', $order_id))
        return;

    $key = '_shipping_phone'; // 自訂欄位名稱

    // 確認表單有送出該欄位
    if (!isset($_POST[$key]))
        return;

    // 清理輸入資料，避免 XSS 或其他注入風險
    $value = wc_clean(wp_unslash($_POST[$key]));

    // 取得訂單物件
    $order = wc_get_order($order_id);
    if (!$order)
        return;

    // 使用 WC_Order API 更新訂單元資料
    $order->update_meta_data($key, $value);
    $order->save(); // 必須呼叫 save() 才會寫入資料庫
}, 50);

關鍵說明

current_user_can 用來確保只有有編輯訂單權限的使用者能執行更新。
wc_clean 和 wp_unslash 是 WordPress 與 WooCommerce 提供的安全函式，確保輸入資料安全。
使用 update_meta_data 與 save 是 WooCommerce 推薦的寫入方式，兼容新版 HPOS（高效訂單存儲系統）與舊版 postmeta。

實務應用與延伸

此方法可擴充至任何自訂欄位，只要對應修改 $key 與表單名稱即可。實務中，還可搭配後台欄位輸入介面（如使用 woocommerce_admin_order_data_after_billing_address 鉤子）來完整實作自訂欄位的讀寫。

常見問題與注意事項

忘記呼叫 $order->save() 將導致資料無法寫入。
欄位名稱建議加底線開頭避免與 WooCommerce 原生欄位衝突。
權限檢查不可省略，避免安全問題。

完整程式碼

update_meta_data($key, $value);
    $order->save();
}, 50);

WooCommerce 後台商品列表新增複製購物車連結並支援優惠券輸入功能

小豬 — Tue, 23 Dec 2025 22:21:03 +0000

前言

在 WooCommerce 後台商品列表中，管理者常需要快速取得商品的「加入購物車」連結以便分享或推廣。這段程式碼實作了在商品列表中新增一欄「複製課程連結」按鈕，點擊後可彈出視窗讓使用者輸入優惠券代碼，並將優惠券參數附加到連結中，最後將完整連結複製到剪貼簿。這對於需要快速產生帶優惠券的購物車連結的電商管理者非常實用。

新增自訂欄位顯示複製按鈕

利用 manage_edit-product_columns 過濾器新增一欄「複製課程連結」，並透過 manage_product_posts_custom_column 動作在該欄位輸出一個帶有商品加入購物車 URL 的按鈕。URL 是以網站首頁 URL 加上 /cart/?add-to-cart=商品ID 組成。

add_filter('manage_edit-product_columns', 'add_copy_link_column');
function add_copy_link_column($columns) {
    $columns['copy_add_to_cart'] = __('複製課程連結', 'woocommerce');
    return $columns;
}

add_action('manage_product_posts_custom_column', 'show_copy_link_column_content', 10, 2);
function show_copy_link_column_content($column, $post_id) {
    if ($column === 'copy_add_to_cart') {
        $product_id = (int) $post_id;
        $site_url = my_copy_cart_site_url();
        $add_to_cart_url = $site_url . '/cart/?add-to-cart=' . $product_id;
        echo '';
    }
}

客製化 JavaScript 處理複製邏輯與優惠券輸入

在後台商品列表頁尾插入 JavaScript 和 CSS，當使用者點擊「複製」按鈕時：

透過 window.prompt 詢問是否輸入優惠券代碼，可留空。
根據輸入結果組合最終 URL，若有優惠券則加上 &wt_coupon=優惠券代碼。
使用 Clipboard API 複製連結，若不支援則使用傳統 execCommand 備援。
複製成功會顯示成功提示，失敗則顯示錯誤提示並提供手動複製。

function buildFinalUrl(baseUrl) {
    var coupon = window.prompt('是否要加入優惠券？\n(可留空，直接按確定即可)', '');
    if (coupon === null) return baseUrl;
    coupon = String(coupon || '').trim();
    if (!coupon) return baseUrl;
    var joiner = (baseUrl.indexOf('?') === -1) ? '?' : '&';
    return baseUrl + joiner + 'wt_coupon=' + encodeURIComponent(coupon);
}

$(document).on('click', '.copy-cart-link', function(e) {
    e.preventDefault();
    var button = $(this);
    var baseUrl = button.data('url');
    var originalHtml = button.html();
    if (button.hasClass('copying')) return;
    button.addClass('copying');
    var finalUrl = buildFinalUrl(baseUrl);
    if (navigator.clipboard && window.isSecureContext) {
        navigator.clipboard.writeText(finalUrl).then(function() {
            showCopySuccess(button, originalHtml);
        }).catch(function() {
            fallbackCopyTextToClipboard(finalUrl, button, originalHtml);
        });
    } else {
        fallbackCopyTextToClipboard(finalUrl, button, originalHtml);
    }
});

快速動作連結整合

除了欄位按鈕外，也在商品標題下方的快速動作連結加入「複製購物車連結」，提升操作便利性。此連結同樣帶有商品加入購物車的 URL，並套用相同的 JavaScript 行為。

add_filter('post_row_actions', 'add_copy_link_quick_action', 10, 2);
function add_copy_link_quick_action($actions, $post) {
    if ($post->post_type === 'product') {
        $product_id = (int) $post->ID;
        $site_url = my_copy_cart_site_url();
        $add_to_cart_url = $site_url . '/cart/?add-to-cart=' . $product_id;
        $actions['copy_cart_link'] = '📋 複製購物車連結';
    }
    return $actions;
}

實務應用與優化建議

此功能適合需要快速產生帶優惠券的購物車連結的 WooCommerce 商店管理員，方便推廣或客服回覆。未來可優化：

將網站 URL 改為動態取得，避免硬編碼。
增加複製成功的視覺動畫提升 UX。
支援多種優惠券參數或其他自訂參數。
對於大量商品列表，可考慮優化前端效能。

完整程式碼


                 複製
              ';
    }
}

// 添加 JavaScript 和 CSS
add_action('admin_footer', 'copy_link_admin_script');
function copy_link_admin_script() {
    $screen = get_current_screen();
    if (!$screen || $screen->id !== 'edit-product') {
        return;
    }
    ?>



    
    post_type === 'product') {
        $product_id = (int) $post->ID;

        $site_url = my_copy_cart_site_url();
        $add_to_cart_url = $site_url . '/cart/?add-to-cart=' . $product_id;

        $actions['copy_cart_link'] = '📋 複製購物車連結';
    }
    return $actions;
}

Blocksy 主題 WooCommerce 產品頁新增下載與預覽彈窗實作筆記

小豬 — Thu, 13 Feb 2025 17:14:35 +0000

前言

在 WooCommerce 產品頁面中，若產品包含可下載或預覽的檔案，提供使用者直覺的預覽與下載介面能提升購買體驗。本文適合熟悉 WordPress 主題開發與 WooCommerce 的工程師或自學者，說明如何利用 Blocksy 主題的特定 Hook，在產品頁購物車按鈕下方新增一個彈窗，顯示預覽與下載連結。

新增功能程式碼

透過 blocksy:woocommerce:product-single:add_to_cart:after Action Hook，將彈窗 HTML 結構插入產品頁。以下為關鍵程式碼片段：

add_action('blocksy:woocommerce:product-single:add_to_cart:after', function() {
  global $post;
  echo '';
  echo '';
  echo '';
  echo '';
  echo '×';

  // 預覽連結
  $preview_links = get_post_meta($post->ID, '_preview_links', true);
  if (!empty($preview_links)) {
    echo '';
    foreach ($preview_links as $link) {
      echo '
';
      echo '
';
      echo '
';
      echo '
';
      echo '';
    }
    echo '' . esc_html($link['name']) . ' ' . esc_html($link['date']) . ' Preview';
  } else {
    echo '
No preview files available.';
  }

  // 下載連結（限已購買且登入用戶）
  if (is_user_logged_in() && wc_customer_bought_product('', get_current_user_id(), $post->ID)) {
    echo '
Download file';
    $download_links = get_post_meta($post->ID, '_download_links', true);
    if (!empty($download_links)) {
      echo '';
      foreach ($download_links as $index => $link) {
        echo '
';
        echo '
';
        echo '
';
        echo '
';
        echo '';
      }
      echo '' . esc_html($link['name']) . ' ' . esc_html($link['date']) . ' ';
        echo "";
        echo '';
    } else {
      echo '
No download links available.';
    }
  }

  echo '';
});

此段程式碼會在產品頁購物車按鈕下方插入一個按鈕，點擊後彈出包含預覽與下載連結的彈窗。下載連結僅對已購買且登入的用戶顯示。

新增前端樣式與行為

為了讓彈窗視覺與互動更友善，需要加入 CSS 與 JavaScript。

CSS – 彈窗樣式

.ks_modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.ks_modal-content {
  background-color: #fff;
  padding: 20px;
  margin: 15% auto;
  width: 50%;
  border-radius: 10px;
}

.ks_close {
  float: right;
  font-size: 24px;
  cursor: pointer;
}

JavaScript – 彈窗開關控制

jQuery(document).ready(function($) {
  $('#ks_show_links_modal').on('click', function() {
    $('#ks_links_modal').fadeIn();
  });

  $('.ks_close').on('click', function() {
    $('#ks_links_modal').fadeOut();
  });
});

這段 JS 透過 jQuery 綁定按鈕事件，控制彈窗的顯示與隱藏。

測試與調整

確認產品頁購物車按鈕下方是否出現「Datasheet >」按鈕。
點擊按鈕，檢查彈窗是否正常顯示預覽連結。
測試下載連結顯示條件：
- 未登入或未購買用戶不應看到下載連結。
- 已購買且登入用戶可看到並使用下載按鈕。

完整程式碼

// 在 WooCommerce 產品頁購物車按鈕區塊的下方新增彈窗顯示下載和預覽連結
add_action('blocksy:woocommerce:product-single:add_to_cart:after', function() {
  global $post;
  echo '';
  echo '';
  echo '';
  echo '';
  echo '×';

  // 顯示預覽連結
  echo '
Preview file';
  $preview_links = get_post_meta($post->ID, '_preview_links', true);
  if (!empty($preview_links)) {
    echo '';
    foreach ($preview_links as $link) {
      echo '
';
      echo '
';
      echo '
';
      echo '
';
      echo '';
    }
    echo '' . esc_html($link['name']) . ' ' . esc_html($link['date']) . ' Preview';
  } else {
    echo '
No preview files available.';
  }

  // 顯示下載連結（僅限已購買並登入的用戶）
  if (is_user_logged_in() && wc_customer_bought_product('', get_current_user_id(), $post->ID)) {
    echo '
Download file';
    $download_links = get_post_meta($post->ID, '_download_links', true);
    if (!empty($download_links)) {
      echo '';
      foreach ($download_links as $index => $link) {
        echo '
';
        echo '
';
        echo '
';
        echo '
';
        echo '';
      }
      echo '' . esc_html($link['name']) . ' ' . esc_html($link['date']) . ' ';
        echo "";
        echo '';
    } else {
      echo '
No download links available.';
    }
  }

  echo '';
});

/* 彈窗樣式 */
.ks_modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.ks_modal-content {
  background-color: #fff;
  padding: 20px;
  margin: 15% auto;
  width: 50%;
  border-radius: 10px;
}

.ks_close {
  float: right;
  font-size: 24px;
  cursor: pointer;
}

// 控制彈窗開關
jQuery(document).ready(function($) {
  $('#ks_show_links_modal').on('click', function() {
    $('#ks_links_modal').fadeIn();
  });

  $('.ks_close').on('click', function() {
    $('#ks_links_modal').fadeOut();
  });
});

結論

透過 Blocksy 主題提供的 Hook，結合 WooCommerce 產品頁面，我們能輕鬆新增一個彈窗介面，提供使用者預覽與下載檔案的功能，提升產品資訊的呈現與使用者體驗，特別適合販售技術文件或數位內容的商店。

WooCommerce 會員後台嵌入 Amelia 預約日曆與隱藏管理員選單實作筆記

小豬 — Thu, 06 Feb 2025 10:39:41 +0000

前言

在 WooCommerce 會員後台嵌入 Amelia 預約日曆，可以讓用戶直接查看與管理預約，提升使用體驗。但直接嵌入 WordPress 後台頁面時，會看到不必要的管理員選單與工具列，影響介面整潔度。本文將介紹如何利用 WordPress 的 admin_head 鉤子與 WooCommerce 的會員選單過濾器，達成隱藏管理員元素並新增「我的日曆」選單的功能。

隱藏 WordPress 管理員選單與工具列

當 iframe 載入 WordPress 後台 Amelia 預約頁面時，左側選單、頂部工具列等管理員元素會干擾介面。透過 admin_head 鉤子判斷 URL 是否帶有 iframe=true 參數，動態插入 CSS 隱藏這些元素，並調整內容區域寬度與頁面邊距。

關鍵程式碼片段：

function hide_admin_elements_for_iframe() {
 if (isset($_GET['iframe']) && $_GET['iframe'] == 'true') {
  echo '
';
 }
}
add_action('admin_head', 'hide_admin_elements_for_iframe');

這段程式碼確保只有在 iframe 模式下才隱藏管理員介面元素，避免影響正常管理操作。

在 WooCommerce 會員後台新增「我的日曆」選單

為方便用戶直接在會員中心查看 Amelia 預約日曆，使用 add_rewrite_endpoint 註冊新端點 ameliacustomercalendar，並透過 woocommerce_account_menu_items 過濾器在「我的課程」後新增「我的日曆」選單。

點擊「我的日曆」時，利用 woocommerce_account_ameliacustomercalendar_endpoint 鉤子輸出 iframe，載入 Amelia 預約日曆頁面，並帶入 iframe=true 參數以隱藏管理員元素。

關鍵程式碼片段：

function add_ameliacustomercalendar_to_myaccount_menu() {
 add_rewrite_endpoint('ameliacustomercalendar', EP_ROOT | EP_PAGES);

 add_filter('woocommerce_account_menu_items', function($menu_links) {
  $new_menu_links = [];
  foreach ($menu_links as $key => $label) {
   $new_menu_links[$key] = $label;
   if ($key === 'ameliacustomerpanel') {
    $new_menu_links['ameliacustomercalendar'] = '我的日曆';
   }
  }
  return $new_menu_links;
 });

 add_action('woocommerce_account_ameliacustomercalendar_endpoint', function() {
  echo '';
 });
}
add_action('init', 'add_ameliacustomercalendar_to_myaccount_menu');

測試與驗證

在瀏覽器網址列加入 ?iframe=true，確認 WordPress 管理員選單與工具列是否隱藏。
進入 WooCommerce 會員後台，確認「我的日曆」選單是否出現。
點擊「我的日曆」，檢查 iframe 是否正確載入 Amelia 預約日曆，且無多餘管理員元素。

延伸與常見坑

若使用快取插件，新增端點後可能需要刷新重寫規則（Permalinks）。
iframe 高度可依需求調整，避免出現滾動條。
確保 Amelia 預約系統權限設定允許會員查看。

完整程式碼

function hide_admin_elements_for_iframe() {
 if (isset($_GET['iframe']) && $_GET['iframe'] == 'true') {
  echo '
';
 }
}
add_action('admin_head', 'hide_admin_elements_for_iframe');

function add_ameliacustomercalendar_to_myaccount_menu() {
 add_rewrite_endpoint('ameliacustomercalendar', EP_ROOT | EP_PAGES);

 add_filter('woocommerce_account_menu_items', function($menu_links) {
  $new_menu_links = [];
  foreach ($menu_links as $key => $label) {
   $new_menu_links[$key] = $label;
   if ($key === 'ameliacustomerpanel') {
    $new_menu_links['ameliacustomercalendar'] = '我的日曆';
   }
  }
  return $new_menu_links;
 });

 add_action('woocommerce_account_ameliacustomercalendar_endpoint', function() {
  echo '';
 });
}
add_action('init', 'add_ameliacustomercalendar_to_myaccount_menu');

使用 PHP 記錄 WooCommerce 訂單更新資料結構技術筆記

小豬 — Thu, 09 Jan 2025 12:49:56 +0000

前言

在開發基於 WordPress 的 WooCommerce 網站時，了解訂單資料結構對於客製化功能非常重要。當訂單狀態或詳細資料更新時，能夠即時記錄這些資料有助於除錯與後續分析。本文針對 WooCommerce 訂單更新事件，說明如何使用 PHP 透過鉤子（hook）將訂單資料以 JSON 格式記錄到檔案中。

需求情境

監聽 WooCommerce 訂單更新事件。
獲取訂單的完整詳細資料。
將資料儲存為 JSON 格式，方便後續分析或除錯。

解決方案

利用 WooCommerce 提供的 woocommerce_order_status_changed 鉤子，在訂單狀態變更時觸發自訂函數，取得訂單資料並寫入檔案。

add_action('woocommerce_order_status_changed', 'log_order_data', 10, 4);

function log_order_data($order_id, $old_status, $new_status, $order) {
    $data = [
        'order_id' => $order_id,
        'old_status' => $old_status,
        'new_status' => $new_status,
        'order_data' => $order->get_data() // 獲取訂單詳細資料
    ];

    write_to_log_file($data, 'order_update_log.json');
}

function write_to_log_file($data, $filename = 'meta_data.json') {
    $log_dir = __DIR__ . '/logs'; // 指定記錄檔存放目錄
    if (!file_exists($log_dir)) {
        mkdir($log_dir, 0755, true); // 如果目錄不存在，創建目錄
    }
    $log_file = $log_dir . '/' . $filename;

    // 將資料轉換為 JSON 格式
    $json_data = json_encode($data, JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT);

    // 將 JSON 資料寫入文件（直接覆寫內容）
    file_put_contents($log_file, $json_data);
}

程式碼解說

監聽訂單狀態更新事件 使用 WooCommerce 的 woocommerce_order_status_changed 鉤子，當訂單狀態變更時觸發 log_order_data 函數。
```
add_action('woocommerce_order_status_changed', 'log_order_data', 10, 4);
```
獲取訂單詳細資料 透過 WC_Order 物件的 get_data() 方法取得完整訂單資料，包含客戶資訊、商品清單、付款方式等。
```
'order_data' => $order->get_data()
```
記錄資料至 JSON 檔案 將資料轉換為 JSON 格式，並寫入指定的 logs 目錄下的檔案中，若目錄不存在則自動建立。
```
write_to_log_file($data, 'order_update_log.json');
```

範例輸出

假設訂單狀態從 processing 更新為 completed，記錄的 JSON 資料範例如下：

{
  "order_id": 1234,
  "old_status": "processing",
  "new_status": "completed",
  "order_data": {
    "id": 1234,
    "status": "completed",
    "currency": "USD",
    "total": "99.99",
    "customer_id": 5678,
    "billing": {
      "first_name": "John",
      "last_name": "Doe",
      "email": "john.doe@example.com"
    },
    "line_items": [
      {
        "name": "T-Shirt",
        "quantity": 2,
        "total": "49.99"
      }
    ]
  }
}

適用場景

除錯需求：快速了解 WooCommerce 訂單資料結構，協助定位問題。
數據分析：將記錄的 JSON 資料用於訂單數據分析。
客製化功能開發：根據訂單詳細資料設計特定邏輯。

完整程式碼

add_action('woocommerce_order_status_changed', 'log_order_data', 10, 4);

function log_order_data($order_id, $old_status, $new_status, $order) {
    $data = [
        'order_id' => $order_id,
        'old_status' => $old_status,
        'new_status' => $new_status,
        'order_data' => $order->get_data() // 獲取訂單詳細資料
    ];

    write_to_log_file($data, 'order_update_log.json');
}

function write_to_log_file($data, $filename = 'meta_data.json') {
    $log_dir = __DIR__ . '/logs'; // 指定記錄檔存放目錄
    if (!file_exists($log_dir)) {
        mkdir($log_dir, 0755, true); // 如果目錄不存在，創建目錄
    }
    $log_file = $log_dir . '/' . $filename;

    // 將資料轉換為 JSON 格式
    $json_data = json_encode($data, JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT);

    // 將 JSON 資料寫入文件（直接覆寫內容）
    file_put_contents($log_file, $json_data);
}

利用 WordPress 實現 WooCommerce 與 Ragic 訂單資料自動同步技術筆記

小豬 — Tue, 31 Dec 2024 03:19:23 +0000

前言

在電子商務系統中，訂單資料的管理與整合是提升營運效率的重要環節。WooCommerce 作為 WordPress 上熱門的電商插件，能有效管理訂單，但若要進一步分析與整合資料，將訂單同步至 Ragic 雲端資料庫是一個實用方案。本文適合具備基礎 PHP 與 WordPress 開發經驗的工程師或自學者，說明如何自動將 WooCommerce 訂單資料同步至 Ragic。

為什麼要同步 WooCommerce 訂單至 Ragic？

Ragic 是一款靈活的雲端資料庫工具，方便用戶集中管理與分析業務資料。透過自動同步 WooCommerce 訂單資料，可以：

減少手動輸入，提升工作效率
降低人為錯誤，確保資料正確性
集中管理訂單數據，方便後續分析與決策

教學步驟

1. 啟用訂單完成後的同步觸發

利用 WooCommerce 的鉤子 woocommerce_order_status_completed，當訂單狀態變更為「已完成」時觸發同步函式：

add_action('woocommerce_order_status_completed', 'sync_order_to_ragic');

2. 擷取 WooCommerce 訂單資料

使用 WooCommerce API 取得訂單詳細資訊，包括用戶姓名、電話、地址及訂單商品：

$order = wc_get_order($order_id);
$email = $order->get_billing_email();
$first_name = $order->get_billing_first_name();
$last_name = $order->get_billing_last_name();
$phone = $order->get_billing_phone();
$address = $order->get_billing_address_1() . ', ' . $order->get_billing_city() . ', ' . $order->get_billing_state() . ', ' . $order->get_billing_postcode();

3. 整理訂單商品資料格式

將訂單中每項商品名稱、數量與價格組合成字串，方便傳輸：

$items = [];
foreach ($order->get_items() as $item) {
  $items[] = $item->get_name() . ' x ' . $item->get_quantity() . ' (' . $item->get_total() . ')';
}
$items_string = implode('; ', $items);

4. 組織符合 Ragic API 欄位結構的資料

根據 Ragic 表單欄位 ID，將資料映射成陣列格式：

$ragic_data = [
  '1000686' => '網站',
  '1000595' => $first_name . ' ' . $last_name,
  '1000596' => $phone,
  '1000563' => $address,
  '1000634' => $email,
  '1000597' => $items_string,
  '1000610' => $order->get_total(),
  '1000594' => $order->get_date_created()->date('Y-m-d H:i:s'),
];

5. 使用 Ragic API 同步資料

透過 wp_remote_post 發送 POST 請求，將資料以 JSON 格式送至 Ragic：

$response_ragic = wp_remote_post(
  $ragic_url,
  [
    'method' => 'POST',
    'headers' => [
      'Content-Type' => 'application/json',
      'Authorization' => 'Basic YOUR_RAGIC_API_CREDENTIAL',
    ],
    'body' => json_encode($ragic_data),
  ]
);

6. 檢查 API 回應並記錄錯誤

確保同步成功，並在失敗時記錄錯誤訊息以利除錯：

if (is_wp_error($response_ragic)) {
  error_log('Ragic 同步失敗：' . $response_ragic->get_error_message());
} else {
  $status_code_ragic = wp_remote_retrieve_response_code($response_ragic);
  $body_ragic = wp_remote_retrieve_body($response_ragic);

  if ($status_code_ragic == 200 || $status_code_ragic == 201) {
    error_log('Ragic 同步成功：' . $body_ragic);
  } else {
    error_log("Ragic API 回應錯誤 (狀態碼: $status_code_ragic)：$body_ragic");
  }
}

注意事項

API Key 安全性：避免將 API Key 明文寫入程式碼，建議使用環境變數或安全存取方式。
欄位對應檢查：確認 Ragic 表單欄位 ID 與程式碼中對應正確，避免資料錯置。
測試與效能優化：正式上線前充分測試同步流程，確保資料完整且效能穩定。

完整程式碼

add_action('woocommerce_order_status_completed', 'sync_order_to_ragic');

function sync_order_to_ragic($order_id) {
  $order = wc_get_order($order_id);
  $email = $order->get_billing_email();
  $first_name = $order->get_billing_first_name();
  $last_name = $order->get_billing_last_name();
  $phone = $order->get_billing_phone();
  $address = $order->get_billing_address_1() . ', ' . $order->get_billing_city() . ', ' . $order->get_billing_state() . ', ' . $order->get_billing_postcode();

  $items = [];
  foreach ($order->get_items() as $item) {
    $items[] = $item->get_name() . ' x ' . $item->get_quantity() . ' (' . $item->get_total() . ')';
  }
  $items_string = implode('; ', $items);

  $ragic_data = [
    '1000686' => '網站',
    '1000595' => $first_name . ' ' . $last_name,
    '1000596' => $phone,
    '1000563' => $address,
    '1000634' => $email,
    '1000597' => $items_string,
    '1000610' => $order->get_total(),
    '1000594' => $order->get_date_created()->date('Y-m-d H:i:s'),
  ];

  $ragic_url = 'https://www.ragic.com/your_ragic_url'; // 請替換為實際 Ragic API URL

  $response_ragic = wp_remote_post(
    $ragic_url,
    [
      'method' => 'POST',
      'headers' => [
        'Content-Type' => 'application/json',
        'Authorization' => 'Basic YOUR_RAGIC_API_CREDENTIAL', // 請替換為實際授權資訊
      ],
      'body' => json_encode($ragic_data),
    ]
  );

  if (is_wp_error($response_ragic)) {
    error_log('Ragic 同步失敗：' . $response_ragic->get_error_message());
  } else {
    $status_code_ragic = wp_remote_retrieve_response_code($response_ragic);
    $body_ragic = wp_remote_retrieve_body($response_ragic);

    if ($status_code_ragic == 200 || $status_code_ragic == 201) {
      error_log('Ragic 同步成功：' . $body_ragic);
    } else {
      error_log("Ragic API 回應錯誤 (狀態碼: $status_code_ragic)：$body_ragic");
    }
  }
}