[WooCommerce] 結帳頁面先選擇運送方式的做法

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

其實這需求也不是第一次碰到人問，就是有人會想要把「購物車（Cart）」頁面給拔除，整合到結帳頁面來縮短結帳流程。

示意圖如下，就是先選擇運送方式後，再來輸入對應需要的欄位。一個頁面搞定購買商品預覽和結帳。

WooCommerce 的做法就是把功能搬過來結帳頁面用，程式碼片段如下：

function action_woocommerce_before_checkout_form($wccm_autocreate_account) {
    wc_cart_totals_shipping_html();
    woocommerce_shipping_calculator('選取運送方式');

};
add_action('woocommerce_before_checkout_form', 'action_woocommerce_before_checkout_form', 10, 1);

function woocommerce_shipping_calculator_scripts() {
    if (is_checkout()) {
        if (wp_script_is('wc-cart', 'registered') && !wp_script_is('wc-cart', 'enqueued')) {
            wp_enqueue_script('wc-cart');
        }
    }
}
add_action('wp_enqueue_scripts', 'woocommerce_shipping_calculator_scripts');

但這只是很雛形的開始，實際上大概還要做的事是把 wc_cart_totals_shipping_html() 方法繼承與改寫，輸出新的樣板結構（cart-shipping.php），控制選取事件與後端程式互動。

如果還是需要先檢視購物車項目完全取代購物車頁面，像是調整商品數量等等的話，那又要把購物車項目檢視那塊也搬過來了。

這類型改結帳流程的活都是費時費工，不在正常建議選項ＸＤ