WoodMart商品フィルター設定チュートリアル:価格、ブランド、属性フィルターガイド

使用中 ウッドマートのテーマショッピングモールのウェブサイトを構築する際、商品のフィルタリングは非常に重要な部分です。バイヤーがショップをブラウズするとき、彼らはすぐに適切な製品を見つけることができ、ほとんどすべてがサイドバーのフィルタリングに依存しています。WoodMartテーマには、価格、ブランド、色、サイズ、素材や他の多くの条件によるフィルタリングをサポートする強力なフィルタリングシステムが付属しており、追加のプラグインをインストールする必要はありません。

画像[1]-WoodMart商品フィルタ設定チュートリアル:価格、ブランド、属性フィルタリングの完全ガイド

この投稿では、WoodMartのフィルター機能、価格帯、ブランドリスト、様々な商品属性の設定方法をステップバイステップでご紹介します。

I. Filterのコアプラグイン:WoodMart商品スクリーニングウィジェット

ウッドマート製品フィルタリング機能主に独自のウィジェットに依存しています。外観 → ウィジェット(またはカスタマイズ → ウィジェット)に「WoodMart Layered Nav」というフィルターモジュールのセットがあります。

画像[2]-WoodMart商品フィルタ設定チュートリアル:価格、ブランド、属性フィルタリングの完全ガイド

これらのモジュールを有効にするには、まずショップページのレイアウトがサイドバーをサポートしていることを確認してください。

画像[3]-WoodMart商品フィルタ設定チュートリアル:価格、ブランド、属性フィルタリングの完全ガイド

次に、価格フィルター機能を設定する。

価格フィルターは、最も一般的で便利な機能の一つです。woodMartは、ユーザーが自由に価格帯を選択できるスライド式価格帯モジュールを提供しています。

セッティング方法:

  • 左背景メニューの[外観]→[ウィジェット]をクリックする。
  • 探せ"ショップフィルター「クリックすると拡大します
  • クリック "+"ボタンをクリックして新しいガジェットを追加する。
  • ポップアップウィンドウで検索する:ウッドマート価格フィルター もしかしたら 価格による製品フィルター.
画像[4]-WoodMart商品フィルタ設定チュートリアル:価格、ブランド、属性フィルタリングの完全ガイド
  • それを選択し、Addをクリックする。
  • タイトル(例:"Filter by Price")を入力し、右上の[Update]をクリックして保存します。
画像 [5]-WoodMart Product Filter Setup Tutorial: 価格、ブランド、属性フィルタリングの完全ガイド

フロントエンドに表示されると、ユーザーは価格スライダーを引いて自由に価格帯を選ぶことができる。

価格スクリーニングが反応しない場合は、確認してください:

  • すべての商品に価格はついていますか?
  • サイトがWooCommerceのデフォルト・ソートを有効にしているかどうか
  • Ajaxフィルタリングが有効かどうか
画像 [6]-WoodMart Product Filter Setup Tutorial: 価格、ブランド、属性フィルタリングの完全ガイド

第三に、ブランドフィルター機能を設定する

WoodMartはコモディティブランドのフィルタリングに対応していますが、ブランド自体は WooCommerce デフォルトのカテゴリー最初にブランド属性を作成する必要があります。

手順は以下の通り:

  • バックエンド → 商品 → プロパティ
  • ブランド」のような新しい属性を追加する。
画像 [7]-WoodMart Product Filter Setup Tutorial: 価格、ブランド、属性フィルタリングの完全ガイド
  • 商品編集ページで、各商品にブランドを割り当てます。
画像 [8]-WoodMart Product Filter Setup Tutorial: 価格、ブランド、属性フィルタリングの完全ガイド
  • 外観に戻る → ウィジェット
  • WoodMart Layered Nav」ウィジェットをドラッグします。
  • 属性「ブランド」を選択する。
画像 [9]-WoodMart Product Filter Setup Tutorial: 価格、ブランド、属性フィルタリングの完全ガイド
  • 保存されると、フロントエンドにブランド・リスト・フィルターが表示されます。

このモジュールは自動的にすべてのブランドをリストアップし、対応する製品をフィルタリングするためにブランドをクリックします。

