WooCommerce 購物網站的免運費機制建議

利用滿多少訂單金額，就提供該筆訂單免運費的模式，是一種鼓勵消費者多添購商品同時也能提高銷售量的雙贏做法，然而在 WooCommerce 的內建設定裡，當然也不會漏掉這個部份。

底下這張截圖，是結帳頁面中的金額總計區塊，如果是 WooCommerce 的使用者，對於這個畫面應該不陌生，但對於正要結帳的消費者，很可能就會造成一些問題了。

WooCoomerce 金流結帳付款區塊 — WooCoomerce 結帳付款區塊

有發現免運費是排在其它運費的最下面嗎? 如果消費者在結帳時沒注意，以為在商店裡有看見滿額免運費的公告，就以為結帳時訂單會自動把運費給扣除，那他就~~~會有很高的機會選錯運送方式，然後結局演變成浪費大家寶貴的時間，回頭處理退運費的瑣事，但如果你覺得這樣也沒差，趁機還能和消費者多一些溝通的機會，真這樣想的話請你快點關掉這篇文章，去 FB 上找些有趣的事或去追尋小確幸吧。

另一種情況是消費者自己會發現免運費的選項，但還需要移動他尊貴的手指去多點滑鼠一下選擇免運費，像這樣心地善良又細心的消費者已經是稀有動物可遇不可求，也別太期望大多數會到你網站上購物的人都這麼精明，這裡沒有半點是指其它人都是笨蛋的意思，因為不管任何設計得再好的網站，還是都有可能夾雜著錯誤的元素藏在細節裡，而且那些元素還有可能會衍生出奇怪的問題來。

消費者並不是網頁設計師或網站管理員，要讓他在瀏覽網站時，快速地清礎了解商店的所有運作模式並不容易，就算網站設計得再簡單，永遠還是有會遇到障礙的訪客，更何況有些網站的設計是為了迎合老闆的口味，而不是從消費者的立場和觀點所出發的。

回到本篇的主題上，或許有些站長會像下面截圖裡的做法一樣，把免運費的選項移到最上層來避免問題產生，雖然這種方式是可以被接受的，但還請算一下共有多少個運送選項在裡頭?

WooCoomerce 金流結帳付款區塊移動免運費 — WooCoomerce 結帳付款區塊(移動免運費)

4個? 不! 那些只是為了這篇文章而做的展示設定而已，如果你的商店提供更多種的選項呢? 這樣的顯示方式還有另外一個缺點，就是會不經意地營造出，若消費者想多付運費也可以的觀感。

要去除上敘所有疑慮的最佳方法，就是照下面截圖顯示的一樣，自動偵測結帳金額並且選擇免運費，當訂單滿額時，一率刪除其它收費的運送選項。倘若商店都是銷售高價位的商品，則建議當個完全免運費的商店，這樣就可避免掉所有和運費相關的問題。

WooCoomerce 建議設定金流結帳付款區塊 — WooCoomerce 結帳付款區塊的建議設定

自動偵測免費運送的設定方法

打開主題中的 functions.php
將下方的程式片段碼貼入後存檔

更新 for WC 2.6+

/**
 * Hide shipping rates when free shipping is available.
 * Updated to support WooCommerce 2.6 Shipping Zones.
 *
 * @param array $rates Array of rates found for the package.
 * @return array
 */
add_filter( 'woocommerce_package_rates', 'hide_shipping_when_free_is_available', 100 );
function hide_shipping_when_free_is_available( $rates ) {
	$free = array();

	foreach ( $rates as $rate_id => $rate ) {
		if ( 'free_shipping' === $rate->method_id ) {
			$free[ $rate_id ] = $rate;
			break;
		}
	}

	return ! empty( $free ) ? $free : $rates;
}

for WC 2.5

/**
 * woocommerce_package_rates is a 2.1+ hook
 */
add_filter( 'woocommerce_package_rates', 'hide_shipping_when_free_is_available', 10, 2 );
 
/**
 * Hide shipping rates when free shipping is available
 *
 * @param array $rates Array of rates found for the package
 * @param array $package The package array/object being shipped
 * @return array of modified rates
 */
function hide_shipping_when_free_is_available( $rates, $package ) {
 	
 	// Only modify rates if free_shipping is present
  	if ( isset( $rates['free_shipping'] ) ) {
  	
  		// To unset a single rate/method, do the following. This example unsets flat_rate shipping
  		unset( $rates['flat_rate'] );
  		
  		// To unset all methods except for free_shipping, do the following
  		$free_shipping          = $rates['free_shipping'];
  		$rates                  = array();
  		$rates['free_shipping'] = $free_shipping;
	}
	
	return $rates;
}

示範影片

