WooCommerce 加入願望清單 外掛教學 – 多元化產品比較功能

歡迎回到鵠學苑— WordPress 網頁設計超詳細攻略 – WooCommerce 加入願望清單 是許多電商網站都具有的功能，而實際上願望清單的功能，在於讓顧客可以有另一個選項可以用來追蹤自己喜愛的商品，當再次回到網站時就能透過願望清單列表來查看之前想要購買的商品。另外也能夠將同類型的商品在願望清單中做比較，這樣的方式對線上銷售為主的網站而言，讓顧客有更便利的商品瀏覽模式，能有效提升訂單成交機會。接下來跟著鵠學苑的腳步，讓我們開始學習吧！

在本次教學中將介紹 TI WooCommerce Wishlist 為網站加入願望清單的 WordPress 外掛，在網站主題沒有自帶 WooCommerce 願望清單功能的狀況下，此外掛真的是不錯的選擇，特色如下：

1. 免費就能使用眾多功能。
2. 外觀樣式可設定的細節選項相當多。
3. 步驟式設定與安裝說明。
4. 顧客加入願望清單的整套流程都可自行定義。
5. 可自行決定顯示的位置。

TI WooCommerce Wishlist Plugin 下載點
https://wordpress.org/plugins/ti-woocommerce-wishlist/
TI WooCommerce Wishlist 外掛技術支援論壇
https://wordpress.org/support/plugin/wc-password-strength-settings/

TI Wishlist 外掛安裝助手說明

第一步：進入到安裝外掛頁面搜尋  TI WooCommerce Wishlist ，依序點選安裝與啟用。

第二步：安裝完成後會自動跳出設定引導視窗，如下圖所示點選標示的按鈕。

第三步：指定願望清單頁面，如果沒有預先建立，可以選擇 Create Automatically ，會自動建立願望清單頁面。

名稱的部分可以自行定義，兩個欄位完成後點選 CONTINUE 按鈕。

第四步：願望清單按鈕設定，可以選擇在加入購物車按鈕水平方向的前方或後方，也可以透過加入程式碼來控制按鈕位置。

第二張圖是自訂願望清單按鈕上的要顯示的文字內容，而 Show in product listing 如果開啟，會在商店頁面的商品列表中顯示加入願望清單的按鈕。

第五步：當願望清單中的商品被顧客操作加入購物車後，要以怎樣的方式在願望清單中移除商品，自動（Auto）會將商品移除，手動（Manual）會保留商品直到顧客主動移除。

第六步：在願望清單頁面要顯示的社交分享按鈕，在台灣的電商網站而言，Facebook 與 E-mail 是必備的，其他的就按照網站需求開啟。

第七步：到這一步表示完成基本設定了，網站中的商品列表頁及單一商品頁就已經會有願望清單按鈕，如果要更進階的設定，可以點選 WISHLISY SETTINGS 按鈕進入到設定頁面。

第八步：補充說明在第三步驟時提到的自動建立願望清單頁面，點選 Create Automatically 就會建立如下圖標示的頁面。

願望清單功能進階設定與畫面展示

第一步：進階設定中將說明幾個比較重要的選項：

• Require Login：開啟則已登入的會員才能使用願望清單功能。
• 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：開啟時，當願望清單商品被加入購物車時會自動連接到結帳頁面。
• Remove by anyone：開啟則任何權限的會員都可以移除自己願望清單中的商品。
• Remove product from Wishlist on second click：當使用者第二次點擊按鈕時，將從願望清單中移除商品，建議開啟。

第二步：這裡是設定當商品成功加入願望清單後所跳出的通知訊息內容：

• Show successful notice in popup：必須開啟此項下面才會有細項設定，以跳出視窗的方式顯示成功加入願望清單的訊息。
• ” View Wishlist ” button Text：按鈕文字，如圖所示。
• Redirect to Wishlist：跳出通知視窗 5 秒之後自動轉向到願望清單頁面，不建議開啟。
• ” Product added to Wishlist ” Text：按鈕文字，如圖所示。
• ” Product already in Wishlist ” Text：按鈕文字，如圖所示。

第三步：商品列表願望清單按鈕的設定：

• Button custom CSS class：如果要以 CSS 自訂按鈕樣式的話，可以在此指定一個名稱。
• “Add to Wishlist” Icon：選擇加入願望清單圖示，也能使用自訂圖片。
• “Add to Wishlist” Icon Color：加入願望清單圖示顏色。
• Show preloader：預先加載按鈕動畫，如果網站速度較慢，可以考慮將此項開啟。

第四步：完成所有設定後記得要在畫面最下方點選儲存按鈕，設定才會生效。

第五步：下圖是在商店頁面的願望清單按鈕，無論是點愛心圖示或者點文字可以動作。

第六步：點選加入後會跳出下圖的視窗，如果有設定自動跳轉頁面，則在 5 秒後就會導向願望清單頁。

第七步：下圖是願望清單完成的頁面，可以看到會自動建立加入購物車及分享商品按鈕。

結語：

TI WooCommerce Wishlist 願望清單外掛就筆者個人而言是非常推薦使用，尤其是不懂如何自訂程式碼的站長，使用這個外掛只需要弄懂選項英文說明內容，再將網站開啟維護模式慢慢摸索不一樣的選項開啟會產生怎麼樣的結果，基本上就能完成願望清單功能的建立，重點是 TI Wishlist 與 WooCommerce 在網站前台中的外觀樣式契合度也相當高，不會讓人產生從外掛建立的願望清單頁面是另一個網站的錯覺，完全套用網站主題樣式，沒有違和感，建議有需要的朋友真的可以嘗試看看喔！

今天的教學到這裡告一段落了，不要忘記在右側訂閱鵠學苑電子報，確保收到最新 WordPress 教學文章，如果有網頁設計相關需求，或者想了解最新網站知識，也可以到 鵠崙設計 做線上免費諮詢喔！我們下次的教學見～