如何向 WooCommerce 添加自訂搜尋欄以更輕鬆地發現產品
已發表: 2025-01-04此處新增自訂搜尋欄意味著無論主題為何,都可以在任意位置新增搜尋欄。
然而,搜尋欄不僅可以搜尋產品,還可以搜尋產品類別、貼文、頁面等。
使用自訂搜尋欄,您可以根據需要控制搜尋欄。我們將在本部落格中看到搜尋欄的許多自訂設定。
而且,搜尋欄大多出現在標題上,但實際上,它可以設定在任何地方。可以使用自訂搜尋欄。
自訂搜尋欄及其功能是什麼意思?
目錄
自訂搜尋欄之所以被稱為自訂是因為它提供了靈活性。
設定搜尋欄的方法有多種。可以使用短代碼、區塊插入器或小部件來放置它。此外,它可以根據網站所有者的偏好進行客製化。
特徵 :
- 快速產品發現
- 增強使用者體驗
- 提供分析
- 方便行動用戶
為什麼使用預製模板時需要自訂搜尋欄
匯入主題模板時,預設情況下您會獲得一個搜尋欄,但可能會有一些限制。
可能沒有Live Search的功能,搜尋範圍單一,客製化有限等。
但如果您考慮一個強大且允許用戶無限自訂的插件,您可以最大限度地增強用戶體驗。
我們在這個部落格中需要什麼
要將自訂搜尋列新增至 Woocommerce 網站,我們需要一個主題和一個外掛程式。
我們需要的主題應該與 woocommerce 相容,所以我們選擇Shop Mania。
我們將使用TH Advance Search。
如何為 WooCommerce 新增自訂搜尋欄
對於自訂搜尋欄,我們需要 TH Advance Search。
這是我們現在的網站,沒有標題。

步驟 1) 開啟 WordPress 儀表板

登入您的 WordPress 網站並開啟儀表板。
步驟 2) 前往外掛程式並點選新增插件

若要新增插件,請將遊標懸停在插件上,然後按一下新增插件。
步驟 3) 前往搜尋列並蒐索高級 WordPress 搜尋插件

前往搜尋列並蒐索 Advance WordPress Search Plugin。找到該插件並點擊立即安裝按鈕。安裝後,點選啟動。
如果您有專業版,則必須上傳外掛程式。看看它是如何完成的。
步驟3)點選上傳插件

在左上角,您可以找到上傳插件按鈕。單擊它。

步驟 4) 上傳、安裝並啟用插件

啟動後,您可以在已安裝的插件清單中看到該插件。
啟動後,搜尋列會自動放置在標題上。

它會自動放置在標題上,但如果您想將其放置在其他地方。但如果想將其放置在其他位置或顯示完整的搜尋欄而不是圖標,那麼它的標題佈局可以幫助您。

但是,如果您想在其他地方(例如特定頁面)添加搜尋欄,那麼有一些方法可以幫助您做到這一點。
本部落格中討論了所有方法。
但是,這還沒有結束,預設情況下,您只能搜尋帖子,當您查看設定時,您將看到允許您搜尋頁面和帖子的選項。

如果選擇帖子,則搜尋欄中僅顯示帖子。請參閱下面的範例。

同樣,它對於頁面的作用也是相同的。使用單字即可顯示相關搜尋。
此外,您可以搜尋類別和搜尋類型,這意味著產品類別和產品類型以及貼文類別和貼文類型。當您編寫搜尋內容並且兩者都在搜尋欄中搜尋時,兩者都會顯示。

在上圖中,當我寫“d”時,會顯示類別,I,e, Drone,並且在產品中的某處也提到了相同的單詞,因此顯示了 2 個產品。
在這個插件中,您可以控制從文字到載入器的每件事。不僅如此,您還可以自訂搜尋欄的每個部分。
您可以將網站的顏色組合與搜尋欄相符。

所有這些選項都可以在免費版本中使用。如果您想探索更多並使用此外掛程式的全部功能,您可以選擇高級版本。
在專業版中,您可以享受語音搜尋、自動完成、顏色自訂等功能。
常問問題
Q:搜尋欄對於電子商務網站有何重要意義?
答。當用戶登陸電子商務網站尋找任何產品時,他們只需進入搜尋框並輸入名稱即可。這是搜尋產品最方便的方式,因為它節省時間和精力。當您在搜尋欄中插入多種功能時,可以提高使用者的體驗、便利性和可靠性。
Q:哪些類型的網站可以將「搜尋類型」設定為「貼文」?
答。它主要是為博客網站設計的,博客有很多,用戶想搜索某個特定的博客,然後它就可以搜索到博客並進入博客。
結論
因此,我們已經看到 woocommerce 新增了自訂搜尋欄。它最終有助於促進銷售,因為它直接影響網站的印象。
TH 高級搜尋不僅適用於 woocommerce,還可以用於用戶需要跨網站查找的任何網站,無論是文章、部落格、新聞等。
我們不僅看到了使用,還看到瞭如何使用它的自訂選項,因為 Th Advance Search 是一個靈活的外掛程式。
我希望這個部落格能幫助你。不過,如果您有任何疑問或建議,請在評論部分告訴我。
您可以訂閱我們的YouTube 頻道,我們也在那裡上傳精彩內容,也請在Facebook和Twitter上關注我們。
發現更多文章
- 如何為 WordPress 設定 Google Analytics
- 如何在 WordPress 主題中新增 Google 地圖
- 如何使用 WPML 外掛程式翻譯 WordPress 主題