Avadaテーマチュートリアル：Wooフィルターエレメントを使って商品にフィルターを追加する方法

あるWooCommerceストアの構築ユーザーに便利な商品スクリーニング体験を提供することは、コンバージョン率とユーザー満足度を向上させる重要なステップです。アバダビルダー 完全に機能するウーフィルターエレメントを提供。ユーザーが価格、属性、評価、その他の条件に基づいて商品を素早くフィルタリングし、欲しい商品をより効率的に見つけることができる。

この記事では、以下の方法を順を追って説明します。 アバダ ずぼしをさす ウー・フィルター・エレメントフィルタリング機能を備えたショップページを構築する。

ウー・フィルター・エレメントの紹介

アバダ 提供 ウー・フィルター・エレメント従来の代替品として使用 WooCommerceウィジェットより柔軟で、視覚的な一貫性を提供する。核となる要素は4つある：

• ウー・フィルター・アクティブ現在有効なフィルター条件を表示
• 属性によるウー・フィルター製品属性によるフィルタリングカラーサイズなど
• ウー 価格で絞り込む価格帯で絞り込む
• ウー 評価で絞り込むユーザー評価によるフィルタリング

注：これらの要素は、製品アーカイブにのみ適用されます。したがって、通常のページに直接追加することはできない。

手続き

レイアウトで店舗ページを構築する

Wooフィルター機能を有効にするには アバダ・レイアウト 通常のページ編集方法ではなく、新しいページレイアウトを作成します。これにより ポストカード・アーカイブス 要素は製品をロードし、Woo Filter要素と連動します。

• 出向く アバダ > レイアウト例えば、新しいレイアウトを作成したい場合、"New Shop "という名前を付けます。

• を追加する。 コンテンツレイアウトセクション

• オリジナルのショップページのコンテナこの新しいレイアウトにコピー＆ペーストする

ポストカード・エレメントをポストカード・アーカイブスに置き換える

Woo Filterはアーカイブされたコンテンツに対してのみ機能します。 ポストカード 要素に置き換えられる。 ポストカード・アーカイブス 要素を作成し、コンテンツ・ソースを"製品アーカイブ(商品アーカイブ）」。

• ページあたりの列数、カードスタイルなどのパラメータを設定する。
• 元の組版の一貫性を維持する

ウーフィルターエレメントの追加

1.ウー・フィルター・アクティブ

この要素は、現在適用されているフィルタを表示するために使用され、常に追加することが推奨されます。

2.価格によるウーフィルター

ユーザーは、商品をフィルタリングする価格帯をカスタマイズしたり、タイトルのスタイルやスライダーの外観を設定することができます。

3. 属性によるウーフィルター

などのボタンが押せる。カラー","サイズ"などの商品属性フィルター、リストやドロップダウンメニューの表示をサポートします。この要素は、複数の属性を別々に表示するために再利用することができます。

4.ウー 評価によるフィルター

に従って使用すること。点数商品のフィルタリング（例：星4つ以上の商品を表示）、ユーザー評価システムを持つウェブサイトに適しています。

各要素は、スタイルパネルでフォントサイズ、余白、色、その他の視覚的な詳細をカスタマイズすることができます。

表示条件の設定

ページのレイアウトと要素の追加が終わったら、それらをAvada Layoutの"前提条件「このレイアウトを製品アーカイブページでのみ動作(ショップページまたは商品カテゴリーページ）：

• オープンレイアウトの条件設定

• オプション アーカイブ > 製品アーカイブ ターゲット・ディスプレイ・エリアとして

• オプション：以下のオプションの使用を有効にすることができます。 製品カテゴリー ウェブページ

WooCommerce製品サイクリングを有効にする

最後に WooCommerceはショップページの設定をページオプションのコンテンツタブで"WooCommerceの商品サイクルを表示する" オプション (WooCommerce ショップループを表示) でポストカードアーカイブが商品を正しくロードできるようにします。

デモンストレーション

すべての設定が完了したら、ページを更新して、商品フィルターバーにショップページ。左側が表示できます：

• 現在アクティブなフィルター（ワンクリックでクリア可能）
• 価格審査スライダー
• サイズなどの属性のフィルタリングされたリスト
• ユーザー評価のフィルタリングオプション

ユーザーがフィルター項目をクリックすると、ページが自動的に更新され、条件を満たす商品のみが表示されるため、閲覧効率とショッピング体験が大幅に向上する。

概要

Woo Filter要素は、AvadaがWooCommerceのショップページに提供する高度な機能で、設定は少し複雑ですが、その柔軟なフィルタリングシステムと優れたビジュアル統合により、ユーザーのショッピング体験を大幅に向上させることができます。WordPress関連のチュートリアルや情報については光子ゆらぎネットワーク最も充実したWordPressチュートリアルと、最もアクティブなWordPress Exchange コミュニティ.