WooCommerceのための7つのベスト商品カテゴリ・グリッドプラグイン

ほとんどのWooCommerceストアは、商品詳細ページに重点を置いていますが、カテゴリープレゼンテーションの重要性を軽視しがちです。カスタマージャーニーは通常そこから始まります。クリーンで構造化されたカテゴリーレイアウトは、ナビゲーションを改善するだけでなく、あなたのストアをよりプロフェッショナルに感じさせ、買い物をしやすくします。

商品カテゴリのプラグインは、まさにそのために作られました。これらのプラグインを使えば、グリッド、スライダー、フィルター、カルーセルなどを使って、コードなしでカテゴリーを整理して表示することができる。Gutenbergで動作するものもあれば、Elementorのために作られたものもあり、多くはレスポンシブレイアウト、テンプレート、どんなショップレイアウトにも適したデザインオプションを含んでいます。

このガイドでは、より良いレイアウトコントロール、より良いフィルタリング、より良いスタイリングで商品カテゴリグリッドを構築できる7つの傑出したプラグインを厳選しました。詳しく見ていきましょう。

Plugin Name

対応編集者

主な特徴

アクティブ・インストール

ワオストア

グーテンベルク

カテゴリーブロック、フィルタリング、アップセル、スマートカート

5,000+

ショップレンター

Gutenberg, Elementor

グリッドウィジェット、カルーセル、125以上のウィジェット

100,000+

WooCommerce用商品ブロック

グーテンベルク

カテゴリーグリッド、5つ以上のレイアウト、ソート

5,000+

コンテンツ・ビュー

Gutenberg, クラシック, Elementor

グリッドビルダー、フィルター、70以上のテンプレート

100,000+

カテゴリ

Gutenberg、Elementor、Divi

スライダー、マルチレベル表示、スタイリングオプション

10,000+

Elementorの無制限エレメント

エレメンタ

カテゴリーグリッド、カスタムクエリ、200以上のウィジェット

100,000+

製品カテゴリー デザイン

グーテンベルグ(ショートコード)

グリッド&スライダービュー、ショートコードコントロール

3,000+

ワオストア

WooCommerce Builder & Gutenberg WooCommerce ブロック - WowStore

ブロックエディター内でWooCommerceカテゴリーレイアウトを再設計できるプラグインはそうそうありません。そこでWowStoreの登場です。WooCommerceとGutenbergのギャップを、完全なビルダーと幅広いストアフレンドリーなブロックセットで埋めてくれます。 

WowStoreには、クリーンでカスタマイズ可能なグリッドでカテゴリーを表示できる専用の商品カテゴリーブロックが含まれています。カラム、スペーシング、スタイリングをGutenberg内で直接調整することができます。このプラグインはまた、カテゴリによる商品フィルタリングのサポートを追加し、ブラウジングを改善し、買い物客が探しているものを見つけるのを助けます。カスタムテンプレートを構築している場合、WowStoreはショップ、カテゴリー、アーカイブページを一行もコードに触れることなく完全にコントロールすることができます。

残りのツールキットは、粘着性のあるカートに追加やウィッシュリストブロックのようなセールスブースターから、アップセル、クロスセル、予約注文、カートタイマーのような収益に焦点を当てた機能まで、すべてを処理します。さらに、送料無料バーと高度な商品フィルタリングを追加すれば、機能的でコンバージョンに適したグリッドベースのWooCommerceのセットアップが完成します。

WooCommerce Builder & Gutenberg WooCommerce ブロック - WowStore デモ
デモ

トップ

  • Gutenbergの製品カテゴリーブロック。
  • カテゴリーページとテンプレート専用のビルダー。
  • カテゴリー、価格、属性による商品のフィルタリング。
  • ウィッシュリスト、比較、クイックビューのサポート。
  • アップセルとクロスセルのツール
  • カートに入れる]ページと[スマートカート]ページ。
  • 送料無料のプログレス・バー。
  • 数十の追加WooCommerceブロック。

価格だ: 

無料版から始めることも、$49/年からPro版にアップグレードすることもできます。

ショップレンター

ショップレンター

ほとんどのWooCommerceサイトでは、商品リストだけでなく、構造、デザインの自由度、視覚的な階層が必要です。ShopLentorは、ElementorとGutenbergの両方で動作するブロックベースとウィジェットパワーのビルダーでそのニーズに応えます。 

