利用滿多少訂單金額,就提供該筆訂單免運費的模式,是一種鼓勵消費者多添購商品同時也能提高銷售量的雙贏做法,然而在 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 購物網站的免運費機制建議
本篇文章 5 分 / 1