WooCommerce製品の全部または一部を含む、ソートおよびフィルター可能なグリッドを作成したいと思ったことはありませんか？

WooCommerceストアを運営している場合、WooCommerceには、個々の製品を紹介するのに役立つ専用のアーカイブページがすでに付属していることをご存知でしょう。

ただし、販売している商品によっては、これが製品を紹介するための最も効果的な方法であるとは限りません。

場合によっては、WooCommerce製品をグリッドに表示する方が効率的です。

そして、それがあなたがいる状況のように聞こえるなら、あなたはWooCommerce製品のグリッドを作成する方法をあなたに示すつもりなので、あなたは大丈夫です。

ただし、WordPressをインストールしたことがない場合は、 WordPressのブログ7の手順をインストールする方法 et あなたのブログにワードプレスのテーマを、見つけインストールしてアクティブにする方法 

それから私たちがここにいる理由に戻りましょう。

WooCommerce製品のグリッドで何ができますか？

完全なリストではありませんが、製品グリッドが訪問者に通常のアーカイブページよりも優れたエクスペリエンスを提供できるいくつかの状況を次に示します。

発見 WooCommerceプラグインを使用してWordPressにオンラインストアをインストールする方法

• 卸売店 -大量の製品を卸売りする場合、グリッドを並べ替えたりフィルタリングしたりする簡単な方法を顧客に提供する方が、個々の製品ページを閲覧するよりもユーザーフレンドリーな場合があります。
• 製品カタログ -同様に、ナビゲートしやすい製品カタログを表示したいだけの場合、AJAXソート/フィルターグリッドは顧客の時間（およびページの再読み込み）を節約します。
• 注文フォーム -WooCommerce製品に基づいて注文フォームを作成する場合、グリッドを使用すると非常に簡単に作成できます。 レストランのメニューを表示してオンライン注文を受け入れるのも良い方法です。

WooCommerce製品のグリッドを作成する方法

プラグインを使用します WooCommerce製品テーブル. プラグインは、製品グリッドの作成に特に焦点を当てています。 そして、そのインターフェイスパラメータと ショート、グリッドの動作のほぼすべての側面をカスタマイズできます。

次のガイドもお読みください。 あなたのワードプレスのブログに費やした時間を増やす方法

私の意見では、最も便利な機能をいくつか紹介します。

• 簡単に列を追加または削除する カスタムフィールドまたはカスタム分類を含む列を追加することもでき、WooCommerce製品テーブルは高度なカスタムフィールドと完全に統合されています。
• 4フィルターウィジェットが含まれています。 これらを使用すると、サイドバーにフィルタリングオプションを提供することで、読者にシームレスなエクスペリエンスを提供できます。
• 製品バリエーション/属性サポート。 グリッドに製品バリエーションを表示するには、3つの異なる方法から選択します。
• 複数選択ボックス。 顧客がショッピングカートに追加する前に複数の製品を選択できるようにすることで、注文フォームの作成を容易にします。
• インスタント検索、並べ替え、フィルター 。 顧客は、ページをリロードせずにグリッドデータを操作できます。
• カートに入れます 。 同様に、顧客はページをリロードせずにバスケットに製品を追加できます。
• 遅延読み込みのサポート。 大規模なグリッドのパフォーマンスを向上させるのに役立ちます（ これは、インスタントソートまたはフィルタリングを提供する機能に影響しますが )

このプラグインの使用方法は次のとおりです...

1ステップ：デフォルトのグリッド機能を構成する

プラグインをインストールしてアクティブにした後、最初に行うことは、グリッドのデフォルト機能を構成することです。 WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。

これは基本的に、ショートコードのデフォルトの動作を定義します。 ただし、ショートコードにパラメーターを追加して、個々のグリッドのこの動作を変更することもできます。

プラグイン設定にアクセスするには、 WooCommerce→設定。 次に、タブをクリックします 製品 オプションを選択します 製品表 :

グリッドの外観を構成する

まず、セクションでグリッドのスタイルを選択できます テーブルデザイン。 あなたはそれをすることができます：

• デフォルト -ご想像のとおり、このオプションはプラグインのデフォルト設定を使用しますが、それ以上の介入は必要ありません。 彼はあなたのブログの現在のテーマを可能な限り使用しようとします。
• Personnalisé ：選択すると、スタイリングオプションのリストが展開され、フォントの色とサイズをカスタマイズする必要がなくなります。 カスタムCSS.

スタイルを設定したら、ショートコードのデフォルトを設定する必要があります。 繰り返しますが、後者のパラメーターを使用して、個々のショートコード用にそれらを編集できます。 ただし、設定すると時間を節約でき、後で少し簡単になります。

ほとんどの設定は一目瞭然であり、WooCommerce Product Tableはツールチップやドキュメントリンクを提供し、各設定の詳細を学ぶのに役立つことがわかります。

発見 Facebook上でWooCommerceストアを追加する方法

ショートコードのデフォルトを設定したら、さらにスクロールして、より高度なレイアウトと機能の設定を構成できます。

繰り返しますが、プラグインは素晴らしい仕事をします。 理解するのが少し難しいかもしれないパラメータの追加情報を提供するもの。 