このプラグインには、カテゴリフィルタとレスポンシブ設定を備えた専用の商品グリッドウィジェットが含まれています。また、商品カテゴリカルーセルとカテゴリショーケースモジュールでは、WooCommerceカテゴリをスタイル化された水平またはブロックグリッドで表示することができます。各ウィジェットには、カラムコントロール、間隔、順序、表示ロジックの設定が含まれており、デバイス間で美しく調整されたレイアウトを作成するのに役立ちます。タブ、リスト、カテゴリフィルタリング機能は、きれいな商品分類に重点を置く人のためのツールキットです。

ShopLentorが優れている点は、その包括的なテンプレート構築システムにあります。 無料版にはアーカイブテンプレートと商品テンプレートが含まれ、プロ版には125以上のElementorウィジェット、60以上のGutenbergブロック、柔軟なカートとチェックアウトエディタ、アップセルモジュール、販売に特化したアドオンが追加され、あなたのストアをより構造化された基盤にします。 

ShopLentorデモ
デモ

トップ

  • カテゴリフィルタとレスポンシブ設定を備えた商品グリッドウィジェット。
  • 商品カテゴリーカルーセルとカテゴリーショーケースのモジュール。
  • タブベース、リストベース、フィルターベースのカテゴリーナビゲーション。
  • ショップ、アーカイブ、単品ページのカスタムテンプレート。
  • カート、チェックアウト、アカウントページのテンプレートビルダー。
  • 125以上のElementorウィジェットと60以上のGutenbergブロック。
  • クイックビュー、ウィッシュリスト、比較機能。
  • バリエーション見本、カウントダウン、アップセルモジュール。
  • カートにベタベタとAJAXカートドロワー。

Price

無料版で始めることも、半年あたり$59からProにアップグレードすることもできます。

WooCommerce用商品ブロック

WooCommerce用商品ブロック

きれいなグリッドは買い物客の集中力を高めます。Product Blocks for WooCommerceは、まさにそれをブロックエディタにもたらします。このプラグインを使えば、カテゴリーや商品の表示方法をより自由にコントロールすることができます。

このプラグインには、3つのレイアウトスタイルが組み込まれたProduct Categories Gridブロックが含まれています。すべてのカテゴリを表示するか、親カテゴリのみに表示を限定するかを選択できます。設定パネルでは、表示するカテゴリー数、使用するカラム数、商品数を表示するかどうかを定義できます。また、空のカテゴリーを非表示にしたり、メニューの順序に基づいてすべてをソートすることもできます。

カテゴリーグリッドに加えて、このプラグインはさらに7つのブロックを提供します。複数のLookbookスタイル、Vertical Product Slider、Scattered Product List、Product Carouselなどです。すべてのブロックは、外部ツールを必要とせず、Gutenbergエディタにネイティブに統合されます。

WooCommerce用商品ブロック・デモ
デモ

トップ

  • 3つのレイアウトスタイルを持つ商品カテゴリグリッドブロック。
  • すべてのカテゴリーを表示するか、親カテゴリーのみを表示するか。
  • 表示するカテゴリーの数を設定します。
  • 必要に応じて、空のカテゴリを非表示にします。
  • 商品数の表示・非表示
  • カテゴリーをメニュー順に並べ替える
  • 列の数を選択します。
  • 商品ディスプレイ用ブロック7個付き。
  • 完全にGutenbergエディタ内で動作します。

Price

このプラグインはWordPress.orgで無料で利用できる。

コンテンツ・ビュー

コンテンツ・ビュー

投稿、ページ、カスタムコンテンツを表示しようとすると、ショートコードやコードスニペットのもつれが悩みの種になります。Content Views は、クラシックエディタと Gutenberg の両方にビジュアルレイアウトオプションを追加することで、それを解決します。

コンテンツビューには、カテゴリー、タグ、日付、著者、キーワードに基づいて投稿、ページ、カスタム投稿タイプを照会できる強力なビュービルダーが含まれています。各レイアウトはショートコード、ブロック、ウィジェットを使って挿入できます。このプラグインには、グリッド、リスト、スライダー、アコーディオン、タイムラインなどのためにデザインされた16個のGutenbergブロックと16個のElementorウィジェットが付属しています。テンプレートライブラリには70以上のデザイン済みパターンがあり、組み込みのタイポグラフィ、スペーシング、表示オプションでカスタマイズできます。

