Woocommerce製品テーブルを作成する方法
公開: 2018-03-28間違いなく、WoocommerceはWordPressの最も人気のあるeコマースソリューションです。 しかし、他のソフトウェアと同じように、いくつかの欠点があります。 1つは、製品の表示オプション、またはその欠如です。 デフォルトの表示は、注目の画像のグリッドレイアウトであり、特定の種類の製品に最適です。 ただし、特定の状況では、製品のテーブルレイアウトの方がユーザーフレンドリーです。
これらのタイプの状況には、卸売店、製品カタログ、注文フォーム、さらにはレストランの注文が含まれる場合があります。
このようなお店があり、商品をテーブルに並べたい場合は、幸運です。 Barn2Mediaは、検索および並べ替え可能なテーブルビューに商品を一覧表示するWoocommerce Product Tableと呼ばれるプラグインを開発しました。これは、非常に簡単に使用できます。
プラグインの使用方法
まず、Woocommerceサポートが組み込まれているWordPressテーマを使用することをお勧めします。 これにより、すべてのeコマースページでサイトのスタイルが適切になります。 優れた多目的WordPressテーマを使用している場合は、問題はありません。
このプラグインの使用は簡単です。 Barn2Mediaの開発者は、製品テーブルの作成を過度に複雑にすることなく、適切な量のオプションを提供するという素晴らしい仕事をしてきました。
Woocommerce製品テーブルを作成してサイトに追加するために必要な手順は次のとおりです。
ステップ1.テーブルデザインを設定する
最初に行う必要があるのは、Woocommerce ProductTableプラグインを入手することです。
プラグインをインストールしてアクティブ化した後、製品テーブルのデフォルトスタイルを構成する必要があります。 これは、作成するすべてのテーブルに使用されるスタイルです。 ただし、ショートコードオプションを使用してこれらの設定を上書きできます。
デフォルトのスタイルを設定するには、 Woocommerce→Settingsに移動し、 Productsタブを選択します。 次に、[製品テーブル]をクリックします。
[テーブルのスタイル設定]には、[デフォルト]と[カスタム]の2つのオプションがあります。
[デフォルト]を選択すると、製品テーブルはWordPressテーマのテーブルスタイルを使用します。
[カスタム]を選択すると、スタイリングオプションのセクションが表示され、境界線、背景色、およびフォントに独自のカスタムスタイルを設定できます。
手順2.デフォルトオプションを設定する
[テーブルデザイン]セクションのすぐ下に、デフォルトオプションがあります。 これらの設定は、列数、フィルタードロップダウン、ページあたりの行数など、製品テーブルのさまざまなオプションを構成するために使用されます。スタイルと同様に、これらの設定は、後で説明するように、個々のショートコード内のパラメーターでオーバーライドできます。
全体として、ここには23のオプションがありますが、ショートコードパラメーターを使用して設定できるオプションはさらにあります。 完全なショートコードオプションのリストは、Barn2Mediaナレッジベースにあります。 他のオプションの上にあるページのリストへの便利なリンクもあります。
本当に際立っている機能の1つは、遅延読み込みを有効にする機能です。 これにより、1ページに多数の商品を表示するときに、ページの読み込み時間を短縮できます。 ただし、遅延読み込みでは、商品バリエーションの検索、並べ替え、表示が制限されることに注意してください。
ステップ3.Woocommerce製品テーブルをサイトに追加します
製品テーブルのデフォルトのスタイルと設定をすべて構成したので、次は1つをWebサイトに追加します。 製品テーブルを挿入するページをすでに作成している場合は、そのページの編集画面に移動します。 そうでない場合は、先に進んで新しいページを作成してください。
ページのコンテンツエディタ内に、次のショートコードを追加します。
[product_table]
次に、ページを公開または更新します。 とても簡単です。

ショートコードは、手順2で構成した設定に基づいて製品テーブルをレンダリングします。ただし、前述のように、ショートコードにパラメーターを追加して、これらの設定を上書きしたり、オプションを追加したりできます。
カスタム画像サイズのショートコード
Woocommerce商品テーブルのデフォルトの画像サイズは70×70ですが、画像が小さいページに別の商品テーブルを配置して、占有される垂直方向のスペースを少なくしたいとします。 次のように画像サイズパラメータを使用するだけです。
[product_table image_size="40"]
カスタムカテゴリのショートコード
デフォルトでは、ショートコードから生成された製品テーブルには、すべてのカテゴリのすべての製品が一覧表示されます。 ただし、特定のカテゴリの商品のみを表示する必要がある場合があります。 たとえば、衣料品店のWebサイトにTシャツ専用のページを作成するとします。 あなたはこれを行うことができます:
[product_table category="t-shirts"]
同じショートコードで複数のパラメータを使用することもできます。
[product_table image_size="40" category="t-shirts"]
製品テーブルオプションの完全なリストは、Barn2Mediaナレッジベースにあります。
ステップ4.Woocommerce製品テーブルウィジェットを追加する
Woocommerceを使用している場合は、おそらくすでに含まれているウィジェットに精通しているでしょう。 Woocommerce Product Tableには、同様の機能を宣伝する独自の4つのウィジェットが付属しています。 これらのウィジェットは、productsテーブルのショートコードを使用しているページに追加できます。 これを行うには、[外観]→[ウィジェット]に移動して、所定の位置にドラッグします。 次に、それらを希望どおりに構成します。
これらのウィジェットが含まれています:
- 製品テーブル:アクティブな製品フィルター–アクティブなフィルターを表示して、顧客がどのフィルターが既に配置されているかを確認できるようにします。 テーブルを元の製品リストに戻すオプションが含まれています。
- 製品テーブル:属性による製品のフィルター– 1つ以上の属性を選択して、テーブル内の製品をフィルターします。
- 製品テーブル:価格による製品のフィルター–価格範囲スライダーを追加します。 顧客はそれをドラッグして予算を設定し、価格範囲内の製品を表示できます。
- 製品テーブル:評価による製品のフィルター処理–製品テーブルを改良して、星の評価に基づいて製品を表示します。
結論と価格
利用可能な製品テーブルプラグインは他にもいくつかありますが、機能と使いやすさの点でWoocommerce製品テーブルが提供できるものに近いものはありません。 私にとって、これはこのプラグインがプレミアムのみであるという事実を正当化します。
価格の内訳は次のとおりです。
- 個人(1サイト) $ 75
- ビジネス(5サイト)$ 135
- 代理店(20サイト) $ 275
それがあなたのコンバージョンを増やすことができるという事実はそれを価格の価値があるようにします。 それがあなたがたった2つか3つの追加の製品を売るのを助けるならば、それはそれ自身のために支払いました。 したがって、結論として、製品を表形式で表示する必要があることに気付いた場合は、これ以上調べる必要はありません。 このプラグインはあなたが必要とするものです。