WooCommerceオンラインストアの在庫を管理する方法 ？ このリンクをクリックして発見してください。

注目すべきことの1つは プログレッシブチャージの制限。 プログレッシブロードを使用してオンラインストアを高速化する場合は、プラグインの検索および並べ替え機能を制限します。

私たちの選択も参照してください 12最高のWooCommerceプラグインでオンラインストアを強化

構成が完了したら、必ず変更を保存してください。

2ステップ：WooCommerceグリッドウィジェットの追加（オプション）

前述したように、WooCommerce Product Tableには、サイドバーにフィルタリングオプションを追加するのに役立つXNUMXつのウィジェットも用意されています（ クラシックなWooCommerceショップのように ).

アクセスするには、にアクセスしてください 外観→ウィジェット いつものように、目的のウィジェットをスワイプします。

ステップ3：製品グリッドを表示する場所にショートコードを追加する

あなたはフィニッシュラインにいます！ 今あなたがする必要があるのはショートコードを追加することです [product_table] グリッドを表示したい場所。

発見も WordPressのログインページへのリンクを見つける方法

デフォルトでは、ショートコードは手順1で選択した設定に従って機能します。ただし、特定のショートコードの機能をカスタマイズする場合は、 多くのショートコードパラメータ 利用可能。

たとえば、特定のカテゴリの製品でのみグリッドを使用するには、次のようなパラメータを追加できます。

[product_table カテゴリ="帽子"]

ここで創造性を発揮し、AND / OR条件を使用することもできます。

例えば：

• [product_table カテゴリ= "帽子 + in スター« ] に属する製品のみを表示します 時間 帽子カテゴリへ et 星に。
• [ Product_table カテゴリ= "帽子 に 星 "] 製品を表示します それはそう 帽子 ou スターカテゴリ。

この細部へのこだわりが、WooCommerce製品のグリッドをすばらしいものにしている理由です。 

また私達のを見なさい あなたの記事に新しい命を吹き込むための6つのWordPressプラグイン

WooCommerceの製品グリッドを使用すれば、これですべてです。

WooCommerce製品テーブルプラグインの価格

WooCommerce Product Tableは、独占的にプレミアムプラグインです。 WordPress.orgディレクトリにリストされている無料のオプションがいくつかありますが、柔軟性があり、十分に文書化されているものは見つかりませんでした。そのため、WooCommerce ProductTableは価格に見合う価値があると思います。

プレミアムWordPressプラグインもご覧ください  

他にも使えます WordPressのプラグイン モダンな外観を与え、ブログやウェブサイトの取り扱いを最適化します。

ここでは、そのためのプレミアムWordPressプラグインを提供しています。

1。 HBOOK

HBook は WordPress プラグイン これにより、Web サイトでオンライン予約ソリューションを簡単に作成できます。

ホテル部門（ホテル、ホリデーアパートメント、キャンプなど）でビジネスをしている人に最適です。

私たちも発見 ブログのコンテンツを共有するための5 WordPressプラグイン

スルー WordPressのプラグイン HBook を使用すると、空室状況カレンダー、価格表、予約フォームを数秒で Web サイトに追加できます。

ダウンロード | デモ | ウェブホスティング 

2. WooCommerce Tabs Pro：製品ページの追加タブ

Ce WordPressのプラグイン 製品ページに無制限の追加タブを提供します。

その主な機能は次のとおりです。 タブのタイトルを変更します。 カスタムコンテンツを編集するエディター、pタブを固定するかどうかの可能性、 タブのアイコン、簡単な取り外し タブ、pパブリックインターフェイス上のタブの位置のカスタマイズ、eもっと...

ダウンロード | デモ | ウェブホスティング

3。 WooCommerceマルチレベル紹介プラグイン

このWooCommerceプラグインを使用すると、加入者が既存のオンラインストアから製品を購入した場合、アフィリエイトがクレジットポイントを獲得できます。

その機能には、パーソナライズされたクレジットと償還制限の構成、登録ユーザー向けの完全な管理レポート、グローバルまたは製品固有のパラメーターの管理、 ショートコードのサポート、そしてもっとたくさん。

発見も ドロップダウンコンタクトフォームをグローバルヘッダーに追加する方法

これはWooCommerceマルチレベルアフィリエイトシステムであり、通常のアフィリエイトトランザクションシステムの外にあります。

ダウンロード | デモ | ウェブホスティング

その他の推奨リソース

また、以下のリソースを参照して、Webサイトとブログの把握と管理をさらに進めてください。

• バイオ製品の販売のウェブサイトを作成するための9 WordPressのテーマ
• WordPressブログの速度を向上させる6 CDNサービス 
• WP Affiliate PlatFormでアフィリエイトプログラムを作成する方法
• WordPressプラグインを手動で更新する方法

まとめ

それだけです！ このチュートリアルはこれで終わりです。 WordPressでWooCommerce製品グリッドを作成できることを願っています. お気軽に ソーシャルネットワークで友達とヒントを共有する.

しかし、あなたも私たちに相談することができます ressources、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合は、 WordPressブログの作成。

しかし、それまでの間、あなたについて教えてください commentaires 専用セクションの提案。

...