如何自定義 WooCommerce 產品搜索結果頁面

已發表: 2022-05-02

您想自定義您的 WooCommerce 產品搜索結果頁面嗎?

默認情況下,WordPress 和 WooCommerce 的搜索功能有限。 通過自定義您的產品搜索結果,您將能夠增加銷售額並發展您的業務。

在本文中,我們將展示一些簡單的方法,您可以自定義 WooCommerce 產品搜索結果頁面以提供更好的用戶體驗。

How to Customize WooCommerce Product Search Results Page

為什麼要自定義 WooCommerce 產品搜索結果頁面?

默認情況下,WooCommerce 帶有內置的產品搜索功能。 但是,它有嚴重的局限性。 這可能意味著您的客戶將無法找到他們正在尋找的產品。

因此,您可能會失去潛在的銷售。 如果您的客戶找不到他們想要的東西,那麼他們可能不會回到您的在線商店。

這是怎麼發生的? 默認的 WooCommerce 搜索僅索引帖子和頁面的標題、內容和摘錄。 它在執行搜索時不考慮自定義字段中的任何內容。

這是一個問題,因為您的大量 WooCommerce 產品數據存儲在自定義字段中。 因此,您的 WooCommerce 產品類別、標籤、評論和其他特殊屬性都不會被編入索引。

幸運的是,您可以使用 WooCommerce 產品搜索插件解決此問題。

話雖如此,讓我們看一些如何改進 WooCommerce 產品搜索結果頁面的示例。

以下是您將從本指南中學到的內容。 您可以點擊鏈接跳轉到您感興趣的部分。

  • 使 WooCommerce 產品數據可搜索
  • 自定義將在搜索結果頁面上顯示的產品
  • 以實時模式顯示產品搜索結果
  • 查找部分匹配項和其他高級功能

使 WooCommerce 產品數據可搜索

您需要做的第一件事是安裝並激活 SearchWP 插件。 有關更多詳細信息,請參閱我們關於如何安裝 WordPress 插件的分步指南。

SearchWP 是 WordPress 最好的自定義搜索插件,被 30,000 多個網站使用。 它也是 WooCommerce 的最佳插件之一,因為它可以為您的客戶提供更相關的產品結果。

注意:您至少需要 Pro 計劃才能訪問 WooCommerce 集成。

激活後,您需要訪問SearchWP » 設置頁面並切換到“支持”選項卡以輸入您的許可證密鑰。 您可以在 SearchWP 網站的帳戶區域中找到它。

Paste Your SearchWP License Key

接下來,您需要安裝並激活 WooCommerce 集成擴展。

您可以從 SearchWP 網站上的帳戶區域下載並安裝它,就像安裝任何其他 WordPress 插件一樣。

Install the WooCommerce Integration Extension

現在您已準備好設置您的 SearchWP 自定義搜索引擎。

只需轉到SearchWP » 設置頁面並確保您位於“引擎”選項卡上。 到達那里後,您需要單擊“來源和設置”按鈕。

Click on the 'Sources & Settings' Button

這將彈出一個彈出窗口,您應確保選中“產品”旁邊的複選框。 這將允許 SearchWP 索引您的 WooCommerce 產品。

WooCommerce 產品評論存儲為評論。 如果您想讓評論可搜索,那麼您還應該選中“評論”框。

Check the Products and Comments Boxes

完成後,單擊“完成”按鈕關閉彈出窗口。

現在您需要向下滾動到“產品”部分。 請注意,默認情況下,插件只會查看產品標題、內容(描述)、slug 和摘錄(簡短描述)。

Click the 'Add/Remove Attributes' Button in the Products Section

您可以通過單擊“添加/刪除屬性”按鈕來擴展 SearchWP 的範圍。

這將彈出一個彈出窗口,您可以在其中在搜索中包含特定的自定義字段和分類法。 在本教程中,我們添加了“顏色”和“尺寸”自定義字段,以及分類法“產品類別”和“產品標籤”。

Add Custom Fields and Taxonomies to the Search Engine

您現在可以單擊“完成”按鈕,您應該注意到這些自定義字段和分類已添加到 SearchWP 的產品部分。

之後,您可以調整每個屬性的權重。 如果您想讓特定屬性在搜索結果中更重要,只需將滑塊向右移動即可。

Adjust the Importance of Each Attribute

完成後,繼續並單擊屏幕頂部的“保存引擎”按鈕以保存您的設置。

SearchWP 將開始在後台重建您的搜索索引。 之後,該插件將準備好開始向您的 WooCommerce 商店提供更相關的搜索結果。

