WooCommerce

【Wordpress 外掛】WooCommerce 購物車 Free Shipping Label 免運進度條

大家好,我是豬油先生!

前一段時間,客戶需要在購物車網站中顯示一個購物時是否已達到免運資格的進度條,好讓消費者可以為了免運多購買幾樣商品。上網找了一下,發現 Free Shipping Label 這款簡單好設定,剛好也分享一下給大家。

外掛資訊

外掛名稱:Free Shipping Label

外掛載點:Free Shipping Label

版本:v2.6.0

語言:英文

 

》step 1

首先,先到Wooocommerce >【設定】>【運送方式】新增 單一費率(自行設定金額) / 免費運送


》step 2

免費運送 輸入【最低訂購金額】輸入需要的數值 (底下範例表示,當達到300元時,就開啟免運功能)。

70df8dceee6f48cb974091a766e1a6b5.jpg


》step 3

接著到外掛安裝【Free Shopping Label】這個免運進度條的外掛。

f93fb9fe0b595031d2a2b0bf940ebc36.jpg


》step 4

啟用後,可按下許可或略過。

d065d0d673c481cbe07cc1c403844ac1.jpg


》step 5

由於我們已經設定過免運金額了 (STEP1/2),所以這裡我們就不用再去額外設定金額,系統會自動去抓取剛剛設定好的免運數值。

c9973c4ca0a546c41f8ee41b2d377f92.jpg


》step 6

在進度條這裡我們需要先把【Enable Progress Bar】打開 (不然你怎麼調都不會出現在你的購物車上…)

你可以在購物車 / 結帳畫面 / 迷你購物車 都開啟這進度條,但由於豬油這次用的佈景沒有迷你購物車功能,所以就不會特別顯示出來。

093366d30b0a28231dd027947a17fcc4.jpg


》step 7

進到到購物車畫面可以看到在金額下方出現免運的進度條。

c889465ee09653d5f3ae961b8b1adcb2.jpg


》step 8

在回到Text 這裡更改為自己想要的文字內容。

a71dfe9c34730a84c35fce82b9c98fe6.jpg

修改完如下

d3f23103cea40e61ac7fac04e24f6aee.jpg


》step 9

如果覺得顏色不搭,也可以自行更改顏色 / 進度條是否要有動畫 / 陰影…等等

600a10f200588452dd3ec211775a6dd7.jpg

修改如下

03cd007ff61ed2ddb699ea9e55c0112e.jpg


》step 10

如果你的購物金額達到300元免運的條件時,就會顯示免費的內容文字。這時眼睛的朋友就會發現,怎麼同時出現了 單一費率 / 免費運送 這兩個選項呢?

62eeed42ef3dca911fd176c9408753c5.jpg


》step 11

這時,我們可以回到設定去調整。

你可以選擇將所有運送方式隱藏,只顯示免費運費  或 只顯示 免費運送 & 自行取貨

d08274a95e83ed9d66492e613d8d8882.jpg


》step 12

免費運費

這樣的話就只會顯示免費運送 這段內容,原本的單一費率就會自動隱藏起來。

791116393e188913abc0ce512e52dd1d.jpg


免費運送 & 自行取貨

就同時顯示 免費運送 & 自行取貨,而將單一費率隱藏起來。
29cc11926de043310eb23a026e0e801f.jpg


》step 13

但如果你有多方運送方式或是串接第三方支付的服務的話,就不建議隱藏起來。
35a7416eac2101a713e40e98536bef52.jpg

豬油先生

大家好!我是豬油先生 ~ 我喜歡吃,吃是享受,是生活,因它的美,我記錄,偶爾寫點小教學。 我享受我的生活,並分享它存在的價值。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *


Back to top button