0%

正威網路行銷工作室,專注於基隆、台北與全台客製化網頁設計,提供專業 RWD 響應式、SEO 搜尋引擎優化、品牌形象設計與網站維護託管服務。

搜尋文章
聯絡資訊
地址基隆市仁二路 220 號 5 樓
追蹤我們

WooCommerce 加入購物車後直接到結帳頁

WooCommerce 加入購物車後直接到結帳頁 封面

WooCommerce 預設的購買流程是:商品頁按「加入購物車」→ 留在原頁(或到購物車頁)→ 再按「前往結帳」→ 結帳。

如果你的網站商品不多,客人通常一次只買一樣(例如課程、預約、單品販售),中間的購物車頁就是多出來的一步,每多一步就有人離開。這篇讓客人按下按鈕之後直接到結帳頁,按鈕文字也改成「立即購買」。

程式碼

放在子佈景主題的 functions.php,或用 Code Snippets 這類外掛新增:

PHP
// 加入購物車之後,直接前往結帳頁(取代原本的購物車頁)
add_filter( 'woocommerce_add_to_cart_redirect', function () {
	return wc_get_checkout_url();
} );

// 按鈕文字改成「立即購買」:商品頁和商品列表
add_filter( 'woocommerce_product_single_add_to_cart_text', function () {
	return '立即購買';
} );
add_filter( 'woocommerce_product_add_to_cart_text', function ( $text, $product ) {
	return $product->is_type( 'simple' ) && $product->is_purchasable() && $product->is_in_stock() ? '立即購買' : $text;
}, 10, 2 );
  • woocommerce_add_to_cart_redirect:加入購物車之後要跳到哪裡。回傳 wc_get_checkout_url(),就是結帳頁的網址。
  • woocommerce_product_single_add_to_cart_text:商品頁按鈕的文字。
  • woocommerce_product_add_to_cart_text:商品列表(商店頁、分類頁)按鈕的文字。只改「一般商品、可以購買、有庫存」的按鈕;有規格要選的商品(例如尺寸、顏色),按鈕本來是「選擇選項」,維持不變。

還要勾一個設定

加了程式碼之後,商品頁的按鈕會直接到結帳頁,但商店頁、分類頁的按鈕不會,按了還是留在原頁。

原因是商品列表的按鈕預設用「不換頁」的方式加入購物車(AJAX),根本沒有換頁,篩選器也就沒機會發揮作用。到 WooCommerce → 設定 → 商品,在「加入購物車行為」勾選「成功加入後轉至購物車頁面」。勾了之後,列表的按鈕加入購物車後也會跳轉;而跳轉的目的地,同樣會被上面的程式碼改成結帳頁。

實際測試的結果

我們在測試網站,把「有沒有加程式碼」「設定有沒有勾」「兩套佈景主題」「商品頁和商店頁」排列組合,16 種情況都按過一次:

沒加程式碼

  • 設定沒勾:商品頁、商店頁按了都留在原頁。
  • 設定有勾:都跳到購物車頁。

加了程式碼

  • 設定沒勾:商品頁跳到結帳頁;商店頁還是留在原頁。
  • 設定有勾:商品頁、商店頁都跳到結帳頁。
  • 兩種情況的按鈕都顯示「立即購買」,區塊佈景主題的商品列表按鈕也一樣。

Twenty Twenty-Five(區塊佈景主題)和 Twenty Twenty-One(傳統佈景主題)的結果完全相同。

另一種做法:「立即購買」連結

不想改整個網站的流程,只想在某個活動頁放一個「立即購買」按鈕,直接用網址就可以:

純文字
https://你的網址/checkout/?add-to-cart=商品編號

客人點了會把商品加入購物車,直接打開結帳頁。測試時打開這個網址,購物車裡有 1 件商品、停在結帳頁;WooCommerce 會把網址後面的 ?add-to-cart= 拿掉,所以重新整理頁面也不會變成 2 件。

商品編號在 商品 → 全部商品 的列表,滑鼠移到商品名稱上就會顯示「ID:數字」。網站的結帳頁網址如果不是 /checkout/,換成你自己的結帳頁網址。

使用時要注意

  • 客人想一次買好幾樣時,直接結帳反而不方便:每買一樣就被帶去結帳頁,要再回頭找下一樣。商品多、常常一次買好幾件的網站,建議保留購物車頁。
  • 結帳頁不能改數量、刪商品。測試的區塊結帳頁,訂單摘要只顯示商品和金額,沒有數量欄位。客人想多買一件或刪掉,要回到購物車頁改,所以網站上方的購物車圖示要留著,或在結帳頁附近加一個「回購物車修改」的連結。
  • 改完之後實際下一張測試訂單,從商品頁、商店頁、活動頁的連結各走一次流程。

延伸閱讀

購買流程每少一步,成交就多一點機會。正威網路行銷是 25 年經驗的基隆網頁設計工作室,購物網站會依你的商品和客人的買法調整流程,台北與全台客戶也歡迎來聊聊。

分享這篇文章

返回文章列表更多「Wordpress代碼教學」文章

發表留言

還沒有人留言,歡迎第一個分享你的想法或問題。留言經審核後才會顯示,Email 不會公開。

讓我們一起打造
您的專屬網站!