WooCommerce を使用して独立した Web サイトを構築した後、ショップ ページまたは製品カテゴリ ディレクトリ ページにフィルターを追加する必要があります。

YITH WooCommerce Ajax 製品フィルターのデモ:

このフィルターでは、商品の色、仕様、サイズなどの属性を選択できます。このようなフィルターを使用すると、ユーザーは自分のニーズに基づいて必要な商品をすばやく見つけることができます。ここでは、YITH 社によって開発されたプラグインを用意しました。

1 YITH WooCommerce Ajax 製品フィルター プレミアムフィルター

さて、私たちは独立したステーションのバックエンドに戻ります。現在のサイトでは アストラこのようなテーマで構築されている場合、このテーマにはそのようなフィルター モジュールがないため、フィルター モジュールを追加し、プラグインを見つけて新しいプラグインを追加し、プラグインをアップロードして、クリックしてインストールを開く必要があります。

インストールが成功したら、プラグインをアクティブ化します。同じ会社のすべてのプラグインでは、商用版を購入する必要があります。ここでは GPL 版を使用しているため、バックエンドに直接戻り、左側の機能を使用します。ボタンには、Ajax 製品フィルター機能というもう 1 つの機能があります。

YITH WooCommerce Ajax 製品フィルタープラグインのインストール:

このプラグインは非常にシンプルです。ストア ページに属性フィルタリング モジュールを追加します。通常、プラグインをインストールしてパネルに入ると、デフォルトのフィルタリング モジュールが提供されます。ここでは、ショートコードが提供されます。このショートコードを直接コピーできます。

2 YITH WooCommerce Ajax 製品フィルター プレミアム インターフェース e1713969358926

たとえば、ショップ ページの左側にフィルターを追加したいとします。さまざまなテーマで、指定された位置にこのショートコードを配置するだけです。ここでは、サイドバーに直接追加し、テーマのガジェットを見つけて、ショップとフィルターを追加します。テーマによって異なる場合があります。

ここでは、デモンストレーションのために 2 番目の場所を使用しています。ここでは、Gutenberg の別のモジュールを使用します。デフォルトのショートコードを追加し、この位置にショートコードを貼り付け、貼り付けた後に保存し、ショップ ページを更新します。

しかし、更新すると、表示されていないことがわかります。これは、このテーマが特別な列を追加しないため、背景に戻る必要があるためです。テーマによって使用するメソッドは異なりますが、このモジュール メソッドの呼び出しは同じです。このショートコードをサイドバーに配置します。使用するテーマに応じて、サイドバー モジュールに配置するだけです。

サイドバーのプロパティの表示:

ショップ ページを見つけて、編集に進みます。エディターで、Astra などのテーマの設定を見つけます。ここにサイドバーがあることがわかります。サイドバーは使用されていません。サイドバーを左側に配置し、アップグレードしてから、ショップ ページを更新します。

3 YITH WooCommerce Ajax 製品フィルター フィルター効果 e1713969484560

左側にフィルター コンテンツがさらにいくつか表示されています。このフィルターのコンテンツをカスタマイズできます。もちろん、これには製品が必要です。たとえば、製品にいくつかの属性セット、いくつかの製品分類、およびいくつかの仕様がある場合、ここでフィルターのコンテンツをどのように変更できますか?

YITH WooCommerce Ajax 製品フィルター プラグインの設定:

また、Ajax製品フィルター機能に戻り、デフォルトモジュールを直接編集します。その後、デフォルトモジュールの名前を変更できます。もちろん、この名前はフロントではなくバックグラウンドでのみ表示されます。また、水平に表示することもできます。

4 YITH WooCommerce Ajax 製品フィルター フィルターモジュール設定 e1713969544352

以下は、現在表示されている 3 つのフィルターの内容です。最初のフィルターは、カテゴリとカテゴリ フィルターの名前をフィルターするものです。これは別々に定義できます。たとえば、これを製品カテゴリに変更すると、コンテンツをフィルターできます。モジュールはカテゴリ ディレクトリを呼び出すため、形式を選択できます。もちろん、製品タグや色、その他のコンテンツを呼び出すこともできます。

次のステップは、表示するカテゴリを選択することです。ここには 3 つのカテゴリが表示されています。もちろん、すべてのカテゴリを追加することもできます。そうすると、ストア内のすべての製品カテゴリがこの位置に表示されます。ユーザーは、カテゴリに基づいてショップ ページの製品数をフィルタリングできます。

