製品フィルター ウィジェットを使用すると、買い物客は価格、評価、色、カテゴリなどの属性に応じて製品検索をフィルターできます。

商品フィルターウィジェットの使い方を学びましょう ウーコマース サイト：

Elementor WooCommerce ウェブサイトに商品フィルターを追加する方法 #

Elementor WooCommerce ウェブサイトに追加し、製品フィルターのレイアウトとスタイルをカスタマイズする方法を学びます。このプロセスは、わずか 4 つのステップで構成されています。

ステップ1: 製品フィルターウィジェットを有効にする #

商品フィルターウィジェットを有効にするには、

• に行く ShopEngine > ウィジェット > 製品フィルター
• オンにする 一般セクションの製品フィルター
• 保存 変化

注記： グローバル設定で商品フィルターをオンにすることもできます。 ShopEngine のすべてのウィジェットをオンにします 同時に。

ステップ2: 製品フィルターを追加する #

ウィジェットを追加する前に、まずShopEngineショップ/アーカイブテンプレートを作成する必要があります。 ショップテンプレートを作成する方法。

製品フィルターを追加するには:

• に行く ShopEngine > テンプレート > アーカイブテンプレート
• クリック Elementorで編集する

• 検索 要素検索オプションの製品フィルター
• ドラッグアンドドロップ ウィジェット 
• 変更を保存するには、「更新」をクリックします。

ステップ3: 製品フィルターのコンテンツ設定をカスタマイズする #

に行く コンテンツ > フィルター 次の設定をカスタマイズします。

• 価格フィルター: 編集オプションをクリックして、タイトル、価格範囲、最小価格、最大価格、ドット タイプを変更します。ドット タイプは価格ラインの終点です。
• 評価フィルター: 評価フィルターのタイトルを変更できます。
• カラーフィルター: ここでフィルター名を変更できます。また、カラードットの表示オプションをオン/オフにすることもできます。
• カテゴリフィルター:  タイトル、製品カテゴリ、並べ替えをカスタマイズできます。階層を表示します。ここから空のカテゴリを非表示にすることもできます。
• 画像フィルター: タイトルを変更したりカスタマイズしたりできます。ユーザーは商品画像に基づいて商品をフィルタリングできます。
• ラベルフィルター: タイトルを変更でき、ユーザーはラベルに基づいて製品をフィルタリングできます。
• 配送フィルター: ユーザーはこのフィルターを選択して、配送方法に基づいて製品をフィルターできます。
• ストックフィルター: このフィルターを使用すると、ユーザーは在庫量に基づいて製品をフィルターできます。
• セール中フィルター: ユーザーは希望に応じて、セールに基づいて商品をフィルタリングできます。そのため、ストアがセールを実施している場合、顧客は簡単にそれを見つけることができます。

に行く コンテンツ > レイアウト 次の設定をカスタマイズします。

• コンテナを有効にするトグルボタン: ここで、トグル ボタン オプションをオンにすると、ウィジェット全体をトグル ボタンの下に隠すことができます。また、配置を設定したり、アイコンを表示するかどうかの設定、アイコンのアップロード、アイコンの位置の選択、コンテナーの幅を選択することもできます。
• 列数（行あたり）: 列ごとに必要なフィルターの数を選択します。
• 列の余白: 列の左、右、上、下の余白を調整します。

に行く コンテンツ > 属性 次の設定をカスタマイズします。

• 属性を有効にする: 属性を表示する場合は SHOW を設定し、表示しない場合は HIDE を設定します。
• スタイル: 属性のスタイルとしてデフォルトまたは円を選択します。
• 属性リスト: ここで新しいアイテムを追加したり、詳細を編集したりできます。

ステップ4: 商品フィルターのスタイル設定 #

に行く スタイル タブをクリックして、次のスタイル設定をカスタマイズします。

• 一般的なスタイル: このオプションを展開すると、タイトル、タイポグラフィ、本文のタイポグラフィ、見出しの色、フィルター ラベルの色、グローバル フォント ファミリ、タイトルの下部パディング、項目の下部マージン、チェックボックスのスタイル、チェックボックスのアイコン、アイコン ライブラリ、チェックボックスの境界線の色、チェックされたアイコンの色、チェックされた背景、右マージン、チェックボックスのアイコンのサイズ、チェックボックスのサイズ、垂直位置、境界線の半径を変更できます。
• フィルター切り替えボタンとコンテナー: このオプションに取り組むには、まず、 オンにする の コンテナのトグルボタンを有効にしますか? 前に説明したように、コンテンツ セクションからオプションを選択します。明確に理解するには、下の画像を参照してください。これで、スタイル セクションでこのオプションを編集し、通常ビューとホバー ビューの両方のテキストの色と背景を変更できます。また、境界線の種類、幅、色、パディング、余白、コンテナーの背景色、境界線の種類、コンテナーのパディング (px)、コンテナー ボックスの影を変更するオプションもあります。

• 価格フィルター / 範囲スライダー: このオプションを展開すると、スライダーの色、アクティブ スライダーの色、範囲価格設定のテキストの色、下部のリセット マージン、通常表示とホバー表示の両方のテキストと背景の色を変更できます。
• 評価フィルター: ここでは、評価アイコン、アクティブアイコンの色、評価間のスペース、星のサイズを選択できます。
• カテゴリフィルター: サブカテゴリの周囲の上、右、下、左のパディングを調整します。

すべての変更が完了したらクリックします アップデート 保存します。これで、すべてのカスタマイズとスタイルが適用された商品フィルターがストアフロントに表示されるようになります。

ここにあります プレビュー 製品フィルターウィジェット

ShopEngine の製品フィルター ウィジェットには、顧客の製品検索プロセスを容易にするさまざまな機能があります。また、ドキュメントはウィジェットの学習とインストールに役立ちます。