當然，別忘了也還要在 WooCommerce 的後台，設定免運費的金額限制 (下圖)，少了這個步驟的話，就連免運費的選項都不會出現喔。

設定路徑: 設定 > 運送方式 > 免運費

請記得一個重點，把商店的結帳流程簡化，儘量設計一個越快、越容易結帳的方式越好，最好是能把消費者帶到另一個獨立的結帳頁面，把頁首和頁尾和其它能點擊的選單和連結都拿掉，別讓消費者在結帳的時候分心，這樣子就可以縮小掉單的機會。

39 thoughts on “WooCommerce 購物網站的免運費機制建議”

小幫手
2015-06-05

這個方法真的很棒台灣有你真好
Nel Tseng
2015-06-06

謝謝，但你說得太誇張了點?
高啟峰
2015-06-06

我碰到的是另一個煩惱！有些商品要運費，有些不要，變成要運費和不要運費的都會跑出來。有時候該商品要運費，但是客人會去選免運費，不知道怎麼解決！
1. Nel Tseng
  2015-06-06
  
  Hi, 只要能設定好運送級距就能解決了。
  1. 高啟峰
    2015-06-29
    
    每家運費又不一樣耶
    1. Nel Tseng
      2015-06-29
      
      如果需要客制化的話，請來信諮詢，謝謝。
IIWIF
2015-07-13

感謝你解決了我的問題這篇講的好清楚謝謝
我想請問另一個問題,目前我的woocommerce的商品頁面，畫面左上角提供的商品排序(依預設，依熱銷度，依價格高到低…等) ，這個下拉選單沒有作用，不管我選哪一個畫面上的商品排序都沒有改
不知道問題是出在哪裡
謝謝
1. Nel Tseng
  2015-07-13
  
  依之前 UTF-8 的問題推估，應該是安裝 WordPress 時有些問題，如果沒先解決的話，之後不論是 WooCommerce 或是使用其它外掛時，都會持續出現奇怪的問題。
  1. IIWIF
    2015-07-13
    
    你好你所說的UTF8問題現在是否還能修正
    謝謝
    1. Nel Tseng
      2015-07-13
      
      有兩個地方要檢查，一是 wp-config.php 裡，有沒有下列這行:
      define(‘DB_COLLATE’, ‘utf8_unicode_ci’);
      
      二是 PHPMyAdmin 的首頁中，查看編碼是不是 utf8_unicode_ci
      1. IIWIF
        2015-07-13
        
        你好檢查過
        
        wp-config.php裡面有該行程式碼
        
        PHPMyAdmin的首頁顯示編碼是utf8_general_ci
        
        所以這樣是要把utf8_general_ci改為tf8_unicode_ci嗎
        
        謝謝
      2. Nel Tseng
        2015-07-13
        
        不用， utf8_general_ci 也是可以的。
      3. Nel Tseng
        2015-07-13
        
        商品排序的連結是/?page_id=589&orderby=price，但點擊後會自動跳回 /?post_type=product
      4. IIWIF
        2015-07-13
        
        你好所以問題也是出在網址像之前分頁問題我的網址鍾&變成了#038;
        
        我去改pagination檔案。這個排序問題有辦法解決嗎
        
        謝謝
      5. Nel Tseng
        2015-07-13
        
        建議要檢查 WordPress 或 WooCommerce 的全部的設定之後，才能快速的找出問題，若您需要技術支援，請至參考本站中的優化項目，或使用表單聯絡我們來為您的問題估價，謝謝。
peterlai
2015-09-03

Hi, 運費跟運送方式不是應該是兩件事嗎?
如: 購物滿3000免運費, 但是可以讓消費者選擇要7-11取貨, 或是宅配到家?
以上情境是可以做到嗎?
謝謝~
1. Nel Tseng
  2015-09-03
  
  Hi, 當然可以，這篇文章談的只是一個概念，不一定合適所有的商店。
  每個商店都能視情況，提供消費者超商取貨及宅配的選項。
youngday2003@gmail.com
2015-11-28

你好,
請問若像你案例中有提到”7-11門市取貨”,
系統如何讓買家選擇要寄送的7-11門市店家地址呢?

謝謝 🙂
1. Nel Tseng
  2015-11-28
  
  Hi, WooCommerce 需要先和提供 7-11 物流服務的公司申請串接才能使用，若您有興趣可到的聯絡我們的頁面中，留下你的資料及需求，謝謝。
huscall
2016-06-02

您好，SEO 和版面做得真不錯（離題）…

想請教一下：目前在後台 WooCommerce 已設好 2 種付款方式，並各自對應至運送方式，但前台卻不展示另外一種，不知道大大之前是否有遇過此情況？又，可能造成的原因為何？ ~”~

