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

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

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

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

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

首先

前置需求:

  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

Facebook 外掛整合

Share: