文章分類／WordPress外掛開發

WooCommerce 單頁結帳的作法實記

1 瀏覽

2025-07-27 更新

由於預設的Woocomerce會有購物車頁／結帳頁，為了增加轉換率所以需要讓它自動跳轉到結帳頁。避免用戶的動線又多了一頁的時間成本，但處理不好就會造成重新轉址的無窮回圈（即用戶會遇到異常！！）

為什麼選擇單頁結帳？

1. 提升轉換率

減少頁面跳轉，降低客戶流失率
簡化購買流程，提高用戶體驗
減少載入時間，避免客戶等待

2. SEO 優勢

集中頁面權重於結帳頁面
減少重複內容問題
提升頁面載入速度評分

3. 移動端友善

減少手機用戶的操作步驟
降低網路不穩定造成的頁面載入失敗風險

技術實現方案

核心策略：重定向攔截

我們的解決方案不是完全移除購物車頁面，而是智慧重定向（即自動幫客戶轉址）：

避免用戶開啟cart頁面的轉址

<?php
// 購物車頁面自動跳轉到結帳頁面
public function enqueue_cart_redirect_script() {
    if ( function_exists('is_cart') && is_cart() ) {
        wp_enqueue_script(
            'orca-cart-redirect',
            PLUGIN_URL . 'assets/js/cart-redirect.js',
            array('jquery'),
            PLUGIN_VERSION,
            false
        );
    }
}

JavaScript 前端處理

// cart-redirect.js
jQuery(document).ready(function($) {
    // 立即重定向到結帳頁面
    window.location.href = woocommerce_params.checkout_url;
});

解決移除商品重定向問題

在結帳頁面移除商品時，WooCommerce 預設會跳回購物車頁面。我們需要攔截這個行為：

<?php
public function intercept_cart_redirects( $location, $status ) {
    // 檢查是否為移除商品的請求
    if ( isset( $_GET['remove_item'] ) && isset( $_GET['_wpnonce'] ) ) {
        $cart_item_key = sanitize_text_field( $_GET['remove_item'] );
        
        if ( wp_verify_nonce( $_GET['_wpnonce'], 'woocommerce-cart' ) ) {
            // 攔截重定向到購物車的嘗試
            if ( $this->is_cart_url( $location ) ) {
                if ( $this->is_checkout_context() ) {
                    return wc_get_checkout_url(); // 重定向回結帳頁面
                }
            }
        }
    }
    
    return $location;
}

關鍵技術細節

1. 使用原生 WooCommerce 機制

為什麼不用 AJAX？

WooCommerce 的原生移除商品流程是基於頁面重新載入的：

更穩定：避免 nonce 過期問題
更相容：不破壞 WooCommerce 原生功能
更簡單：減少複雜的前端邏輯

2. 後端重定向攔截

<?php
private function is_cart_url( $url ) {
    $cart_urls = array(
        wc_get_cart_url(),
        home_url( '/cart' ),
        home_url( '/cart/' )
    );
    
    foreach ( $cart_urls as $cart_url ) {
        if ( strpos( $url, $cart_url ) !== false ) {
            return true;
        }
    }
    
    return false;
}

3. 購物車空白處理

<?php
// 防止購物車清空後跳轉
add_filter( 'woocommerce_checkout_redirect_empty_cart', '__return_false' );

4. 處理邊緣情況

<?php
public function handle_item_removed_in_checkout( $cart_item_key, $cart_instance ) {
    if ( $this->is_checkout_context() ) {
        if ( WC()->cart->is_empty() ) {
            // 購物車為空時的處理邏輯
            // WooCommerce 會自動顯示適當的訊息
        }
    }
}

5. 整合所有的hook

// 防止購物車清空後跳轉
    add_filter( 'woocommerce_checkout_redirect_empty_cart', '__return_false' );
    
    // 攔截重定向
    add_filter( 'wp_redirect', array( $this, 'intercept_cart_redirects' ), 10, 2 );
    
    // 載入前端腳本
    add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_cart_redirect_script' ) );

接著你就可以把這些sample封裝到自已的外掛裡了。