[WooCommerce] 客製化訂單與結帳流程的作法

本篇文章更新時間:2025/05/07
如有資訊過時或語誤之處,歡迎使用 Contact 功能通知。
一介資男的 LINE 社群開站囉!歡迎入群聊聊~
如果本站內容對你有幫助,歡迎使用 BFX Pay 加密貨幣新台幣 贊助支持。


非單純產品銷售的案例其實不少,最多人詢問的莫過於「紙娃娃系統」,就是針對一個網站上客製化功能所組合/搭配出能實現自己獨一無二想法商品的系統。

今天的作法只能說是那套系統的後段,前部分的客製化商品就不再本篇的討論範圍內囉。

想像表單填一填,選好一些選項後按下確定直接進金流付款的操作,是不是很像「Landing Page」的作法呢?沒錯,差不多就是這樣。

但當你已經使用 WordPress 與 WooCommerce 這套銷售組合後,應該不會還想自己在硬幹一套購物車模組以及金流模組吧? 如果剛好有一樣的想法且在找這類解法的人,本篇客製化訂單以及將結帳流程調整就很適合你XD

首先

前置需求:

  1. WordPress 樣板架構概念
  2. WooCommerce 操作與開發經驗(設定過、處理過金流與結帳)

作法

不論是單頁式的處理或是一樣分成三頁(選購 -> 確認 -> 結帳 階段)都好,UX 設計架構也非這裡的討論主軸。 建立訂單前至少商品已經先要存在,並可以透過簡單的作法讓消費者選擇,其中一個做法提供如下:

 'product', 'posts_per_page' => -1, 'product_cat' => '分類名稱', 'orderby' => 'ASC');
$loop = new WP_Query($args);
$dropdownlist = '';
wp_reset_query();
echo '分類名稱:' . $dropdownlist;

Gist: Here

於表單中下拉式選擇商品的下拉選單實作方式如上。 當把表單拼湊完整,消費者很清楚、簡單的選購完成後,在送出 POST 給收單頁的時候,實作如下:

 '某',
    'last_name' => '某某',
    'company' => '一介資男',
    'email' => '[email protected]',
    'phone' => '0912123123',
    'address_1' => '106台北市大安區',
    'address_2' => '巴拉路巴拉號',
    'city' => '台北',
    'state' => '',
    'postcode' => '106',
    'country' => 'TW',
);
//建立一張空的訂單
$order = wc_create_order();
// The add_product() function below is located in /plugins/woocommerce/includes/abstracts/abstract_wc_order.php
$order->add_product(get_product(202), 1); // 202 => 產品編號, 1 => 數量
$order->add_product(get_product(204), 2); // 還有其他加入購物車的就一併加一加
// 設定地址(付款人、收貨人)
$order->set_address($address, 'billing');
$order->set_address($address, 'shipping');
// 設定付款方式
$payment_gateways = WC()->payment_gateways->payment_gateways();
$order->set_payment_method($payment_gateways['金流註冊時的代稱(slug)']);
// 計算訂單
$order->calculate_totals();
// 根據選擇地金流去觸發結帳
do_action('woocommerce_receipt_' . $order->get_payment_method(), $order->id);

Gist: Here

收單頁接收選購頁表單送出之消費者資訊以及商品資訊後,透過上述這一系列操作就能把訂單建立以及觸發 WooCommerce 金流設定前往金流結帳,後續就與一般商品透過線上商店買賣無異,如此客製化卻又還能跟系統完美的整合,相信絕對比自己硬幹一個好太多拉~

後記

其實上面程式碼裡,除了金流模組註冊時的代稱(slug)要翻一下金流模組當時寫的程式碼之外,都已經可以直接套用了。補一些銷售流程中的邏輯,切分一下前後端,很快就能搞定。 ### 參考

Ref: Create a WooCommerce Order Dynamically


Share:

作者: Chun

資訊愛好人士。主張「人人都該為了偷懶而進步」。期許自己成為斜槓到變進度條 100% 的年輕人。[///////////____36%_________]

參與討論

3 則留言

  1. 自動引用通知: [WooCommerce] 片段(fragments)互動程式設計要點 - 一介資男
  2. 自動引用通知: [WooCommerce] PHP 動態建立或更新商品的方法 | 一介資男
  3. 自動引用通知: [WooCommerce] PHP 程式建立訂單與加入收費項目 Line item 的方法 – 一介資男

發佈留言

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


文章
Filter
Apply Filters
Mastodon