DiviWooCommerceページ用にフィルターされたサイドバーを作成する方法

ページビルダーで作成したページにフィルター処理されたWooCommerceサイドバーを追加しようとしたことがある場合は、フィルターがページに表示されないことに気付いたと思います。 使用しているページビルダーは関係ありません。フィルターは表示されません。

その理由は、これらのウィジェットはページビルダーと互換性がないためです。 この記事では、DiviBuilderまたはその他のページビルダーで作成されたページ用にフィルター処理されたWooCommerceサイドバーを作成する簡単な方法を見ていきます。

標準のWooCommerceサイドバー

WooCommerceには、フィルター可能なウィジェットがいくつか含まれています。

• 属性で商品をフィルタリングする
• 価格で製品をフィルタリングする
• 評価による製品のフィルタリング

これらのウィジェットは通常のWordPressテーマでうまく機能しますが、ページビルダーで作成されたページには表示されません。

WordPressテーマ

フィルター可能なウィジェットは、通常のWordPressテーマで作成されたページ内で正常に機能します。 Twenty Seventeenは、問題なくサイドバーに表示されます。 色と価格を含むWooCommerceサンプルデータを使用しています。 属性および価格による製品のフィルターが目立ちます。

これは、DiviBuilderを使用せずにWooCommerceのデフォルトのショップページを表示しているDiviです。 通常のテーマと同じようにフィルターウィジェットが表示されます。

WordPressビルダー

ビルダーで作成されたページには、WooCommerceフィルターウィジェットが表示されません。 サイドバーがビルダー内に表示されている場合でも、標準のサイドバーとして表示されている場合でも、違いはありません。 ここにいくつかの例があります。

このページはBeaverBuilderで作成されました。 サイドバーが含まれていますが、フィルターは表示されません。 サイドバーがフィルターウィジェットなしで表示されるのを確認できるように、テキストウィジェットを追加しました。 ライブで表示するためにページを公開しましたが、違いはありませんでした。

これはElementorで作成されました。 製品の上にサイドバーを追加しました。 テキストウィジェットは表示されますが、フィルターは表示されません。 ライブで見るページも公開しましたが、違いはありませんでした。

これが同じサイドバーを表示しているDiviBuilderです。 DiviBuilderプラグインまたはテーマを使用しても同じ結果になりました。 ライブで表示するためにページを公開しましたが、フィルターが表示されませんでした。

BuilderサイドバーにWooCommerceフィルターを表示する

幸い、ページビルダーを使用して製品ページを作成している場合でも、サイドバーにWooCommerce製品フィルターを表示する簡単な方法があります。 WooCommerce ProductFilterというプラグインが必要です。

Themify –WooCommerce製品フィルター

WooCommerce Product Filterは、Themifyの無料プラグインであり、標準のWooCommerce製品フィルターウィジェットとは動作が異なります。 複数のフィルターの組み合わせを簡単に作成できます。 ドラッグアンドドロップフォームビルダーを使用してフォームを作成します。 垂直または水平レイアウトに設定し、列数を選択して、Webサイトに合わせてスタイルを設定します。 ライブ検索結果が表示され、多くのオプションが含まれています。 直感的に使用でき、すべてのテーマビルダーで機能します。

新しい製品フィルターの作成

WordPressデポジトリからプラグインをインストールします。 ダッシュボードのメニューでは、製品のフィルタに行く>製品フィルタ>新規追加。 フィルタを作成するために必要なすべてを備えたモーダルを取得します。 設定を確認して、ショートコードを作成します。 この1つのフィルターは、3つのフィルターウィジェットを使用するのではなく、複数のタイプのカスタムフィルターを作成して、任意の数のウィジェットを作成できます。

フィルタを説明するタイトルを付けます。 空のフィールド、商品の並べ替え、商品数、在庫切れの商品を表示するかどうか、縦型または横型のレイアウトから選択します。 ページ付けを表示するかどうかを選択し、標準、無限スクロール、またはさらにロードするかどうかを選択します。

1ページあたりの商品数を入力してください。 フィールドグループを切り替え可能にするか、結果までスクロールするか、分類法のANDまたはORロジックを選択するか、結果を現在のページに表示するか新しいページに表示するかを選択します。 新しいページを選択すると、リストからページを選択できるようになります。 フィルタを新しいページに表示するかどうかを選択することもできます。

選択したら、フォームを作成する必要があります。 これにより、サイドバー内でフィルターがどのように表示されるかが決まります。 必要な各フォーム要素を、ショートコード作成画面の下部にあるフィールドにドラッグします。

各要素は、新しい機能のセットを開きます。 それぞれが異なりますが、ほとんどの場合、同様のオプションがあります。 カテゴリを見てみましょう。

