Articles

WooCommerce Docs

WooCommerce Product Search 拡張機能の一部である Product Filter – Categories ウィジェットは、あなたのショップにライブ商品カテゴリフィルタを提供します。

このライブ フィルターは、顧客がクリックできる製品カテゴリを表示します。

Styles トップに戻る

カテゴリ フィルターには、別の表示とユーザー エクスペリエンスを提供するいくつかのスタイルが用意されています。 これらはカスタマイズ可能で、各用語のサムネイルを表示するオプションもあります。

リスト スタイルでは、訪問者が用語の上にマウスを置いたときに、子用語を表示するために親の用語を拡張できる縦型の方法で用語を表示します。

List スタイルと同様の動作で、Inline スタイルは用語をより水平にレンダリングします。 ユーザーのインタラクションで拡張したり、柔軟または固定の高さで使用できます。

より伝統的な選択スタイルは、よりシンプルですが、ドロップダウンに似ています。 そのサイズも指定できるので、よりコンパクトなバージョンを使用したり、多数の用語を表示するために拡張したりできます。

これらのスタイルのすべてに、外観をカスタマイズして適切なユーザー エクスペリエンスを作成するための特定の設定があります。 さらに、属性フィルタもこれらのスタイルを提供します。

設定 トップに戻る

ここで説明する設定は、フィルタ ウィジェットの外観と動作を決定します。 表示する一致するカテゴリがないときは非表示になり、自動的にあるときは表示されるので、空のままにして、代わりにウィジェットが自動的に見出しを表示するようにすることをお勧めします。

見出し トップに戻る

  • 見出しを表示 – このオプションは、このフィルタの見出しを表示します。
  • 見出し – ここでカスタマイズした見出しを入力するか、デフォルトを使用するために空のままにすることができます。
  • 結果がない場合の見出し – 結果がない場合に表示される代替の見出しのテキストを入力することができます。

先頭に戻る表示

選択したスタイルによって、いくつかのオプションが使用可能または不可能な場合があります。 これには、ショップページ、製品タグ、製品カテゴリページなどが含まれます。

  • Style – 条件を表示する方法についてのオプションがあります。
  • Show thumbnails / Parents – このオプションを有効にすると、用語のサムネイルが表示されます。
  • 選択した用語のサムネイルを表示する – スタイルとしてドロップダウンが選択されている場合に使用できます。
  • Show names / Parents – 用語の名前を表示するには、このオプションを使用します。
  • 製品数の表示 – このオプションを有効にすると、用語ごとの関連製品数が表示されます。
  • 製品のない用語を表示しない – 関連製品のない用語を自動的に非表示にします。
  • 無選択時のテキスト – このオプションは、スタイルとしてドロップダウンが選択されている場合に使用でき、アイテムが選択されていないときにドロップダウン フィールドに表示されるテキストを決定します。
  • 条件数 – 数字が指定されている場合、表示される条件数を制限します。 セレクト ボックスの表示サイズを決定します。
  • Height – スタイルとして[ドロップダウン]が選択されている場合に使用可能です。 空のままだと、フィールドにフォーカスが当たったときに、ドロップダウンの選択肢が下に表示されます。 プレーンな数字が入力された場合、例えば、5、ドロップダウンはエントリーの示された数を表示するために固定された高さを採用します。 CSS単位*の数値が使用された場合、例えば120pxのように、ドロップダウンは示された単位に従って固定された高さを採用します。
  • Toggle the component – フィルターコンポーネントにオプションがない場合、「yes」(デフォルト)または「no」で非表示にします。
  • ウィジェットの切り替え – コンポーネントにオプションがない場合、「yes」(デフォルト)または「no」でウィジェットを隠します。
  • 順序 トップに戻る

    • 順番 … – このオプションを使って、用語を表示する順序を決定します。 例えば、アルファベット順の場合は用語の名前、製品カテゴリのリストで設定されているように表示する場合は用語の順番など、いくつかの基準の1つによって順番を選択することができます。

    ナビゲーション トップに戻る

    このセクションのオプションは、製品カテゴリ階層が訪問者に表示される方法と対話方法を決定します。

    デフォルト値を使用すると、ルート カテゴリが表示され、その子は非表示になります。

    タッチ対応デバイスでは、カテゴリの展開記号をタップして、その子を表示することができます。

    Here is the example showing only the root categories with their expanders:

    Here is the same area but now the children of both categories has been expanded:

    The options that control the navigation experience through product categories are:

    • Expand Child Terms – ここで、どのレベルでカテゴリを隠すかを決定することができます。 デフォルトでは、ルート カテゴリのみが表示され、子カテゴリがある場合は、拡張記号が表示されます。
    • Expand automatically – これはデフォルトで有効になっており、拡張可能なカテゴリは、マウスを置いたときに自動的にその子カテゴリが表示されます。 これをオフにすると、タッチ対応デバイスでタップする必要があるのと同様に、子カテゴリを表示するには明示的にエキスパンダーをクリックする必要があります。
    • 自動的に隠す – カテゴリが表示されている領域の外に移動すると、子カテゴリは自動的に隠されます。 これはデフォルトで有効です。
    • Show expanders – これは、子を持つカテゴリのエキスパンダーとリトラクターを表示します。
    • Show the ancestor hierarchy – これは、現在のコンテキストに基づく祖先階層が表示されるかどうかを決定します。
    • Show the parent navigation – 有効にすると、階層内に戻って移動できる祖先の追加リンクが表示されます。

    用語 トップに戻る

    • Deepth – このオプションでは用語階層内の深さを制限することができます。
    • Filter – このオプションはライブ フィルタリングのために有効にする必要があります。
    • Hierarchical – 用語を階層構造として表示するかどうか。
    • 表示 – a) すべての用語を表示するか、b) [設定] を使用して、選択した用語の階層内にある用語のみを表示するかを決定します。 空のままだと、すべての用語が表示されます。
    • 除外する用語 – ここに除外する用語をID、スラッグ、または名前とカンマで区切って指定します。 含める用語が指定された場合、このフィールドを完全に上書きします。
    • 親用語 – 表示される用語を指定された用語の子に制限します。 トークン {current} は、現在の用語の子に制限するために使用できます。

    詳細

    詳細オプションは、このフィルタで特定のケースにアプローチする必要がない限り、デフォルトのままにしておく必要があります。

  • Heading Class – これは見出し要素のクラスを設定します。
  • Heading Element – ここで、どの HTML タグが見出し要素として使われるかを選択できます。
  • Container ID – これはフィルターのメイン div コンテナ要素の ID を設定します。
  • Container Class – これはフィルターのメイン div コンテナ要素のクラスへ付加します。