TI WooCommerce Wishlist 教學 :加入商品到願望清單+待買列表(提升網站下單率)

TI WooCommerce Wishlist 教學 :加入商品到願望清單+待買列表(提升網站下單率)

這是一篇完整的「 TI WooCommerce Wishlist 教學 」,它是一個強大的 WordPress 願望清單外掛。

架設 購物網站 的站長,一定都對於購物車、結帳表單 的功能很熟悉,不過,也許你會對商品願望清單的功能感到疑惑。

商品願望清單與購物車是不同的功能!

它可以收集顧客正在考慮購買的商品,增加考慮是否購買商品的時間,等同於幫助網站增加「 潛在客戶 」。

這項貼心的功能可以讓顧客更好管理購物清單,從而增加下單機率,是一個不錯的行銷功能唷:)更多 電商行銷活動

有些電商主題自帶願望清單頁面,但對於主題沒有建置該功能的站長, TI WooCommerce Wishlist 會是一款不錯的擴充外掛。更多 WooCommerce 電商外掛

話不多說,我們趕快開始學習吧!

TI WooCommerce Wishlist 願望清單外掛,完整影片教學:

TI WooCommerce Wishlist 願望清單外掛,完整影片教學:

1. TI WISHLIST 是什麼

TI WooCommerce Wishlist 商品願望清單
TI WooCommerce Wishlist 商品願望清單

TI WooCommerce Wishlist 是一款商品願望清單的外掛,目前已有 90,000 + 的下載次數,總評分高達 4 星半,免費版功能完整。更多 TI WooCommerce Wishlist 教學

商品願望清單不同於購物車,它可以收集顧客暫時無法購買或仍在觀望中的商品,讓顧客更好管理他們的購物清單,並且增加購買機率:)

TI WooCommerce Wishlist 擁有分享清單到社群的功能,顧客可以與好友分享他們正在考慮的商品,這可以為你的購物網站帶來潛在的客戶。

TI WooCommerce Wishlist 顧客可在願望清單添加商品
TI WooCommerce Wishlist 顧客可在願望清單添加商品

使用者在商品上放上自定義外觀和位置的「 添加到願望清單 」按鈕。

除自定義添加按鈕之外, TI WooCommerce Wishlist 也可以訂製多種清單外觀樣式,以及在心願清單裡的商品資訊顯示多寡。

TI WooCommerce Wishlist 自訂添加按鈕
TI WooCommerce Wishlist 自訂添加按鈕

雖然是英文版本,但 TI WooCommerce Wishlist 兼容多款翻譯外掛,可以使用 WorsPress 翻譯外掛進行翻譯。更多 Loco Translate 使用教學

至於進階版本的付費功能,擁有更多權限功能像是:客戶可以新增無限制願望清單、更改願望清單隱私權限等 ..。更多 免費&付費版本 差異。

如果有想在電商網站,加上商品願望清單的功能,那使用 TI WooCommerce Wishlist 應該會有效的幫助到你:)


2. 安裝+啟用 TI WooCommerce Wishlist

我們話不多說,開始進行 TI WooCommerce Wishlist 的安裝+啟用吧!

Step1:下載 TI WooCommerce Wishlist

到 WordPress 後台,前往外掛 > 安裝外掛 > 搜尋 TI WooCommerce Wishlist,然後安裝+啟用。

TI WooCommerce Wishlist 教學 :安裝 TI WooCommerce Wishlist
安裝 TI WooCommerce Wishlist

啟用之後,TI WooCommerce Wishlist 會跳到初始設定的畫面,那這邊我會先帶領大家一步步完成初始設定。

Step2:歡迎畫面

在 TI WooCommerce Wishlist 歡迎使用畫面,選擇 Let’s go。

TI WooCommerce Wishlist 教學 :TI WooCommerce Wishlist 初始設定歡迎畫面
TI WooCommerce Wishlist 初始設定歡迎畫面

Step3:頁面設定

進入頁面設定,這個步驟是要設定願望清單所在的頁面。

第一點,願望清單頁面名稱。

第二點很重要,如果沒有先創建好願望清單頁面,需選擇「 Create Automatically 」選項,TI WooCommerce Wishlist 便會自動創建一個新頁面。