タイトルを付けます。 必要に応じて、タイトルを非表示にすることができます。 製品数、カテゴリ階層を表示し、子を含めるかどうかを選択します。 フィルタをチェックボックス、リンク、ラジオボタン、ドロップダウンボックス、または複数選択として表示します。 ロジックを選択し、並べ替え順序を設定して、列数のあるレイアウトを選択します。 テキストの色を設定します。 含めるまたは除外するカテゴリを選択することもできます。

色を選択すると、アイコンによってカラーピッカーのセットが開き、各製品カテゴリの色を個別に設定できます。 背景とテキストの色を設定します。 ピッカーから色を選択するか、フィールドに16進コードを入力できます。

フィールドを希望の順序でドラッグアンドドロップすることもできます。 フィルタを作成したら、[保存]を選択します。

モーダルを閉じると、フィルターがリストに追加されているのがわかります。 フィルタ内のフィールドの名前、ショートコード、およびリストを提供します。 フィルタを編集、エクスポート、または削除できます。 ショートコードをコピーします。

サイドバーにテキストウィジェットを追加し、ショートコードを貼り付けます。

フィルタは、ビルダーで作成されたショップページ内に表示されるようになりました。 これがDiviBuilderのページです。

これは、TwentySixteenテーマで作成されたBeaverBuilderのページに表示されるフィルターです。

これが、TwentySeventeenテーマのElementorを使用したフィルターです。 これは水平レイアウトを使用しています。

Themifyの使用–DiviレイアウトでのWooCommerce製品フィルター

ディビにはたくさんのショップレイアウトがあります。 この例では、Furniture Store Shopページにテキストモジュールを追加し、テキストモジュール内にフィルターショートコードを配置しました。 サイドバーモジュールを選択することもできますが、この例ではそれほど重要ではありません。

これは垂直レイアウトです。 レイアウトのデザインにうまく適合します。

レイアウトのスタイルに合わせてボタンを設定しました。 残念ながら、検索ボタンを調整することができませんでした。

これが水平方向のレイアウトです。 この例でも、垂直フィルター用に選択した3/2列のレイアウトを使用しています。

フィルターはホバーすると開きます。 応答性が高いため、列に収まるように垂直に表示されます。

これについては、shopモジュールの下にフィルターを配置しました。

これがshopモジュールの上のフィルターです。

テキストモジュール内またはサイドバー内のどちらでショートコードを使用する場合でも、Diviモジュールの[デザイン]タブを使用してスタイルを追加できます。 これは、モジュールのテキストをスタイル設定することで、ラベルテキストのスタイルを設定できることを意味します。 この例では、テキストを赤に設定し、サイズを大きくして、すべて大文字にしました。

WooCommerce製品のフィルタリング

検索を実行するには、ユーザーはボタンをクリックしてチェックボックスをオンにし、スライダーをスライドして探しているものをフィルタリングします。 タイトルを入力することもできます。 準備ができたら、検索ボタンをクリックするだけです。

の検索結果

結果には、設定で設定した方法が表示されます。 これについては、ページの下部に表示するように設定しました。 結果まで自動的にスクロールし、ユーザーに並べ替え機能を提供します。

新しいページで開くように設定すると、そのページの下部に結果が表示されます。 この例では、Furniture StoreShopページのヘッダーを使用してページを作成しました。 並べ替え機能を開いて、並べ替えオプションを表示しました。

終わりの考え

これが、DiviBuilderで作成されたページ用にフィルター処理されたWooCommerceサイドバーを作成する方法です。 プラグインは直感的で、WooCommerce製品に多くのフィルタリング機能を追加します。 フィルタはいくつでも作成して、任意のページに配置できます。 Diviのスタイリング機能を使用してスタイリングすることもできます。 ショートコードなので、サイドバーやモジュール内で使用できます。

結果の表示方法をより細かく制御したいのですが。 たとえば、結果が表示される場所にショートコードを配置すると便利です。 これにより、結果をページの下部ではなくページの任意の場所に配置できます。 これにより、カスタムフッター、ページ内の結果領域などが可能になります。さらにいくつかのスタイルオプションが必要です。 主に、検索ボタンのスタイルを設定したいと思います。

Themify – WooCommerce Product Filterは、DiviBuilderページに製品フィルターを追加するための無料のプラグインが必要な場合に最適です。

我々はあなたから聞きたい。 Divi Builderで作成されたショップページでThemify– WooCommerce Product Filterプラグインを試しましたか？ コメントであなたの経験について教えてください。

Max Griboedov /shutterstock.comによる注目の画像