5 YITH WooCommerce Ajax 製品フィルター カテゴリフィルター

次はチェックボックスです。ラジオボタンによる単一選択方式として設定できます。ここでは、複数回選択できます。単一選択を設定すると、1 つしか選択できません。次に、これに焦点を合わせることもできます。オプションでは、たとえば、すべてのカテゴリを呼び出す場合、カテゴリの名前と、これらのカテゴリのプロンプトの名前をそれぞれ変更できます。

フィルタリングされたディレクトリの上にマウスを移動すると、その下に追加の数字が表示されます。フィルタリングされたカテゴリが特に大きい場合は、折りたたまれた状態に設定して、デフォルトをオフにすることができます。

6 YITH WooCommerce Ajax 製品フィルターの折りたたみ効果

次は、並べ替え方法です。ここでは、カテゴリを並べ替えます。名前で並べ替え、昇順と降順、カテゴリに含まれる製品の数を表示するかどうか。次の 2 つはデフォルトで、保存します。では、もう一度更新してみましょう。ショップ ページに戻りましょう。自動的に折りたたまれます。クリックすると、後ろにさらに多くの数字が表示されます。もちろん、その下に設定があることを確認したところです。カテゴリ ディレクトリにアイテムがない場合は、閉じます。次の 1 つはそれを閉じます。

次は、商品の色属性です。 WooCommerce では、次の商品の属性があります。 属性の色を構築し、もう 1 つはその仕様です。 次に、そのような条件に従ってフィルタリングします。 、その設定方法は同じです。 まず、商品の色などの名前を変更し、次にフィルタリング方法は次のとおりです。 何をフィルタリングしますか?

ここではデフォルトでカテゴリを選択し、その下に呼ばれているのは特定の属性です。たとえば、私たちの製品のKaraは呼び出され、その後自動的に入力されるため、気にする必要はありません。現在、次の色の仕様は2つだけです。1つは青、もう1つは赤の2つの属性です。たくさんある場合は、すべて追加できます。もう1つは同じで、これが私たちの選択方法です。今はテストしていません。ラジオになると、カテゴリディレクトリを選択して、必要に応じて設定することしかできません。

7 YITH WooCommerce Ajax 製品フィルター カラー属性フィルター

次に、用語に表示される名前、そのプロンプトの名前、およびこの折りたたまれた状態でタブとして設定するかどうかをカスタマイズします。カテゴリ ディレクトリまたはフィルターされたコンテンツが大量にある場合は、オンにすることができます。デフォルトで開いたままにすることも、デフォルトでオフにすることもできます。

以下は、すべて同じです。表示しますか? 今設定しているのは色なので、異なる製品が同じ色になる場合がありますので、1 つの色が複数の製品に対応します。同じであれば表示できます。数量。

次はレベルです。カテゴリディレクトリの場合、各カテゴリディレクトリにサブディレクトリを作成すると、この階層構造を表示できます。色の場合は通常、レイヤー化がないため、選択するかどうかは関係ありません。

次の項目は複数選択ですか? 現在は複数選択です。青と赤を同時に選択することもできますが、その場合はこの 2 色のものだけが選択されます。

YITH WooCommerce Ajax 製品フィルター オプション:

最後のが空の場合は非表示にします。これが 2 番目のオプションです。他のオプションは同じです。別の仕様に基づいて呼び出します。

8 YITH WooCommerce Ajax 製品フィルター 新しいフィルター条件の追加

これら 3 つに加えて、さらに追加することもできます。たとえば、新しいフィルターを追加しました。選択方法は同じです。価格に基づいて選択できます。たとえば、ここでは、スライド価格にも数字を表示する価格があることがわかります。スライド価格を使用し、スライドを表示するかどうかを選択します。スライドを表示します。最小価格は 0 に設定され、最大価格は少し高く設定できます。次に、すべてのフィルターで、スライダー選択を 1 回スクロールするのにかかる費用はいくらですか?

YITH WooCommerce Ajax 製品フィルターの価格設定:

10元の範囲を選択してタブを表示できますか?まずはここでデフォルト設定、商品、価格を変更して保存してみましょう。

9 YITH WooCommerce Ajax 製品フィルター価格フィルターモジュール

さて、もう一度更新してみましょう。その下に価格オプション バーが追加されます。10 元スクロールするたびに、この範囲が少しずつ狭まります。たとえば、0 ~ 80 元になり、範囲でフィルターできます。さらにズームダウンすると、0 ~ 50 元の価格の範囲はなくなります。これは別のフィルター条件です。

