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

本篇文章更新時間：2019/02/16
如有資訊過時或語誤之處，歡迎使用 Contact 功能通知。
一介資男的 LINE 社群開站囉！歡迎入群聊聊～

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

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

想像表單填一填，選好一些選項後按下確定直接進金流付款的操作，是不是很像「Landing Page」的作法呢？沒錯，差不多就是這樣。但當你已經使用 WordPress 與 WooCommerce 這套銷售組合後，應該不會還想自己在硬幹一套購物車模組以及金流模組吧？

如果剛好有一樣的想法且在找這類解法的人，本篇客製化訂單以及將結帳流程調整就很適合你ＸＤ

首先

前置需求：

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

作法

不論是單頁式的處理或是一樣分成三頁（選購 -> 確認 -> 結帳 階段）都好，UX 設計架構也非這裡的討論主軸。

建立訂單前至少商品已經先要存在，並可以透過簡單的作法讓消費者選擇，其中一個做法提供如下：

<?php
$args = array('post_type' => 'product', 'posts_per_page' => -1, 'product_cat' => '分類名稱', 'orderby' => 'ASC');
$loop = new WP_Query($args);
$dropdownlist = '<select id="cate_name">';
while ($loop->have_posts()) {
    $loop->the_post();
    $_product = wc_get_product($loop->post->ID);
    $dropdownlist .= '<option value="' . $loop->post->ID . '" data-price="' . $_product->get_price() . '">' . $loop->post->post_title . '</option>';
}
$dropdownlist .= '</select>';
wp_reset_query();
echo '分類名稱：' . $dropdownlist;

Gist: Here

於表單中下拉式選擇商品的下拉選單實作方式如上。

當把表單拼湊完整，消費者很清楚、簡單的選購完成後，在送出 POST 給收單頁的時候，實作如下：

<?php
//準備好或接收要記錄的欄位資訊
$address = array(
    'first_name' => '某',
    '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