1. 首頁
  2. »
  3. 網站架設
  4. »
  5. WordPress
  6. »
  7. [教學] Woocommerce 串接綠界超取服務,並修正免運時,可顯示超取選項
WordPress 網站架設

[教學] Woocommerce 串接綠界超取服務,並修正免運時,可顯示超取選項

2020/10/16

梅問題-[教學] Woocommerce 串接綠界超取服務,與修正免運時可正常的顯示超取選項
  現在走沒二、三步就有便利商店,因此在網路買東西時,送到就近的超商比宅配到家要來的方便許多,所以現在愈來愈的店商,除了金流以外,也有超取的機制,一來可讓消費者方便取件,二來是當消費者購買時,只需找就近的超商就可寄送,無論對於那一方,都相當的方便,再加上店到店,可取貨時再付款,因此梅干也曾花了點時間,研究了綠界所提供超取的API,雖然說過程並不複雜,但要把金流跟物流,二個再整合起來,就得花些時間。

而現在愈來愈多人使用Woocommerce來架設購物車,因此綠界也為了Woocommerce推出了金流與物流的外掛模組,且只需安裝並啟用後,立即就可讓你的Woocommerce也有超取的功能,完全不用傷腦筋在那串接,但在開啟了超取後,運送方式就只剩超取,消費者就無法切換為宅配,因此梅干就來分享一下,Woocommerce物流設定的小技巧與免運的修正方法。


Woocommerce綠界超取模組
Step1
在進入綠界科技的免費購物車的套裝模組時,再點「Woocommerce物流模組」後方的連結圖示。
梅問題-[教學] Woocommerce 串接綠界超取服務,與修正免運時可正常的顯示超取選項
Step2
接著會導向Github,再點右上的Code/Download ZIP 選項。
梅問題-[教學] Woocommerce 串接綠界超取服務,與修正免運時可正常的顯示超取選項
Step3
下載完畢後,解壓縮並將「ecpay_shipping.zip」檔案,拖曳到WordPress後台的安裝外掛頁面,安裝並啟用。
梅問題-[教學] Woocommerce 串接綠界超取服務,與修正免運時可正常的顯示超取選項
Step4
當啟用完畢後再到「Woocommerce / 設定」選項的「運送方式」,就會到「綠界科技超商取貨」。
梅問題-[教學] Woocommerce 串接綠界超取服務,與修正免運時可正常的顯示超取選項
Step5
進到綠界科技超商取貨的設定面板中,只需將「啟用綠界科技超商取貨」選項勾起來,再設定運費與滿額免運,以及和要提供的超商類型。
梅問題-[教學] Woocommerce 串接綠界超取服務,與修正免運時可正常的顯示超取選項
Step6
當設定完畢後,儲存回到前台時,就會看到運送方式出現「綠界科技超商取貨」的選項,但卻無法選擇宅配,讓我們繼續往後看下去。
梅問題-[教學] Woocommerce 串接綠界超取服務,與修正免運時可正常的顯示超取選項
Step7
接著回到WordPress後台,再到「Woocommere / 設定] 的「運送區塊」選項,再點「新增運送區域」。
梅問題-[教學] Woocommerce 串接綠界超取服務,與修正免運時可正常的顯示超取選項
Step8
接著區域名稱,可自行定義,接著再點下方的「新增運送方式」。
梅問題-[教學] Woocommerce 串接綠界超取服務,與修正免運時可正常的顯示超取選項
Step9
這邊分別設定「單一費率」與「免費運送」。
梅問題-[教學] Woocommerce 串接綠界超取服務,與修正免運時可正常的顯示超取選項
Step10
接著再把單一費率,更改為「宅配」,同時也可定義免運的消費金額。
梅問題-[教學] Woocommerce 串接綠界超取服務,與修正免運時可正常的顯示超取選項
Step11
這時在運送方式,就會看到三個選項,但比較怪異的,雖然預設為免運,但還是會出現宅配60,雖然先前梅干分享過,修正免運這個問題,但一修正後,不但宅配不見,就連超取也不見了。
梅問題-[教學] Woocommerce 串接綠界超取服務,與修正免運時可正常的顯示超取選項
Step12
因此這時開啟佈景主題的funcion.php,並在頁面的最上方,貼上下方的語法。
<?php
//Woocommerce 免運+顯示超取
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; } if (!empty($free)) { foreach ( $rates as $rate_id => $rate ) { if ( 'ecpay_shipping' === $rate->method_id ) { $free[ $rate_id ] = $rate; break; } } }

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

梅問題-[教學] Woocommerce 串接綠界超取服務,與修正免運時可正常的顯示超取選項
Step13
儲存後,再回到Woocommerce的前台,就會看到運送方式,就剩下免運與超取二個選項。
梅問題-[教學] Woocommerce 串接綠界超取服務,與修正免運時可正常的顯示超取選項
Step14
當設定為超取時,下方就會出現下拉選單,設定超取的方式,目前超取有二種模式,一個是取貨付款,另一個則是取貨不付款,因此透過綠界官方所提供的模組,讓你也可輕鬆將購物車,加入超取的機制,因此有需要的朋友,也可試試看囉!
梅問題-[教學] Woocommerce 串接綠界超取服務,與修正免運時可正常的顯示超取選項