燒腦中～
1. Nel Tseng
  2016-06-02
  
  不太懂 “不展示另外一種” 是指什麼。
  1. huscall
    2016-06-02
    
    感謝你抽空答覆。
    
    直接擷圖比較快一些－下圖為前台顯示 CheckOut 頁面，僅顯示了「ATM 轉帳」：
    https://uploads.disquscdn.com/images/4549294bc748d301a29444cd39eb4e562e27022c6541b87275adb2816a57ae3b.png
    
    然而，在後台其實是 enable 了兩種付款方式，如下圖：
    https://uploads.disquscdn.com/images/a41fa4b7089db56a38684d0746eeb96e15968c07c6c1feeaa38b7bc1a5124b45.png
    
    頭疼的地方在於，後台有設置了但前台硬是不出現，而運送方式也遇到一樣情況（其實是更慘，壓根連顯示都沒有）……不知 Nel 是否知道可能造成的原因呢？
    1. Nel Tseng
      2016-06-02
      
      另一個是什麼結帳方式? 也提供一下設定畫面的截圖。
      1. huscall
        2016-06-02
        
        Method #1 [貨到付款] 替代 [Cash On Delivery]
        https://uploads.disquscdn.com/images/35f3f61a3a1c8841a2f25dbfc08252f4cc73c3d1ef1fcccc4418d11fc9d93147.png
        
        Method #2 [ATM] 替代 [BACS]
        https://uploads.disquscdn.com/images/0866c885fbd84efb3a7046391572b16eb9765350ac2e4ce7be6155e18d3cbc5e.jpg
      2. Nel Tseng
        2016-06-02
        
        因為你限制只能用 [超商取貨付款] 的運送方式才會有 [貨到付款] 的結帳選項，如果結帳時沒有出現 [超商取貨付款] 可以選，就不會出現 [貨到付款]。
      3. huscall
        2016-06-02
        
        天啊！怎忽然覺得被敲了一下頭？！ (´_ゝ`)
        
        結帳（付款）問題解決了，但好像運送方面還是沒出現選項，是否能再請益一下？
      4. huscall
        2016-06-02
        
        Report coming in!!
        
        謝謝你的解答，後來發現問題：郵編寫太細，用了 “XXX__” 去代，結果變成沒使用五碼者不可能出現此一選項。後用了萬字元規則 “X*” 就通了。謝謝你的寶貴時間，解決了不少問題。 ^^
      5. Nel Tseng
        2016-06-03
        
        不客氣，祝開店順利。
Ryan Ho
2016-06-27

您好，謝謝您PO文的方法，我在Woocommerce版本2.6.1之前是可以運作的
但升級到2.6.1以後，此篇的方法就無法將其他選項隱藏起來了，不知道版主是否有針對改版後的新解法？
謝謝！！
1. Nel Tseng
  2016-06-29
  
  已更新囉
  1. Ryan Ho
    2016-06-29
    
    謝謝 Nel的更新,使用後運作正常
Akira Yuki
2016-06-29

在2.6版似乎失效了, 求更新~ 謝謝.
1. Nel Tseng
  2016-06-29
  
  已更新囉。
huscall
2016-06-29

Hi，Nel！又來打擾你了。

如前面幾層樓主說的，自從 WooCommerce 進行了更新後似乎介面改了不少。若需要增加「滿 $XXX 免運」的設定路徑，好像與原文述的「設定 > 運送方式 > 免運費」不盡相同了，是嗎？

請教 Nel 設定新版免運金額路徑應為何呢？
1. huscall
  2016-06-29
  
  另外再多請教一下：像是貴站上的 Disqus 載入上似乎有延遲，畫面到才進行載入，不知道是怎麼設定的呢？
lee kian leng
2016-08-03

Hi,您好,可以請教一個關於woocommerce的問題嗎? 我想請教,如果要進去更改這個外掛的source code, 如果改了,但是之後woocommerce有更新版本,如果我執行更新了,那麼之前改的就又不見了,對嗎? 請問有什麼辦法可以解決這個問題嗎? 謝謝您的回覆, 感恩!
樂樂
2017-11-04

你好:我照著文章將Code貼上，但免運費門檻達到後，連原本裝的ECPay的超商付款取貨外掛選項也被遮掉了，請問作者能有修改過後的版本嗎?，單純遮掉系統的單一運費就好。感謝作者。
1. Nel Tseng
  2017-11-05
  
  unset( $rates['flat_rate'] ); ，這段指的就是單一運費了。我想你需要的是提供原本的運送方式但金額是免費，那就不能照文章的這種方法做。
  
  這個外掛會是你需要的:
  https://codecanyon.net/item/woocommerce-conditional-shipping/13593884?ref=neltseng
  1. 樂樂
    2017-11-06
    
    好的！感謝你

留言功能已關閉。