WooCommerce レイヤードナビゲーション

Woocommerce Layered Navは、標準の製品属性によるフィルタリングを超えた豊富なユーザーエクスペリエンスを提供します。

この拡張機能は、顧客が素早く製品を見つけるのを助け、サイズや色などの同じ属性を持つ多数の製品を扱うストアに適しています。これはAjaxコールを使用してページのコンテンツをリロードし、カラースウォッチ、セレクター、チェックボックスなどのユーザーインターフェース要素とオプションを追加します。

インストール方法

1. ダウンロード：WooCommerceアカウントから.zipファイルをダウンロードします。
2. WordPress管理画面に移動：プラグイン ＞ 新規追加をクリックし、ダウンロードしたファイルを選択してプラグインをアップロードします。
3. 今すぐインストールをクリックし、拡張機能を有効化します。

インストールと有効化後、WordPressウィジェット画面には3つの新しいウィジェットが利用可能になります：

• WooCommerce Ajax Layered Nav
• WooCommerce Layered Nav Filters
• WooCommerce Ajax Layered Nav Clear

セットアップと設定

新しいウィジェットを設定するには、外観 ＞ ウィジェットに移動します。

WooCommerce Ajax Layered Navウィジェット

1. WooCommerce Ajax Layered Navをウィジェットエリアにドラッグアンドドロップします。
2. そのインスタンスで使用するグローバル属性を選択します（例：色、サイズ）。
3. 以下に説明する表示オプションを選択します。
4. 以下に説明するクエリタイプを選択します。

表示オプション

リスト

リストは、フロントエンドでオプションを順不同リストとして出力します。表示とスタイルはデフォルトの製品属性によるフィルタリングと同じですが、Ajaxコールバックが含まれています。

ドロップダウン

ドロップダウンは、顧客がクリックして選択肢をハイライトするボックスで属性を表示します。

チェックボックス

チェックボックスは属性を無順のチェックボックスリストとして表示します。

サイズセレクター

サイズセレクターは、フロントエンドで使用するための短いラベルが入力フィールドでリストされた属性を表示します。これらのラベルは、通常は服のサイトや店舗で見られるように、左から右へのインラインタグのシリーズとして表示されます。例：XS、S、M、L、XL。

カラーピッカー

カラーピッカーは、各属性をカラースウォッチで表示します。もしhexカラーコードをご存知の場合は、それを#で先頭に付けて手動で入力することができます。そうでなければ、カラーピッカーを使用して値を選択し、正しいhexコードが自動的に入力されます。

例として、グローバル属性として「色」があり、そのオプションとして青、赤、黄色があります。

クエリタイプ

クエリタイプは、ウィジェットの使用方法を決定し、ANDまたはORに設定できます。

違いを示すために、以下の色のTシャツデザインを販売しています：赤、オレンジ、黄色、緑、青、藍、紫。また、各Tシャツは次のサイズで販売しています：エクストラスモール、スモール、ミディアム、ラージ、エクストララージ。

AND

ANDは、単一の属性選択を許可します。たとえば、色とサイズの両方が「AND」を使用している場合、顧客は「スモール」と「オレンジ」を選択することができます – 在庫のあるオレンジ色のスモールサイズのシャツのみが表示されます。顧客が「赤」を選択した場合、表示は「スモール」と「赤」のシャツに切り替わります – オレンジは一時的に除外されます。

OR

ORは、複数の属性選択を許可します。顧客が「スモール」と「オレンジ」を選択した場合、同じオレンジ色のスモールサイズのシャツが表示されます。しかし、顧客が追加で「赤」をオレンジに加えた場合、両方の色が表示されます。

製品属性の設定方法の詳細については、次を参照してください：製品属性の管理。

WooCommerce Ajax Layered Nav Filtersウィジェット

WooCommerce Ajax Layered Nav Filtersウィジェットは、全ての製品のオプションを表示し、適用されるすべての属性をリストします。

ユーザーは、フィルタリングしたい属性を選択します。これによりコンテンツがダイナミックに変更され、ユーザーの検索基準に合致する製品のみが表示されます。

WooCommerce Ajaxレイヤードクリアオールウィジェット

フィルターウィジェットと組み合わせて使用すると、WooCommerce Ajaxレイヤードクリアオールウィジェットを使用して、顧客は1クリックで選択をクリアし、すべての製品に戻ることができます。