ブランドをロゴアイコンとして表示させたい場合は、「商品 → プロパティ → ブランディング」でブランドアイテムごとに画像を設定できます。

第四に、色、サイズ、その他の属性のフィルタリングを設定する。

色やサイズなどのプロパティは、ブランディングと同様の方法で設定される:

  1. バックエンド → 商品 → プロパティ
  2. Colour(色)」や「Size(サイズ)」のようなプロパティ名を作成します。
  3. 赤、青、緑、S、M、Lなど、複数のサブオプションを追加する。
  4. 商品編集ページで、以下の属性値を商品に追加します。
  5. ウィジェットエリアに戻り、"WoodMart Layered Nav "モジュールを追加します。
  6. 対応するプロパティ項目を選択する

色をテキストではなく色のブロックとして表示したい場合は必須:

  • プロパティ」の設定で、タイプを「カラー」に設定する。
  • 各カラーアイテムに対応するカラー値を指定します(例:赤は#ff0000)。

フロントエンドはカラーブロックを表示し、フィルタリングするカラーブロックをクリックします。

画像 [10]-WoodMart Product Filter Setup Tutorial: 価格、ブランド、属性フィルタリングの完全ガイド

V. Ajaxによるリフレッシュなしのフィルタリングを有効にする

ウッドマートサポート Ajaxフィルタリングつまり、ユーザーが条件を絞り込んでからページ全体が更新されるのではなく、部分的に商品リストが更新されるだけなので、閲覧がスムーズになります。

道を開けろ:

  • バックステージ → WoodMart → テーマ設定
  • 製品アーカイブ」の設定に移動します。
  • AJAX shop "を見つけて有効にする。
  • 設定の保存
画像 [11]-WoodMart Product Filter Setup Tutorial: 価格、ブランド、属性フィルタリングの完全ガイド

この機能はデフォルトでオンになっていますが、フィルタリング後にページがジャンプしたり、全体的にリフレッシュしたりする場合は、ここに来て有効になっていることを確認してください。

VI.フィルタリングの順序と表示の最適化

より多くの商品と属性の場合ショップその中で、例えばフィルターの順番を合理的にすることが推奨される:

  • 価格フィルターを最初にかける
  • それからブランドだ。
  • 次に、色、サイズなどの属性
  • 最後にClear filtersボタン(「Reset filters」)を押す。

こうすることで、ユーザーはより明晰な頭でブラウジングすることができ、重要な選択肢を見逃すことも少なくなる。

さらに、WoodMartのフィルターは折りたたみと拡張に対応しているので、フィルターがたくさんある場合は「折りたたみ」オプションをオンにしてスペースを節約することができます。

VII. よくある問題のトラブルシューティング

問題1:フィルターをクリックしても商品が表示されない?

  • 製品が対応する属性を追加していない
  • 商品未発表
  • 属性のスペルミスまたは大文字と小文字の不一致

問題2:価格スライダーが表示されない、または異常にスライドする?

  • 商品価格が0または空に設定されている
  • 通貨プラグインによっては、スライダーのロジックに影響を与える場合があります。

質問3:複数のフィルターを組み合わせると商品が消えてしまう?

  • 選択肢の間に交差点がない可能性もある。
  • フィルターを通してステップバイステップでユーザーをガイドし、"Clear Filter "ボタンを使って条件をリセットすることをお勧めします。

概要

ウッドマートのテーマ組み込みのフィルタリングシステムは非常に完全で、価格、ブランド、色、サイズなどを、追加のプラグインをインストールすることなく、簡単に設定することができます。属性構造を計画し、ウィジェットを設定し、Ajaxフィルターをオンにしさえすれば、スムーズなエクスペリエンスと明確なカテゴライズでショッピングページを作成することができます。


お問い合わせ
チュートリアルが読めない?無料でお答えします!個人サイト、中小企業サイトのための無料ヘルプ!
カスタマーサービス WeChat
カスタマーサービス WeChat
電話:020-2206-9892
QQ咨询:1025174874
Eメール:info@361sale.com
勤務時間: 月~金、9:30~18:30、祝日休み
© 複製に関する声明
この記事はリトル・リンが執筆した。
終わり
好きなら応援してください。
クドス1446 分かち合う
おすすめ
解説 ソファ購入

コメントを投稿するにはログインしてください

    コメントなし