「[woocommerce_product_filter]」ショートコードは、お客様がショップページで表示される商品を絞り込むために使用できるライブ「商品検索フィルター」を表示します。
このショートコードを使用して、お客様が入力するたびに同じページで表示される商品が更新される入力フィールドを表示します。
このショートコードは、商品が表示される適切なコンテキスト、つまりショップページなどで使用する必要があります。この拡張機能が提供するすべてのライブ商品フィルターと同様に、このフィルターフィールドは商品の選択を絞り込み、顧客が探しているものに一致する商品のみを含むセットにします。
このフィルターショートコードはショップページまたは任意のページで「[woocommerce_product_filter_products]」ショートコードと併用して使用します。「[woocommerce_product_filter_products]」ショートコードは、顧客が検索フィルターフィールドに入力すると、ショップページ上にいるかのように商品を表示し、同時に動的に更新します。
ショートコードの属性
以下の属性を使用してショートコードをカスタマイズできます。例：
[woocommerce_product_filter placeholder="何をお探しですか？"]
検索
これらの属性は、一致する商品の検索方法を決定します。これらはすべてデフォルトで有効になっています。
- title – 商品タイトルで検索するかどうか。「
yes」または「no」 - excerpt – 商品の短い説明で検索するかどうか。「
yes」または「no」 - content – 商品ページの内容で検索するかどうか。「
yes」または「no」 - categories – 関連する商品カテゴリで検索するかどうか。「
yes」または「no」 - attributes – 関連する商品属性で検索するかどうか。「
yes」または「no」 - tags – 関連するタグで検索するかどうか。「
yes」または「no」 - sku – 商品のSKUで検索するかどうか。「
yes」または「no」
ユーザーインターフェース
以下の属性は、ユーザーインターフェースとフィルターの表示に関連しています。
- placeholder – フィールドが空の場合に表示するプレースホルダーテキスト。
- blinker_timeout – ブリンカーが表示される時間の制限をミリ秒単位で設定します。「
0」で無効にします。 - delay – 訪問者が入力を停止してから検索を開始するまでの時間（ミリ秒単位）。
- characters – 訪問者がフィールドに入力して検索を開始する最小文字数。
- 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 – ここでカスタマイズした見出しを設定できます。デフォルトを使用する場合は省略します。
- 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"」です。