TI WooCommerce Wishlist 教學 :TI WooCommerce Wishlist 頁面設定
TI WooCommerce Wishlist 頁面設定

Step4:按鈕設定

可以變更按鈕的相關設定,細節如下:

TI WooCommerce Wishlist 按鈕設定
TI WooCommerce Wishlist 按鈕設定
  • 按鈕排序:在單一商品頁中,「 加進願望清單 」按鈕要在「 加入購物車 」上方或下方。
  • 按鈕文字:按鈕的文字內容。
  • 是否顯示在商品列表:「加進願望清單按鈕 」是否顯示在商品列表頁。
  • 按鈕文字:在商品列表頁中的按鈕文字內容。

設定完成,點擊 CONTINUE 繼續下一步。

Step5:產品自動刪除設定

當願望清單中的商品被加進購物車時,是否將願望清單裡的商品自動移除。

可選擇 Automatically 自動刪除,或是 Manual 顧客手動刪除。

TI WooCommerce Wishlist 願望清單自動刪除設定
TI WooCommerce Wishlist 願望清單自動刪除設定

Step6:社群分享按鈕

選擇在願望清單中顯示的社群分享按鈕,依照需求開啟或關閉即可。

TI WooCommerce Wishlist 社群分享按鈕設定
TI WooCommerce Wishlist 社群分享按鈕設定

Step7:初始設定完成

社群分享按鈕設定結束,會出現是否需要 TI WooCommerce Wishlist 客服的協助,這個看個人需求選擇是否開啟就好。

最後一步,選擇「 WISHLIST SETTING 」到後台進行下一步操作,初始設定到此全部完成。

TI WooCommerce Wishlist 初始設定完成
TI WooCommerce Wishlist 初始設定完成

我們會被引導回 TI WooCommerce Wishlist 的「 General Settings 一般設定 」頁面。

接下來的幾個章節,我會簡單介紹 TI WooCommerce Wishlist 的功能面板,並示範修改成效給大家。


3. General Settings 一般設定

前往 TI Wishlist > General Settings,這是管理願望清單頁面相關的設定,像是:頁面使用權限、名稱、顯示設定等 ..。

在「 我的帳戶 」頁面設定「 願望清單按鈕 」,可方便顧客隨時查看自己的願望清單(如下圖)。

將「 自動刪除商品 」跟「 自動導向購物車 」開啟,當客戶要購買商品時,頁面可自動導向購物車,同時將願望清單中已購買的商品刪除。

TI WooCommerce Wishlist 教學 :頁面與購物車相關設定

如果沒有在初始設定讓外掛自動生成願望清單頁面,就要先自行新增頁面,並在「 Wishlist Page 」欄位進行指派(如上圖)。

  • Show Link to Wishlist in my account:在「 我的帳戶 」顯示願望清單連結。
  • Remove Product from Wishlist if added to cart:商品添加至購物車時,刪除願望清單的商品。
  • Redirect to the checkout page from Wishlist if added to cart:在願望清單的商品,如果加入到購物車,網站會自動導向到結帳頁面。

接著,可將「 Show successful notice in popup 成功通知彈跳視窗 」開啟,WordPress 會提醒顧客已將該商品加入願望清單,方便會員確認操作無誤(如下圖)。

很重要的一點,「 Force permalinks rewrite 永久連結重寫 」必須開啟,避免日後的導向願望清單時出現錯誤。

TI WooCommerce Wishlist 教學 :重要設定:開啟「 永久連結重寫 」
TI WooCommerce Wishlist 教學 :重要設定:開啟「 永久連結重寫 」
  • Show successful notice in popup:再將商品加入願望清單時,跳出成功通知彈跳視窗。
  • Redirect to Wishlist:加入商品時自動導向願望清單頁面。
  • Force permalinks rewrite:強制永久連結重寫。

存檔小提醒

在此章節跟之後的章節,做完變更後,都要記得按下存檔唷,時時記得存檔,才不會因為突發狀況捶心肝 > <

存檔位置在這兩個地方:

TI WooCommerce Wishlist 教學 : 存擋按鈕位置
TI WooCommerce Wishlist 教學 : 存擋按鈕位置

