WooCommerce 自訂運送付款條件 ,客製化結帳流程外掛教學

WooCommerce 自訂運送付款條件 :

1. 設定 WooCommerce 付款項目顯示條件

2. 加入 WooCommerce 運送項目顯示條件

WooCommerce 自訂運送付款條件 主要是在修改預設的付款與運送顯示方式,在本篇教學中透過安裝 Conditional Shipping and Payments,就能夠讓每一種付款與運送方式能根據使用者結帳時的選擇對應顯示,比如說當顧客消費未達免運費標準,且選擇以銀行轉帳付款,那麼在購物車及結帳頁面就 “只會”  顯示銀行轉帳與必須支付運費的選項,不會再顯示其他無關的項目,讓結帳流程更加一目瞭然,增加顧客下單成功機會。

本篇教學所介紹的外掛是 Woocommerce 官方販售的 WordPress 外掛,如果要使用本篇文章所說明的功能,必須要到 Woocommerce 官網購買下載並安裝在網站上,鵠學苑本身也是自行購買使用才寫出此篇教學,如果你選擇購買外掛,鵠學苑不會得到任何利潤或費用,也沒有為此外掛做任何背書與保證,只是單純介紹此外掛功能與分享操作方式而已,這一點請務必注意。

WooCommerce 下載點:https://tw.wordpress.org/plugins/woocommerce/

Conditional Shipping and Payments 外掛介紹:https://woocommerce.com/products/conditional-shipping-and-payments/

WooCommerce 自訂運送付款條件說明文檔:Conditional Shipping and Payments

• 設定 WooCommerce 付款項目顯示條件

第一步:進入到上方提供的連結,可以使用信用卡購買並下載外掛,安裝於網站上。

WooCommerce 自訂運送付款條件

第二步:安裝完成後在 WooCommerce  設定中會多出 Restrictions 頁籤,就是設定付款及運費的位置。

WooCommerce 自訂運送付款條件

第三步:先看看在還沒設定前 WooCommerce 預設的顯示方式,假如在購物車中點選貨到付款。

WooCommerce 自訂運送付款條件

第四步:在結帳頁面會同時顯示銀行轉帳與貨到付款兩種結帳方式,筆者想做的是當顧客選擇貨到付款時,只顯示貨到付款的結帳方式。

WooCommerce 自訂運送付款條件

第五步:在 Restrictions 中選擇 Payment Gateways,接者點選 Add Restrictions。

WooCommerce 自訂運送付款條件

第六步:新增一個條件名稱為貨到付款,這裡名稱可以自由輸入,不一定要按照下圖顯示的文字,在 Exclude Gateways 中選擇貨到付款。

WooCommerce 自訂運送付款條件

第七步:會在下方條件中選擇 Shipping Method 。

WooCommerce 自訂運送付款條件

第八步:條件算式選擇 is ,並將銀行轉帳兩個運送方式加入,完成後點選儲存修改。

WooCommerce 自訂運送付款條件

第九步:以同樣的方式加入銀行轉帳顯示條件。

WooCommerce 自訂運送付款條件

第十步:完成後點選不同運送選項就會只顯示對應的付款方式。

WooCommerce 自訂運送付款條件

• 加入 WooCommerce 運送項目顯示條件

 

第一步:運送選項設定方式基本上與付款選項一樣,但首先要先確凳網站啟用的運送方式有哪些,下圖筆者簡單將運送方式區分為四種。

WooCommerce 自訂運送付款條件

第二步:在預設的狀態下,每次結帳時都會顯示所有的運送選項。

WooCommerce 自訂運送付款條件

第三步:進入到 Restrictions 選擇 Shipping Methods ,同樣點選下圖標示的按鈕。

WooCommerce 自訂運送付款條件

第四步:新增一個屬於需運費的選項,在 Exclude Methods 將免運費的兩個項目加入。

WooCommerce 自訂運送付款條件

第五步:在 Conditions 中選擇 Cart Total 小於 1000 。

WooCommerce 自訂運送付款條件

第六步:完成設定後點選儲存修改。

WooCommerce 自訂運送付款條件

第七步:當金額低於 1000 時,只會顯示需要加運費的運送方式。

WooCommerce 自訂運送付款條件

第八步:以同樣的方式設定免運費。

WooCommerce 自訂運送付款條件

第九步:同樣的當運費大於 1000 時就只會顯示免運費項目。

WooCommerce 自訂運送付款條件

結語:

WooCommerce 自訂運送付款條件 是相對應的,如果説設定了免運費顯示條件,就必須也要設當有運費時的顯示條件,如果只設定單一條件就不會正確顯示所需條件,這一點請注意到。

今天的教學到這裡告一段落了,不要忘記在右側訂閱鵠學苑電子報,確保收到最新 WordPress 教學文章,如果有網頁設計相關需求,或者想了解最新網站知識,也可以到 鵠崙設計 做線上免費諮詢喔!我們下次的教學見~

WooCommerce 教學相關文章:

WooCommerce 商品圖片設定 – 使用 Product Image Flipper 外掛自動切換圖片

WooCommerce 自訂郵件樣式 – YITH Email Templates 外掛教學

WooCommerce 新增訂單狀態外掛教學,提升訂單管理效率

WooCommerce 免運費設定 – Advanced Free Shipping 外掛教學

WooCommerce 訂單匯出 外掛教學,自訂區間條件及選擇檔案格式

WooCommerce 詢價車 – YITH Request A Quote 外掛設定教學

WooCommerce 預訂商品教學 – Pre-Orders 外掛加入預訂服務

網站架設知識推薦閱讀:

Elementor 網頁編輯器 突破 300 萬下載次數,最受歡迎的外掛!

Google FAQ 結構化資料啟用,讓問與答在搜尋結果中直接呈現

Google 演算法更新,使用者搜尋後將出現多樣性的網站內容

分享在 facebook
Facebook
分享在 google
Google+
分享在 skype
Skype
分享在 pinterest
Pinterest
分享在 email
Email
鵠學苑

鵠學苑

我們是由一群熱愛 WordPress 網站架設的同好所組成的團隊,希望可以將這套 頂尖的 CMS 管理系統推廣給想要架站的朋友們,並且能夠在過程中互相交流心得,讓網站架設過程變得更有效率!

訂閱電子報

立即訂閱鵠崙設計(鵠學苑)!我們將不定期發送架站教學文章、最新網站版型介紹以及網頁設計最優惠價格!

熱門文章

最新文章

相關文章

標籤雲

Sign up for our Newsletter

Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit

Scroll to Top