この記事では、Elementor と WC Product Table を組み合わせて、よりカスタマイズされた WordPress サイトを作成しながら、WooCommerce ストアの売上を増やす方法を説明します。
WordPress を使用すると、Web サイトを作成し、迅速に稼働させるプロセスが簡素化されます。 WooCommerce は、WordPress ウェブサイトを完全に機能するオンライン ストアに変えることができる WordPresspluginです。 ただし、デフォルトのオプションと機能を使用し続けると、模倣サイトが作成されるリスクがありますが、これはビジネス ニーズに適さない可能性があります。 Web サイトを希望どおりに設計およびカスタマイズするための最適なツールを見つけることが重要です。
ストアの機能を強化するために、多くの WordPress および WooCommercepluginamp、WooCommerce 製品ページをカスタマイズするための最も簡単なツールです。 これは最も重要な利点の 1 つですが、いくつかの重大な欠点もあります。 たとえばampWordPressplugin、互換性エラーやその他の問題が発生する可能性があります。 WordPress Web サイトにWooCommerce Product Tableおよび Elementorpluginを使用する場合は、これには当てはまりませんpluginのいずれかを使用すると、サイトの外観と機能をより細かく制御できるようになり、組み合わせて使用すると、さらに優れた結果が得られます。
- WooCommerce 製品テーブルと Elementor フレームワークの概要
- WooCommerce 製品テーブルをテキスト エディターまたはショートコード ウィジェットに組み込むには、次の手順に従います。
- アコーディオン、タブ、トグルを使用して、複数の製品テーブルを整理できます。
WooCommerce 製品テーブルと Elementor フレームワークの概要
前述したように、特定の要件に合わせてパーソナライズされた、より良い WordPress サイトの作成に役立つ WordPresspluginが豊富に用意されています。 一部のplugin大規模に使用するように設計されていますが、他のプラグインは特定の側面や機能を追加するように設計されています。
Elementor は、最初のタイプのアプリケーションのampです。
当社のページビルダーplugin、Web ページを構築し、WordPress Web サイトを作成するためのまったく新しいインターフェイスを提供します。 ウィジェット、ブロック、レイアウトの広範なライブラリから選択してカスタマイズすることで、Web サイトの組み立て方法を大幅に制御できます。
WooCommerce Product Table はより一般的なソリューションですが、よりターゲットを絞ったものでもあります。
このpluginすると、WooCommerce 製品とサービスをリストする動的で完全にカスタマイズ可能なテーブルを作成できます。 ただし、これらのテーブルは WooCommerce と連携するため、オンライン買い物客にとって使いやすく視覚的に魅力的な方法でアイテムやサービスを表示するのに特に適しています。 Posts Table PropluginElementor と同様に対話し、単なる WooCommerce 製品ではなく、任意の WordPress コンテンツ タイプをテーブルにリストします (投稿、ページ、ドキュメントなど、製品とは別のものを表示したい場合) を代わりに使用できます。
WooCommerce Product Table を相互に組み合わせて使用すると、非常に多様な機能が提供されます。 これらを利用して、WooCommerce ストアの販売数の増加につながる非常に重要な影響を生み出すことができます。
さあ、本題に取り掛かります。 次のセクションでは、WooCommerce Product Table と Elementor を利用して上記と同様の効果を作成する方法のampいくつか見ていきます。
これら 2 つのpluginインを組み合わせる場合、限界はありません。これらは可能性のほんの一部にすぎません。 少し試行錯誤すれば、これから説明するのと同じ基本的なアプローチを使用して、さまざまなページをまとめることができます。
何よりもまず、両方のpluginがサイトに正しくインストールされていることを確認する必要があります。 Elementor のインストールと WooCommerce Product Table の構成が苦痛なく簡単に行えるのは良いことです。 この手順に進む前に、WooCommerce 自体もインストールして有効にする必要があります。 これで、プロジェクトに取り組む準備が整います。
WooCommerce 製品テーブルをテキスト エディターまたはショートコード ウィジェットに組み込むには、次の手順に従います。
可能な限り最も基本的で有益なアプリケーションから始めましょう。 あるいは、単に Elementor Web サイトで動的な製品テーブルを使用したい場合は、それをウィジェットに追加して、Web サイトのフロントエンドに表示させることもできます。
これを行うには、ページまたは投稿を開くときに Elementor エディタを使用していることを確認してください。 使い慣れた WordPress インターフェースが表示された場合は、「Elementor で編集」ボタンをクリックして Elementor インターフェースに切り替えます。
Elementor を初めて使用する場合は、プラットフォームを少し見てみましょう。 右側にコンテンツが表示される大きな領域が表示され、コンテンツを追加および変更するとリアルタイムで更新されます。 画面の左側には「ウィジェット」のリストがあり、指定された領域にドラッグし、必要に応じて再編成および構成できます。
製品テーブルは、さまざまな Elementor ウィジェットで使用できます。 ただし、ページ上に 1 つの製品テーブルのみを表示したい場合は、ページの HTML コードに紹介テキスト セクションを含めることで実現できます。 次のように、テキスト エディター ウィジェットを選択し、空の場所に移動します。
その後、ウィジェット内をクリックしてデフォルトのテキストを削除し、任意のコンテンツに置き換えることができます。 製品テーブル自体については、次の簡単なショートコードを貼り付けることでテーブルを含めることができます。
【製品表】
ショートコードをページに挿入すると、指定した場所にテーブルが表示されます。これは、フロントエンドで表示することで確認できます。
コード自体の要素のみを使用したい場合は、ショートコード ウィジェットを使用できます。
テーブルを配置する場所に関係なく、テーブルの配置が完了したら、必ずページを保存してください。 その後、テーブルの表示方法と機能にいくつかの変更を加えることになるでしょう。
WordPress ダッシュボードに戻り、[WooCommerce] > [設定] タブに移動して、このタスクを完了します。 製品テーブルは、画面上部の [製品] を選択してから、[製品テーブル] を選択すると表示されます。
WooCommerce 製品テーブルを構成するためのオプションの完全なリストは、ここにあります。 テーブルに表示される情報を完全に制御でき、特にフィルターや変数を追加してカスタマイズできます。 さまざまな選択肢の詳細については、pluginのドキュメントを参照してください。
Elementor を使用して作成した製品テーブルは、他に何もすることなく変更できます。 仕様に合わせてテーブルのカスタマイズが完了したら、変更を保存するだけで準備完了です。
アコーディオン、タブ、トグルを使用して、複数の製品テーブルを整理できます。
上記の解決策は、WooCommerce 製品を単一のテーブルに表示したい場合にうまく機能します。 それぞれに異なるカテゴリのオブジェクトが含まれる多数のテーブルを作成する場合、これは最良のオプションではありません。
Elementor でこれを実現するには、いくつかの異なる方法があります。 amp、アコーディオン ウィジェットを使用すると、前回のケース スタディで見たのと同じ効果を生成できます。 右側の編集領域から始めて、アコーディオン ウィジェットを左側の編集領域に移動します。
プラス記号をクリックすると、個別のタブを必要な数だけ作成でき、各タブ内の見出しとテキストをカスタマイズできます。 さらに、前述と同じショートコードを使用して、製品テーブルを 1 つ以上のタブに追加できます。
もちろん、基本的なショートコードを追加するだけでは類似した製品テーブルが連続して作成され、最初から探していたものではない可能性が高くなります。 代わりに、すべての製品ではなく、指定した製品 (たとえば、特定のカテゴリのamp) のみを表示するように各ショートコードをカスタマイズする必要があります。
使用する方法は、対象の各テーブルに含める製品と除外する製品によって決まります。 詳細については、WooCommerce Product Table ショートコードをカスタマイズするための完全なガイドを参照してください。
他の便利な Elementor ウィジェットを使用して同様の効果を達成できることは注目に値します。 これは、他のコンポーネントの中でもとりわけ、Toggle ウィジェットと Tabs ウィジェットで構成されます。 WooCommerce 製品テーブルを表示するという点では、Elementor が頼りになるツールです。
無料のオンライン HTML、CSS、JavaScript オーガナイザーのおかげで、ずさんなマークアップをクリーンアップできます。
ビジネスを競合他社から際立たせたい場合は、電子商取引 Web サイトのデザインに真剣に考えてください。 amp、製品を紹介する最も効果的な方法、理想的にはユーザーフレンドリーで視覚的に魅力的なスタイルを決定する必要があるとします。
幸いなことに、Elementor で WooCommerce Product Tablepluginを使用すると、これは簡単な作業になります。 製品テーブルのショートコードを使用すると、サイトが提供するすべてのもの (または一部のみ) を真に動的な方法で表示できます。