將存檔位置記起來之後,我們就繼續下面的教學吧!


4. 單一商品 / 商品列表按鈕設定

這章節「 TI WooCommerce Wishlist 教學 」的分享,主要是在調整「 添加商品至願望清單 」的按鈕設定。

Product page “Add to Wishlist” Button Settings 單一商品按鈕設定

在 TI WooCommerce Wishlist 初始設定時,我們已調整過按鈕相關選項,這邊可做更細部的設定:( 系統預設 / 自行上傳 )按鈕樣式、顏色、文字、出現位置等 ·· 。

TI WooCommerce Wishlist 教學 : 單一商品按鈕設定
TI WooCommerce Wishlist 教學 : 單一商品按鈕設定
  • Show preloader:顯示加載區塊,建議主機速度不夠的站長勾選。
  • Show “Already In Wishlist” button Text:顯示「 商品已在願望清單 」按鈕,重複加入商品時可提醒顧客。

調整之後,可以到任意單一商品頁查看。

檢視 TI WooCommerce Wishlist 單一商品按鈕設定
檢視 TI WooCommerce Wishlist 單一商品按鈕設定

Product listing Button Settings 商品列表按鈕設定

基本上設定項與單一商品按鈕列表一致,可參考上面的面板功能介紹進行調整。

TI WooCommerce Wishlist教學 :商品列表按鈕設定
TI WooCommerce Wishlist教學 :商品列表按鈕設定

主要調整在商品列表顯示的按鈕設定,按鈕實際位置如下。

TI WooCommerce Wishlist教學 : 商品列表頁按鈕設定
TI WooCommerce Wishlist教學 : 商品列表頁按鈕設定

好囉!以上就是「 TI WooCommerce Wishlist 教學 」有關願望清單的一般設定。


5. 願望清單頁面相關設定

接下來,是關於願望清單頁面的資訊及表格功能調整,以及社群分享按鈕的調整,我都一併整合在這個章節。

Wishlist Product Settings 願望清單顯示設置

設置在願望清單頁面的商品資訊,可調整顯示:商品價格、庫存、加入日期。

TI WooCommerce Wishlist教學 : 願望清單商品設定
願望清單商品設定
  • Show “Add to Cart” button:顯示「 加進購物車 」按鈕。
  • “Add to Cart” Text:「 加進購物車 」按鈕顯示文字。
  • Show Unit price:顯示商品價格。
  • Show Stock status:顯示商品庫存狀態。
  • Show Date of addition:顯示將商品加入願望清單時的日期。

Wishlist Table Settings 願望清單表格設置

讓願望清單頁面的表格裡,出現相對應的控制商品功能按鈕,供顧客整理願望清單商品,主要功能如下:

TI WooCommerce Wishlist教學 : 願望清單商品設定
願望清單商品設定
  • Show Checkboxes:可勾選商品的方框,讓使用者可以勾選多樣商品,進行後續的整理動作。
  • Show Actions button:商品的控制功能,可選擇多樣商品下單或刪除的動作。
  • Show “Add Selected to Cart” button:「 將所選商品加進購物車 」按鈕。
  • Show “Add All to Cart” button:「 將全部商品加進購物車 」按鈕。

Social Networks Sharing Options 社群分享選項

在初始設定我們已經做過調整,這邊也可以再進行修改。

除了可開啟或關閉某項社交軟體分享按鈕,這裡多了 2 個項目可調整:「 社群分享 」按鈕文本、按鈕樣式。更多 社群快速登入&分享外掛

TI WooCommerce Wishlist教學 : 社群按鈕設定
TI WooCommerce Wishlist教學 : 社群按鈕設定

依照喜好填入文本與選擇樣式之後,社群分享按鈕就完成啦~

成果一覽

存檔之後,我們可以到前台的願望清單頁面,查看修改後的樣式。

TI WooCommerce Wishlist 願望清單頁面預覽
TI WooCommerce Wishlist 願望清單頁面預覽

這樣願望清單頁面的設定就完成啦!


6. Wishlist Product Counter+區塊小工具

這個章節,我會介紹最後一個面板功能,以及如何運用區塊小工具+Astra 主題,在主選單新增願望清單按鈕。更多 Astra Theme 教學