その後、他のフィルタリング条件を追加する方法も同じです。ここでは、デフォルトのものを選択できます。たとえば、肯定的なレビューの数、オンラインで販売されているかどうかに基づいてフィルタリングできるようにして、フィルタリングすることもできます。ここにはすべて組み込まれています。

YITH WooCommerce Ajax 製品フィルターの基本設定:

基本設定に入ると、まずは結果を自動的に表示します。今のように、属性を選択すると、右側の製品が自動的に並べ替えられます。もちろん、ボタンを追加するという別の方法も使用できます。つまり、他のユーザーが選択した後、それが表示される前にボタンをクリックして確認する必要があります。

10 YITH WooCommerce Ajax 製品フィルター プラグイン設定 e1713969854784

次に、保存ボタンを追加します。フィルタリングに使用する方法は、たとえば、ここで属性をフィルタリングすると、URL は変更されず、ページは更新されません。Ajax 効果を使用します。以下は、いくつかのデフォルト設定です。たとえば、空のカテゴリをいくつか閉じると、このカテゴリに製品がない場合は、閉じて非表示になります。

チェックを付けて、在庫切れのものを非表示にすることができます。在庫がなくなり、別のクリールを追加できます。クリアはフィルタリング条件をクリアし、フィルタリングされたモジュールが携帯電話に表示されるかどうかを指定します。携帯電話に表示されます。モデルの状態を使用します。これはデフォルトで表示されます。表示されません。追加のボタンがあり、このボタンをクリックした場合にのみ、フィルタリング条件が表示されます。

携帯電話では、ページの幅が十分ではないため、次は自動的にフィルタリングした後、一番上までスクロールします。次に、フィルター全体の名前を有効にします。ここで、フィルター条件の上に表示される名前を入力できます。通常、必要ありません。次に、下にリセット ボタンを追加し、最初に保存します。保存後、ショップ ページを更新します。これで、モジュールをクリックするとクリアされます。次に、クリアします。これは、フィルタリングをキャンセルするのと同じです。このような操作です。

YITH WooCommerce Ajax 製品フィルターのスタイル設定:

次のボタンはカスタマイズです。たとえば、フィルタリング条件をオンにしました。タイトルを追加したので、ここで製品フィルターを追加できます。次はフィルタリング領域です。タイトルの色、背景色、アクティベーション色については、テーマのスタイルとより統一されるように、ここでテーマ スタイルを直接使用します。

11 YITH WooCommerce Ajax 製品フィルター スタイル設定

次に、色ボタンがあります。もちろん、ここでの色は現在複数選択を使用しているため、正方形または円形のフィルター条件として設定することもできます。以下は、フィルター条件の背景色でもあります。いくつかの操作を待ちます。

YITH WooCommerce Ajax 製品フィルター SEO 設定:

もう 1 つは、ロードするときです。フィルタリングするときにはロード アクションが発生するため、デフォルトのロードを使用して保存できます。保存後、ショッピング ページを更新します。すると、この状況になります。タイトルが追加され、SEO もターゲットになります。SEO の内容は非常にシンプルです。まず、フィルタリングには動的な効果があり、特にジャック サーチ エンジンが一般的にクロールするときには非常に困難です。はい、ロボットに書き込んで、モジュールをクロールできないようにします。

12 YITH WooCommerce Ajax 製品フィルター SEO 設定 e1713969995905

次に、URL です。たとえば、条件をフィルタリングする場合、URL に注意してください。属性が変更されます。ページは更新されませんが、URL アドレスなどの属性コンテンツがいくつか適用されます。これを変更することもできます。たとえば、プラグインのカスタム リンク形式を使用することも、フィルタリングされたリンク形式を使用することもできます。通常は、デフォルトを使用できます。または、より直接的に URL を変更しないこともできます。保存しましょう。 、そしてショップ ページを更新します。ここで、再度確認すると、URL がまったく変更されていないことがわかります。

以下の項目は見る必要はありません。1 つ目は、yith 社が開発した他のプラグインです。前に述べたように、手順を含め、直接使用することはできません。さらに、アクティベーション ステータスを確認してみましょう。これで、自動的にアクティベートされます。添付ファイルをダウンロードしてインストールする限り、キーを入力する必要はありません。これは、当社の製品ページ フィルター プラグインである YITH WooCommerce Ajax Product Filter に関するものです。