このプラグインのレイアウトシステムはカスタマイズを念頭に構築されています。画像サイズ、投稿タイトル、コンテンツの長さ、メタの可視性をコントロールできます。クラシックエディターユーザーのために、すべてのグリッドはショートコードを使用して配置することができます。Gutenbergユーザーには、各ブロックにレスポンシブ設定、高度なスタイリング、出力を微調整するための投稿フィルタリングオプションが含まれています。

コンテンツ・ビューのデモ
デモ

トップ

  • Gutenberg、Classic Editor、Elementorで動作します。
  • 16個のGutenbergブロックと16個のElementorウィジェットが含まれています。
  • グリッド、リスト、スライダー、アコーディオン、タイムラインを作成できます。
  • タクソノミー、キーワード、著者、日付の高度なフィルター。
  • 画像サイズ、テキストの長さ、投稿メタデータをカスタマイズ。
  • 76以上の既製Gutenbergブロックパターンとテンプレート。
  • レスポンシブデザインと遅延ローディングのサポート。
  • ショートコード、ブロック、またはウィジェットを使用してグリッドを挿入します。

Price

無料版のプラグインもありますが、Category Grid機能は$39/年からのPro版でのみ利用可能です。

カテゴリ

カテゴリ

ほとんどのWooCommerceストアはカテゴリを十分に強調していないため、しばしばチャンスを逃し、買い物客を混乱させています。WooCategoryは、商品カテゴリをスライダーやブロックとして、きれいなビジュアルとレスポンシブレイアウトで表示できるようにすることで、この問題を解決します。 

このプラグインはショートコードジェネレーターを搭載しており、商品カテゴリーをフィルタリングして思い通りのスタイルにすることができます。表示する特定のカテゴリーを選択したり、空のカテゴリーを非表示にしたり、表示アイテムの数をコントロールしたり、親の下に子や孫のような複数レベルのカテゴリーを表示することもできます。それと共に、各スライダーやブロックはタイトル、画像、カウンター、カスタマイズ可能なショップナウボタンを含むことができます。

WooCategoryはレイアウトスタイリングからスライダーエフェクトまで全てを提供します。サムネイルの形、ボーダー、色、間隔を変更したり、ホバーエフェクトを適用することもできます。このプラグインには高度なタイポグラフィコントロール、カテゴリーフィルター、カテゴリーオーダー、デバイスベースのカラム設定も含まれています。 

WooCategoryデモ
デモ

トップ

  • カテゴリースライダーとグリッドレイアウト
  • 特定のカテゴリーをフィルタリングして表示します。
  • 複数レベルの親カテゴリと子カテゴリを表示します。
  • テキスト、カラー、リンクのコントロールが可能なカスタムショップナウボタン。
  • 自動再生、スクロール、ページネーション、エフェクトを含む30以上のスライダーオプション。
  • サムネイルの形状、ボーダー、ホバー効果、サイズをカスタマイズできます。
  • 制御列と装置ごとの間隔。
  • Gutenberg、Elementor、Divi、その他のビルダーをサポート。
  • ライブプレビュー付きショートコードジェネレーター

Price

WooCategoryは無料版と年間$49からのプロ版を提供しています。

Elementor用無制限エレメント

Elementor用無制限エレメント

Ultimate Elementsは、ウィジェット、テンプレート、高度なツールの膨大なライブラリを提供することで、Elementorでできることを拡張します。WooCommerceやコンテンツの多いサイトを構築するために、より多くのデザインコントロールやよりスマートな方法を求める人のために作られました。

このプラグインには高度なWoo Category Gridウィジェットが含まれており、商品カテゴリ用にレスポンシブでスタイリッシュなグリッドを作成できます。特定の用語、子カテゴリ、現在の投稿用語の選択、空のカテゴリの除外など、正確なクエリフィルタを取得できます。レイアウト設定では、カラムやギャップを調整したり、ACFやPODSのようなメタフィールドからカスタム画像を使用してカテゴリを表示することもできます。