Wishlist Product Counter 願望清單顯示設定

這個面板主要是設定:區塊小工具中的願望清單按鈕樣式、顯示數量、排序等 ·· 相關設置。

TI WooCommerce Wishlist 教學 :Wishlist Product Counter 願望清單顯示設定
Wishlist Product Counter 願望清單顯示設定

設定好按鈕樣式之後,我們就可以按下儲存,進行下一個步驟!

新增按鈕至首頁主選單(區塊小工具+Astra 主題)

大部分電商平台都將願望清單按鈕放置在主選單,因此以此作為範例。

因為 Astra 主題有內建的 Header Builder(頁首編輯器),我先以 Astra 主題+新版區塊小工具進行示範。更多 WordPress 新版小工具 教學。

先按下 自訂 > Header Builder > 點擊箭頭 3 所指區塊 > 新增「 Widget 1 」小工具。

TI WooCommerce Wishlist 教學 :Header Builder 新增區塊小工具
TI WooCommerce Wishlist 教學 :Header Builder 新增區塊小工具

我們會看見右上角多了一個「 Widget 1 」區塊,接著便來把區塊轉換成願望清單按鈕。

點選右下角的設定按鈕 > 左邊編輯頁按下「 + 」方塊 > 新增「 TI Wishlist Products Counter 」。

新增「願望清單」按鈕區塊

接著便可以變更「 願望清單 」按鈕樣式,可馬上看見按鈕在主選單的變化。

確定樣式之後,按下發佈,就成功在主選單上新增按鈕啦!

修改「願望清單」按鈕顯示樣式

我們到前台網站檢查,發現主選單成功多了願望清單按鈕~

如果在 Wishlist Product Counter 有設定相關選項,也可以看見樣式變化。例如:愛心按鈕樣式、顏色、顯示清單內商品數量等 ·· 。

新增「願望清單」按鈕成功~
TI WooCommerce Wishlist 教學 :新增「願望清單」按鈕成功~

到此為止,我們就成功在網站選單上,新增一個「 願望清單 」的頁面路徑囉!


7. 頁面外觀樣式

TI WooCommerce Wishlist 還有一個自定義功能:修改「 願望清單 」頁面樣式。

WordPress 後台 > TI Wishlist > Style Options 。

可以看見選項「 Use Theme style 使用主題樣式 」預設是打開的,表示 TI Wishlist 幫我們新增頁面時,將頁面直接套用佈景主題預設樣式。

如果想獨立修改按鈕樣式,就將「 Use Theme style 」關閉。

Style Options 頁面

TI WooCommerce Wishlist 可自定義的選項有很多,這邊我以變更「 加進購物車 」按鈕樣式及顏色做示範,其他面板樣式,大家可再自行摸索。

關閉「 Use Theme style 」之後,我們下滑找到「 Add To Cart Button 加進購物車按鈕 」面板,調整顏色及各項設定值。

修改「 Add To Cart Button 加進購物車 」樣式
修改「 Add To Cart Button 加進購物車 」樣式
  • Background Color:按鈕背景顏色。
  • Background Hover Color:當鼠標移到按鈕上,變更按鈕背景顏色。
  • Text Hover Color:當鼠標移到按鈕上,變更按鈕文本顏色。

其他調整項目,可以參考圖片自行設定。

調整完成後,按下儲存,到前台願望清單頁面查看,發現變更成功囉~

 TI WooCommerce Wishlist 教學 :修改「 Add To Cart Button 加進購物車 」成功!
修改「 Add To Cart Button 加進購物車 」成功!

以上是修改「 Add To Cart Button 加進購物車按鈕 」樣式示範,其他可變更項目還有:標題、表格、加進願望清單按鈕等 ·· 多種樣式變化。

可以按照自己喜好修改,完成後就能獲得一份自定義的精美願望清單頁面啦!

對於某些想自定義頁面樣式的站長來說, TI WooCommerce Wishlist 有這項功能真的很貼心:)

本文是「 TI WooCommerce Wishlist 教學 」的完整示範,希望對大家有所幫助唷!


常見問題

TI WooCommerce WISHLIST 是什麼?

