找我們做網站
↑
Woocommerce · WooCommerce 外掛

Advanced Woo Search 教學:WooCommerce 商品搜尋列外掛設定

WooCommerce 外掛發布 2021.03.10更新 2026.10.02閱讀約 5 分鐘
Advanced Woo Search 教學:WooCommerce 商品搜尋列外掛設定

重點整理
商品一多,顧客需要搜尋列才能快速找到東西。Advanced Woo Search 可以加入即時商品搜尋:在設定的 Search in 勾選要搜尋的欄位(至少包含商品名稱與貨號),按 Reindex table 重建索引,再到「外觀 → 小工具」放入 AWS Widget。

在完成WooCommerce的基本設定後你的電商已經可以正式上架了!但是光是只有基礎的設定一定是不夠的,原因就是只有基礎平台的設定瀏覽體驗會非常不好雖然可以進行完整的購買流程但是會很不方便!瀏覽者的體驗是電商平台很重要的一環,舉個例子來說:上架的商品變多以後難免比較難找,這個時候有一個搜尋欄位可以輸入關鍵字或是貨號來搜尋相關產品就可以大大改經瀏覽體驗了!今天我們就要來解決這個問題!利用WooCommerce外掛 –  Advanced Woo Search 在你的電商平台中添加搜尋引擎!

Advanced Woo Search的作用

Advanced Woo Search是可以產生Search Bar的外掛!我們要利用Search Bar提高瀏覽體驗。網站的排版是決定瀏覽者體驗的關鍵!好的網頁排版加上豐富的網站內容可以讓瀏覽者在我們的電商平台中快速找到我們的商品且了解檔期優惠!這樣一來才能吸引消費者的注意力,促進他的消費意願!

Advanced Woo Search
Advanced Woo Search
Advanced Woo Search
Advanced Woo Search

基本設定

了解到Search Bar如何幫助我們改善瀏覽者的使用體驗,接下就和我們一起學習Advanced Woo Search的基本設定吧!

Advanced Woo Search
Advanced Woo Search

第一步:下載外掛
先進入WordPress後台 – 在左邊工具欄 – 點擊外掛 – 點擊安裝外掛 – 在搜尋欄位中搜尋Advanced Woo Search – 點擊立即安裝即可

Advanced Woo Search
Advanced Woo Search

第二步:啟用外掛
安裝外掛以後 – 點擊左邊的工具欄 – 點擊已安裝外掛 – 找到剛剛下載的外掛 – 點擊啟用即可開始使用。

Advanced Woo Search
Advanced Woo Search

第三步:Search in設定
開啟外掛後在左邊的工具欄位中就能找到Advanced Woo Search – 點擊setting就可以開始進行設定!
其他的設定我們都使用預設,不過有一點就要特別檢查就是Search in,Search in顯示我們到底可以在Search Bar裡面能夠搜尋到那些資訊。我們要確保產品名稱和貨號可以被輕鬆的查詢到!

Advanced Woo Search
Advanced Woo Search
Advanced Woo Search
Advanced Woo Search

第四步:Reindex table設定
在設定完Search in後在同一頁向上滑動可以找到Reindex table,如何設定在圖中有介紹!

Advanced Woo Search
Advanced Woo Search
Advanced Woo Search
Advanced Woo Search

如何添加Search Bar到網頁當中

完成搜尋欄位的設定後就要吧它添加到網頁當中就可以開始使用了!

第一步:外觀設定
左邊的工具欄位 – 點擊外觀 – 小工具 來設定電商平台首頁的外觀設定

Advanced Woo Search
Advanced Woo Search

第二步:AWS Widget
在小工具欄位中我們可以看到 AWS Widget 這個就是我們剛剛設定完成的搜尋欄位,接下來我們只需要把他拖放到資訊欄中即可!

Advanced Woo Search
Advanced Woo Search

第三步:即時預覽
剛剛的步驟會因為你的電商平台主題不同小工具欄位中的排列順序會有所不同,如果你找不到資訊欄在哪裡的話可以使用即時預覽!在上方可以找到即時預覽進行管理點擊後就可以了。

Advanced Woo Search
Advanced Woo Search
Advanced Woo Search
Advanced Woo Search

常見問題

Advanced Woo Search 是免費的嗎?

Advanced Woo Search 有免費版,可以從 WordPress 外掛目錄安裝,提供即時搜尋結果、搜尋商品名稱與貨號等功能,並可用小工具或短代碼放到網站上。另有付費的 Pro 版,提供更多篩選與搜尋設定。

Advanced Woo Search 搜不到某些商品怎麼辦?

先到設定確認 Search in 有勾選要搜尋的欄位,例如商品名稱、內容、貨號或分類,再按 Reindex table 重建索引。大量匯入商品或修改搜尋設定後都要重建一次;草稿、私人或隱藏的商品不會出現在前台搜尋結果中。

搜尋框可以放在頁首或 Elementor 頁面嗎?

可以。除了到「外觀 → 小工具」放入 AWS Widget,外掛也提供短代碼,可以貼在頁首範本、Elementor 的短代碼小工具或任何頁面中。放在頁首時,記得檢查手機版的搜尋框寬度是否合適。

結語

Advanced Woo Search的教學就結束了,一開始搜尋欄位的作用還不會很明顯因為你的商品數量還不夠,未來上架的商品多了就需要搜尋欄位讓瀏覽者能快速方便的找到自己喜歡的商品!

鵠學苑・鵠崙設計鵠崙設計 2014 年成立,專注 WordPress 網站開發,400 多個網站在我們自己的主機上運作。鵠學苑的文章由團隊實際操作後整理,工具與外掛的功能以撰文當時為準。
鵠崙設計

不想自己摸索,
就交給我們做。

外掛設定、主機效能、改版搬家,這裡寫的每一件事,都是我們每天在客戶網站上做的工作。留下需求,1 個工作天內回覆。