Click the 'Save Engine' Button

SearchWP 將自動使用您在線商店中的任何搜索表單。 但是,如果您需要添加搜索表單,請參閱我們的分步指南,了解如何創建自定義 WordPress 搜索表單。 這還將教您如何使用自定義 CSS 設置結果頁面的樣式。

現在您可以前往 WooCommerce 商店試用搜索功能。 我們將搜索產品類別“帽衫”,該類別中的所有產品都會顯示出來。

Product Search Results Page Preview

要了解更多信息,請參閱我們的指南,了解如何進行智能 WooCommerce 產品搜索。

自定義將在搜索結果頁面上顯示的產品

默認情況下,SearchWP 會將您在線商店中的所有產品包含在搜索結果中。 但是,您可能希望指定應該或不應該顯示哪些產品。

例如,如果產品處於某些條件下(例如停產或缺貨),您可以自動排除產品。 或者您可能只展示正在銷售或免費送貨的產品。

例如,AeroPress WooCommerce 商店可讓您搜索免費送貨的產品。 這對客戶進行購買是一個很大的激勵。

AeroPress Product Search Results Page

要開始,您應該單擊 SearchWP 產品部分中的“編輯規則”按鈕。

Click the 'Edit Rules' Button

現在沒有規則。 您可以根據需要創建任意數量的規則。

要創建您的第一個規則,您需要單擊“添加規則”按鈕。

Click the 'Add Rule' Button

現在,您可以指定應在搜索結果中顯示或排除哪些產品的條件。 對於本教程,我們將排除所有缺貨產品。

首先,您應該從第一個下拉菜單中選擇“Exclude entries if”。 然後選擇“產品可見性”分類並在其旁邊的字段中輸入“缺貨”。

Creating a Rule to Exclude Out of Stock Products

如果您願意,您可以通過單擊“或”按鈕添加應排除的附加條件。 完成添加規則後,單擊“完成”按鈕。

現在您需要做的就是按下頂部的“保存引擎”按鈕來存儲您的更改。

Click the 'Save Engine' Button

要了解更多使用 SearchWP 規則的方法,請參閱我們的指南,了解如何從 WordPress 搜索中排除特定頁面、作者等。

在實時模式下顯示產品搜索結果

實時搜索將通過在客戶鍵入查詢時自動顯示搜索結果來改善您的 WooCommerce 商店的搜索體驗。

例如,Good Dye Young 提供有關其頭髮和化妝產品的實時搜索結果。

當客戶輸入搜索查詢時,相關產品和文章會立即顯示,從而提供更好的用戶體驗。

Good Dye Young Product Search Results Page

要將其添加到您自己的商店,您需要做的就是安裝並激活免費的 SearchWP Live Ajax Lite Search 插件。 有關更多詳細信息,請參閱我們關於如何安裝 WordPress 插件的分步指南。

激活後,您的 WooCommerce 搜索表單將自動提供實時搜索。

Live Search Preview

有關更多詳細信息,請參閱我們的指南,了解如何將實時搜索添加到您的 WordPress 網站。

查找部分匹配和其他高級功能

部分匹配將幫助您的客戶找到他們正在搜索的內容,即使他們沒有輸入整個單詞或使用正確的拼寫。

例如,Magna-Tiles 在線商店啟用了部分匹配。 客戶只需鍵入產品名稱的一部分即可在搜索結果中找到它。

Magna-Tiles Product Search Results Page

要在 SearchWP 中啟用部分匹配,您應該導航到SearchWP » 設置並單擊高級選項卡。

在此頁面上,您可以啟用一些設置,使您的用戶更容易找到他們正在尋找的內容。

SearchWP Advanced Settings

檢查您想要的任何這些選項:

  • 部分匹配也會顯示與正在搜索的詞不完全匹配的結果。
  • 自動“你的意思是?” 更正將建議一個稍微不同的搜索詞,以匹配您在線商店中的更多產品。
  • 支持“引用/短語搜索”將允許您的用戶在搜索確切的短語時使用引號。
  • 在結果中突出顯示術語將使您的客戶更容易在搜索結果中找到他們正在尋找的內容。

我們希望本教程幫助您了解如何自定義 WooCommerce 產品搜索結果頁面。 您可能還想了解如何在 WooCommerce 中添加批發定價,或查看我們的最佳電子郵件營銷服務列表。

如果您喜歡這篇文章,請訂閱我們的 YouTube 頻道以獲取 WordPress 視頻教程。 您也可以在 Twitter 和 Facebook 上找到我們。