TI WooCommerce Wishlist 是一款商品願望清單功能外掛,目前已有 90,000 + 的下載次數,總評分高達 4 星半,免費版功能完整。

願望清單可以收集顧客暫時無法購買或仍在觀望中的商品,讓顧客更好管理他們的購物清單,從而增加購買機率。

內建的社群分享功能,能夠讓顧客分享他們的清單給社群好友,進而增加潛在客戶:)

TI WooCommerce WISHLIST 是免費的嗎?

TI WISHLIST 有免費版和付費版本,但免費版本功能已經相當齊全,本文介紹的全部功能都是免費的。

付費版本主要功能是關聯第三方外掛,有需求時再考慮購買即可。

我想知道還有哪些電商外掛,適合 WooCommerce 網路開店平台使用?

小犬網站有整理了 電商外掛推薦清單,或是 電商主題推薦清單,應該會有效強化你的網路店舖:)


WordPress 學習資源

學習 WordPress 網站架設流程中,或許會遇到一些解決不了問題,可以在下方留言給我,我會盡力協助解答!

接下來,額外分享 3 項架站資源,可有效幫助大家處理網站問題。

資源一:犬哥數位(專業 WordPress 網頁設計公司)

如果你沒時間自己架站、或是遇到解決不了的網站問題。歡迎洽詢 犬哥數位(WordPress 網頁設計公司),請專家製作會更有效率!

WordPress 網頁設計公司|犬哥數位

資源二:WP 精選模組攻略書

由於 WordPress 主題 / 外掛有非常多種,很多網友私訊我不知道安裝哪一款,才有辦法實現功能。或是已經試了很多款外掛,但始終找不到適合自己的。

對此我整理了 高達 100 多款精選主題&外掛大全(電子書),這些都是我們團隊協助客戶開發案件時,會搭配使用的。一來外掛品質優良,二來功能性也足夠強!

WordPress 模組指南書
WordPress 模組指南書

資源三:官方教學資源(含 FB 社群解答)

如果你偏愛自架網站,也歡迎持續關注 犬哥網站 Blog,我們都持續有發布新的網站架設、網路行銷教學。

或是你比較喜歡看影片學習,也可關注 YouTube 頻道,幫助你更容易進入狀況。

當然,如果你在操作過程中遇到問題,也可以加入 WordPress 架站 x SEO 教學時光屋 – 犬哥網站 ,除了有網友一同幫你解惑外,犬哥團隊也會同步在社團幫助大家。

犬哥網站|交流社團
犬哥網站交流社團

關於作者

犬哥網站:網頁設計 x 網路行銷教學平台

犬哥網站

我們分享 WordPress 架站 x 網路行銷知識,不需會任何程式技術,就能自己建立各種網站。 搭配豐富的網路行銷教學,幫助你被更多人看到。 趕快跟著我們的腳步,開始學習吧:)

在〈TI WooCommerce Wishlist 教學 :加入商品到願望清單+待買列表(提升網站下單率)〉中有 7 則留言

  1. 您好,我有照您的方式加上了願望清單,但不知為何它顯示的位置跟您圖中的不一樣,不管我選”after cart button” 或”before cart button”,它都出現在產品清單的最下方,也沒有跟產品文字一起對齊,我是用flatsome模板架的電商,不知道有沒有影響,謝謝!!

  2. 謝謝你詳細的介紹! 超級實用!
    想求救一個點,就是關於我的願望清單相關頁面,下面都會出現[yith_wcwl_wishlist]這串文字
    有詢問過客服了,對方回覆:

    The mentioned text is a shortcode from the YITH WooCommerce Wishlist plugin. You can go to Dashboard->Pages-> edit the wishlist page and just delete this text from page content.

    我英文太差,此外掛編輯可設定的選項超多,看不出來是哪一項。又很怕亂按設定會跑掉😭
    想詢問你是否知道這邊指的,是關掉哪個地方呢?😢

    1. 犬哥網站

      嗨,

      你可前往 WordPress 後台 > 頁面 > 編輯「 願望清單 」頁面,找到「 [yith_wcwl_wishlist] 」文字並刪除,應該就可以囉!先試試看~

發佈留言

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

返回頂端