搜尋

熱門關鍵字:

最新文章

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

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

2020/10/16

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

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

Woocommerce綠界超取模組
下載連結：https://www.ecpay.com.tw/Service/Appcntr_Shpcar
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 串接綠界超取服務，與修正免運時可正常的顯示超取選項


woocommerce, Woocommerce教學, woocommerce物流, Woocommerce設定, woocommerce超取, 綠界物流串接,