また、200以上のプロウィジェット、ウィジェットクリエイター、メガメニュービルダー、リアルタイム投稿フィルター、ダイナミックポップアップ、ループビルダー、フォームビルダー、電卓ビルダー、アニメーション背景、同期ウィジェット、マルチソースギャラリーのディープサポートも利用できます。すべてがElementorの中にあり、上級ユーザーやクリエイティブなデザイナーのための完全なソリューションです。

Elementorのデモのための無制限の要素
デモ

トップ

  • Elementor用Wooカテゴリーグリッドウィジェット。
  • カテゴリーを含めたり除外したりするカスタムクエリルール。
  • 現在の投稿の子カテゴリまたはカテゴリを表示します。
  • 空のカテゴリを非表示にしたり、カスタムメタでフィルタリングしたりできます。
  • ACFまたはPODSを使用したカスタムイメージのサポート。
  • カラム、ギャップ、スタイルなど、レイアウトを完全にコントロール。
  • 200以上のユニークなドラッグ&ドロップウィジェット。
  • 独自のElementorウィジェットを構築するためのウィジェットクリエーター。
  • ループビルダー、ポップアップビルダー、メガメニューなど。
  • 投稿とWooCommerce商品のAJAXフィルター。

Price

アルティメットエレメンツは無料で、Wooカテゴリーグリッドウィジェットはプロバージョンの一部で、年間$49からご利用いただけます。

WooCommerceの商品カテゴリーデザイン

WooCommerceの商品カテゴリーデザイン

カテゴリレイアウトが古く見えたり、圧倒的でない場合、顧客は探索することなくスクロールして通り過ぎてしまう傾向があります。Product Categories Designs for WooCommerceは、シンプルなショートコードを使用してグリッドレイアウトとスライダーレイアウトの両方で表示できる2つの既製デザインで、そのような問題を解決するのに役立ちます。

グリッドビュー用とスライダー用の2つのショートコードがあります。それぞれ、レイアウトデザイン、カテゴリー数、カラムコントロール、ソート、可視性トグルを含むパラメーターのしっかりしたセットが付属しています。スライダービューは、自動再生コントロール、スライドスピード、ページネーション、ナビゲーションなどを追加します。また、IDや親でカテゴリーを制限したり、高さを調整したり、カスタムCSSクラスを適用してビジュアルを微調整することもできます。

このプラグインは、ショートコードブロックを使ってGutenbergエディタ内で直接動作します。また、商品メニューの下に便利な「カテゴリーデザイン」タブが作成されるので、ページに追加する前にレイアウトオプションを確認することができます。

WooCommerceの商品カテゴリーデザイン デモ
デモ

トップ

  • グリッドビューとスライダービュー用の2つのショートコード。
  • 両方のレイアウトに対応する2つのデザイン・プリセット。
  • カテゴリーとカラムの数をコントロール。
  • 名前、スラッグ、用語IDによるソートオプション。
  • 空カテゴリと子カテゴリの表示/非表示。
  • カスタム高さを設定し、余分なCSSクラスを適用します。
  • 自動再生、スクロール動作、速度のための完全なスライダーコントロール。
  • 商品 → カテゴリーデザインの下にある専用設定パネル。

Price

無料版が提供され、プロ・プランの価格は年間$99である。

結論

カテゴリーレイアウトは見落とされがちですが、WooCommerceストアで顧客を誘導する最もインパクトのある方法の1つです。よく整理されたグリッドやスライダーは、バウンスとコンバージョンの違いを生むことがあります。それはあなたのショップに構造を与え、訪問者が意図を持って探索するのを助けます。

このリストを通して、商品カテゴリーを表示するためのクリエイティブで柔軟、そしてビルダーフレンドリーな方法をもたらすプラグインを見てきただろう。Gutenbergエディタ内にとどまるものもあれば、Elementorを拡張したり、ショートコードを使ってデザインを完全にコントロールできるものもある。これらのツールは、美観のためだけでなく、より良い導線を作るために使いましょう。そうすることで、閲覧を購入に変え、WooCommerceサイトをより洗練されたものに変えることができるのです。



テーブルバーグ・チーム

美しいWordPressのテーブルを構築する - 視覚的に!

退屈なテーブルにさようなら。Tablebergなら、ブロックエディタを使って、レスポンシブでインタラクティブなテーブルを作成できます。

Tablebergインターフェース
🚀 30% OFFでベストテーブルブロックプラグインを入手!
これは通知バーのデフォルトテキストです。