如何使用產品搜索 WooCommerce 塊

已發表: 2021-12-18

您銷售的產品越多，客戶就越難找到他們正在尋找的確切商品。許多訪問者沒有時間瀏覽一頁又一頁的產品。這就是產品搜索WooCommerce 塊可以提供幫助的地方。它使您能夠添加一個搜索欄，訪問者可以使用該搜索欄來查找他們想要購買的商品。

本文將向您展示如何將產品搜索塊添加到您的帖子和頁面，並討論如何配置它。我們還將介紹一些有效使用該塊的技巧。

讓我們開始吧！

如何將產品搜索 WooCommerce 塊添加到您的帖子或頁面

在 WordPress 中添加產品搜索塊是一個非常簡單的過程。打開要放置元素的頁面的塊編輯器，然後單擊 + 號以添加新塊。然後，使用搜索欄查找“產品搜索”：

添加產品搜索塊

該塊本身包括兩個元素：標題和搜索欄。 產品搜索塊如下所示：

塊編輯器中的產品搜索塊

您可以編輯搜索欄上方的字段標籤和搜索欄本身的文本。在下面的屏幕截圖中，我們修改了兩個元素的文本：

自定義產品搜索塊

當您使用搜索欄時，您會注意到它不包含自動完成功能。這意味著當用戶在搜索欄中輸入產品名稱時，該塊不會向用戶提供建議。

儘管存在輕微的可用性缺點，但產品搜索塊使用起來很簡單。客戶可以輸入完整或部分產品名稱，WordPress 將在新頁面上返回相關結果。

產品搜索塊提供了最小範圍的配置選項。如果將鼠標懸停在塊上，則可以使用其上方顯示的格式菜單更改其對齊方式：

更改產品搜索塊的對齊方式

選擇塊並單擊屏幕右上角的齒輪形圖標將打開一個菜單，其中包含一個附加配置選項。

在這裡，您將看到一個允許您刪除搜索字段標籤的設置。這是您在產品搜索欄上方看到的標題：

為產品搜索塊啟用搜索字段標籤

您還會注意到配置設置中“內容”部分下方的“高級”選項卡。高級選項卡包含一個用於將自定義 CSS 類添加到產品搜索塊的字段：

將自定義 CSS 類添加到產品搜索塊

從此 block 僅包含少量配置設置，您需要使用自定義 CSS 來調整其樣式。但是，這可能不是必需的，因為Product Search塊的默認設計非常簡約。因此，無論您使用哪個 WordPress 主題，它都不應該顯得格格不入。

產品搜索塊非常靈活。因此，您幾乎可以將其放置在 WordPress 網站上的任何位置。

理想情況下，您應該考慮將塊放在顯示產品的任何頁面的前面和中心。這樣，訪問者就不會錯過它，他們將能夠使用它來找到他們正在尋找的項目：

產品搜索塊在行動

根據我們的經驗，如果您將產品搜索塊放在產品網格上方，用戶就不太可能忽略它。當訪問者使用該元素時，它會將他們發送到一個新頁面，其中包括他們的搜索結果：

在 WooCommerce 中搜索連帽衫的結果

此外，產品搜索塊僅在您使用描述性產品標題和詳盡描述時才有效。如果沒有適當的標識符，搜索功能不會將訪問者引導至他們想要的項目。在許多情況下，糟糕的設計會導致銷售損失。

如果您對“產品搜索”塊或其工作方式仍有任何疑問，本部分應予以解答。讓我們首先談談產品搜索塊和 WordPress 的默認搜索功能之間的區別。

默認的 WordPress 搜索工具可以讓訪問者在您的商店中查找產品。這種方法的問題在於 WordPress 的搜索功能在設計時並未考慮到 WooCommerce 產品。這意味著結果頁面不顯示產品價格或添加到購物車按鈕。

此外，如果訪問者使用 WordPress 搜索欄查找產品，他們可能還會看到其他頁面和帖子出現在結果中。幸運的是，使用Product Search塊可以解決這些問題。

產品搜索塊不包括自動完成功能。這意味著用戶需要點擊搜索按鈕來查詢 WordPress 並在新頁面上看到結果。只要您的網站提供了不錯的性能並且其頁面加載速度很快，那麼缺少自動完成就不應該是一個重大問題。

如果您正在尋找特定產品並且在您使用“產品搜索”塊時它沒有出現，那麼您使用的關鍵字可能存在問題。在這種情況下，我們建議修改搜索詞。如果這不起作用，您可以編輯產品的標題和描述，以便客戶更容易找到。

產品搜索WooCommerce 塊可能看起來很簡單。儘管如此，對於任何擁有豐富產品目錄的商店來說，它都是必不可少的元素。許多電商用戶習慣於在心跳中搜索產品。儘管默認的 WordPress搜索塊運行良好，但它並不是 WooCommerce 商店的最佳選擇。

在您的商店中添加產品搜索塊將使訪問者更容易找到他們有興趣購買的商品。如果產品本身是高質量的，則此導航功能可以轉化為額外的購買並幫助您發展業務。

您對如何使用產品搜索WooCommerce 塊有任何疑問嗎？ 讓我們在下面的評論部分中討論它們！

特色圖片來自 holaillustrations / shutterstock.com