[woocommerce_product_filter]

該[woocommerce_product_filter]簡碼呈現現場產品搜索篩選器，客戶可以用它來提煉的店鋪頁面上顯示產品的選擇。

使用此簡碼顯示輸入字段，該字段在客戶輸入時更新在同一頁面上顯示的產品。

此短代碼必須在適當的上下文中使用，例如在商店頁面上顯示產品的位置。與該擴展程序提供的所有實時產品過濾器一樣，此過濾器字段用於優化產品選擇並將其縮減為僅包含那些與客戶正在尋找的產品相匹配的產品。

在商店頁面上使用此過濾器簡碼，或與[woocommerce_product_filter_products]任何頁面上的簡碼一起使用。該[woocommerce_product_filter_products]簡碼顯示產品，如果你是在店鋪頁面上，並與組合[woocommerce_product_filter]簡碼，它會動態地更新它們，而客戶類型的東西在搜索過濾器領域。

例

結合使用並以普通格式將這兩個短代碼放在這樣的頁面上：

這將顯示一個商店頁面，其頂部帶有“產品搜索”過濾器：

我們可以嘗試搜索，然後查看它如何實時更新頁面並顯示匹配的結果：

如您所見，此功能非常強大且易於使用。

簡碼屬性

您可以使用下面說明的屬性來自定義簡碼。例如：

[woocommerce_product_filter placeholder="What would you like to find?"]

搜索

這些屬性確定如何找到匹配的產品。這些都是默認啟用的。

• title –是否搜索產品標題。"yes"要么"no"
• 摘錄 –是否搜索產品簡短描述。"yes"要么"no"
• 內容 –是否搜索產品頁面內容。"yes"要么"no"
• 類別 –是否在相關產品類別中進行搜索。"yes"要么"no"
• 屬性 –是否搜索相關的產品屬性。"yes"要么"no"
• 標籤 –是否搜索相關標籤。"yes"要么"no"
• sku –是否搜索產品SKU。"yes"要么"no"

用戶界面

以下屬性與用戶界面和過濾器的表示有關。

• 佔位符 –字段為空時顯示的佔位符文本。
• blinker_timeout –設置顯示閃爍器的時間（以毫秒為單位）。"0"禁用它。
• 延遲 -訪問者停止鍵入以啟動搜索之後的時間（以毫秒為單位）。
• 字符 –訪問者必須在字段中鍵入的最小字符數才能開始搜索。
• Submit_button –是否顯示提交按鈕；默認禁用。"yes"要么"no"
• Submit_button_label –要使用的提交按鈕的標籤，而不是默認標籤，例如submit_button_label="Let's go!"。
• show_clear –是否顯示在單擊時允許清空字段的操作元素。"yes"要么"no"
• wpml –此選項與WPML一起使用，並確定搜索結果是否被當前語言過濾；默認情況下禁用，以啟用使用"yes"或使用"no"禁用

• update_address_bar –啟用此選項後，瀏覽器的地址欄將包含有關當前過濾器設置的信息。訪問者可以使用相同的過濾器為當前搜索添加書籤。組合使用實時過濾器時，必須啟用此選項。"yes"要么"no"
• update_document_title –此選項基於活動的過濾器更新瀏覽器的文檔標題。"yes"要么"no"
• use_shop_url –啟用此選項時，過濾器字段將鏈接到商店頁面，而不是當前頁面。如果過濾器顯示在商店頁面本身上，則不會有任何區別。"yes"要么"no"

標題

這些屬性與為過濾器顯示的標題有關。

• show_heading –此選項將顯示搜索字段過濾器的標題。"yes"要么"no"
• 標題 -您可以在此處設置自定義標題，也可以將其省略以使用默認標題。
• heading_class –設置標題元素的類。
• heading_element –您可以在此處設置將哪個HTML標記用作標題元素。使用"div"默認
• heading_id –設置標題元素的ID。

進階屬性

除非需要使用此過濾器處理特定情況，否則通常不應指定高級屬性。

• style –設置周圍容器的內聯CSS樣式。

• Breadcrumb_container –通過CSS類標識元素；默認情況下".woocommerce-breadcrumb"
• products_header_container –通過CSS類標識元素；默認情況下".woocommerce-products-header"
• products_container –通過CSS類標識元素；默認情況下".products"
• product_container –確定單個產品容器的CSS類；默認情況下".product"
• info_container –通過CSS類標識元素；默認情況下".woocommerce-info"
• ordering_container –通過CSS類識別元素；默認情況下".woocommerce-ordering"
• pagination_container –通過CSS類標識元素；默認情況下".woocomerce-pagination"
• result_count_container –通過CSS類標識元素；默認情況下".woocommerce-result-count"