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

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

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

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

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

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

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

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

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

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

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

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

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

更新 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 的後台,設定免運費的金額限制 (下圖),少了這個步驟的話,就連免運費的選項都不會出現喔。

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

WooCommerce 免運費的金額限制設定
WooCommerce 免運費的金額限制設定

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

WooCommerce 購物網站的免運費機制建議” 有 39 則迴響

  1. 這個方法真的很棒 台灣有你真好

  2. 謝謝,但你說得太誇張了點?

  3. 我碰到的是另一個煩惱!有些商品要運費,有些不要,變成要運費和不要運費的都會跑出來。有時候該商品要運費,但是客人會去選免運費,不知道怎麼解決!

    1. Hi, 只要能設定好運送級距就能解決了。

      1. 每家運費又不一樣耶

        1. 如果需要客制化的話,請來信諮詢,謝謝。

  4. 感謝你解決了我的問題 這篇講的好清楚 謝謝
    我想請問另一個問題,目前我的woocommerce的商品頁面,畫面左上角提供的商品排序(依預設,依熱銷度,依價格高到低…等) ,這個下拉選單沒有作用,不管我選哪一個 畫面上的商品排序都沒有改
    不知道問題是出在哪裡
    謝謝

    1. 依之前 UTF-8 的問題推估,應該是安裝 WordPress 時有些問題,如果沒先解決的話,之後不論是 WooCommerce 或是使用其它外掛時,都會持續出現奇怪的問題。

      1. 你好 你所說的UTF8問題 現在是否還能修正
        謝謝

        1. 有兩個地方要檢查,一是 wp-config.php 裡,有沒有下列這行:
          define(‘DB_COLLATE’, ‘utf8_unicode_ci’);

          二是 PHPMyAdmin 的首頁中,查看編碼是不是 utf8_unicode_ci

          1. 你好 檢查過

            wp-config.php裡面有該行程式碼

            PHPMyAdmin的首頁 顯示編碼是utf8_general_ci

            所以這樣是要把utf8_general_ci改為tf8_unicode_ci嗎

            謝謝

          2. 不用, utf8_general_ci 也是可以的。

          3. 商品排序的連結是/?page_id=589&orderby=price,但點擊後會自動跳回 /?post_type=product

          4. 你好 所以問題也是出在網址 像之前分頁問題 我的網址鍾&變成了#038;

            我去改pagination檔案。這個排序問題有辦法解決嗎

            謝謝

          5. 建議要檢查 WordPress 或 WooCommerce 的全部的設定之後,才能快速的找出問題,若您需要技術支援,請至參考本站中的優化項目,或使用表單聯絡我們來為您的問題估價,謝謝。

  5. Hi, 運費跟運送方式不是應該是兩件事嗎?
    如: 購物滿3000免運費, 但是可以讓消費者選擇要7-11取貨, 或是宅配到家?
    以上情境是可以做到嗎?
    謝謝~

    1. Hi, 當然可以,這篇文章談的只是一個概念,不一定合適所有的商店。
      每個商店都能視情況,提供消費者超商取貨及宅配的選項。

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

    謝謝 🙂

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

  7. 您好,SEO 和版面做得真不錯(離題)…

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

    燒腦中~

    1. 不太懂 “不展示另外一種” 是指什麼。

      1. 感謝你抽空答覆。

        直接擷圖比較快一些 - 下圖為前台顯示 CheckOut 頁面,僅顯示了「ATM 轉帳」:
        https://uploads.disquscdn.com/images/4549294bc748d301a29444cd39eb4e562e27022c6541b87275adb2816a57ae3b.png

        然而,在後台其實是 enable 了兩種付款方式,如下圖:
        https://uploads.disquscdn.com/images/a41fa4b7089db56a38684d0746eeb96e15968c07c6c1feeaa38b7bc1a5124b45.png

        頭疼的地方在於,後台有設置了但前台硬是不出現,而運送方式也遇到一樣情況(其實是更慘,壓根連顯示都沒有)……不知 Nel 是否知道可能造成的原因呢?

        1. 另一個是什麼結帳方式? 也提供一下設定畫面的截圖。

          1. 因為你限制只能用 [超商取貨付款] 的運送方式才會有 [貨到付款] 的結帳選項,如果結帳時沒有出現 [超商取貨付款] 可以選,就不會出現 [貨到付款]。

          2. 天啊!怎忽然覺得被敲了一下頭?! (´_ゝ`)

            結帳(付款)問題解決了,但好像運送方面還是沒出現選項,是否能再請益一下?

          3. Report coming in!!

            謝謝你的解答,後來發現問題:郵編寫太細,用了 “XXX__” 去代,結果變成沒使用五碼者不可能出現此一選項。後用了萬字元規則 “X*” 就通了。謝謝你的寶貴時間,解決了不少問題。 ^^

          4. 不客氣,祝開店順利。

  8. 您好,謝謝您PO文的方法,我在Woocommerce版本2.6.1之前是可以運作的
    但升級到2.6.1以後,此篇的方法就無法將其他選項隱藏起來了,不知道版主是否有針對改版後的新解法?
    謝謝!!

      1. 謝謝 Nel的更新,使用後運作正常

  9. 在2.6版似乎失效了, 求更新~ 謝謝.

  10. Hi,Nel!又來打擾你了。

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

    請教 Nel 設定新版免運金額路徑應為何呢?

    1. 另外再多請教一下:像是貴站上的 Disqus 載入上似乎有延遲,畫面到才進行載入,不知道是怎麼設定的呢?

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

  12. 你好:我照著文章將Code貼上,但免運費門檻達到後,連原本裝的ECPay的超商付款取貨外掛選項也被遮掉了,請問作者能有修改過後的版本嗎?,單純遮掉系統的單一運費就好。 感謝作者。

    1. unset( $rates['flat_rate'] ); ,這段指的就是單一運費了。我想你需要的是提供原本的運送方式但金額是免費,那就不能照文章的這種方法做。

      這個外掛會是你需要的:
      https://codecanyon.net/item/woocommerce-conditional-shipping/13593884?ref=neltseng

      1. 好的!感謝你

發佈留言