WooCommerceプロダクトシートをElementorで使用する方法

WordPressはウェブサイトを簡単に立ち上げることができ、WooCommerceはどんなWordPressウェブサイトでもすぐにフル機能のオンラインショップに変えることができます。WooCommerceを使えば、どんなWordPressウェブサイトでもすぐにオンラインショップに変身させることができます。しかし、デフォルトの設定をそのまま使用すると、あなたのウェブサイトは平凡に見え、あなたのビジネスの特徴を際立たせることができないかもしれません。

WordPressとWooCommerceには、ショップにあらゆる種類の強力な機能を追加できる膨大な数のプラグインがある。その中の一つ、ElementorはWooCommerceの商品ページを簡単にカスタマイズできるとても便利なツールです。

Woocommerce商品シートとElementor入門

前述したように、ニーズに合ったより良いWordPressウェブサイトをデザインするのに役立つWordPressプラグインは数多く存在する。大規模なプラグインもあれば、特定の要素や機能の追加に特化したプラグインもある。

Elementorは前者の例である：

Elementorは、ウェブページのデザインとコンテンツ作成のための全く新しいインターフェイスを提供します。ウィジェット、ブロック、レイアウトの膨大なライブラリから選択しカスタマイズすることで、ウェブサイトをどのように構成するかをより自由にコントロールできます。

一方、WooCommerce Product Sheetはより的を絞ったソリューションです：

このプラグインは、WooCommerceの商品を一覧表示するカスタマイズ可能な動的フォームを追加するのに役立ちます。これらのテーブルは様々な用途に使用できますが、WooCommerceとの統合により、ユーザーフレンドリーで魅力的な方法で製品やサービスを表示するための完璧以上のツールとなります。(投稿、ページ、ドキュメントなど、商品以外のコンテンツを表示したい場合は、他のプラグインである Posts Table Pro を使用することができます。 Posts Table Pro は Elementor と同様に統合でき、WooCommerce 商品だけでなく、あらゆる WordPress コンテンツタイプをテーブルに一覧表示することができます)

Woocommerce商品シートをElementorページビルダーで使用する方法

まず、ElementorとWooCommerce Product Tableプラグインの両方がサイトにインストールされていること、そしてWooCommerceもインストールされ有効化されていることを確認します。これらのステップは通常、素早く簡単で、これらが完了したら、ユニークなウェブサイトの作成を開始する時間です。さあ、始めましょう！

1.Woocommerceの商品シートをテキストエディタまたはショートコードウィジェットに追加します。

最も基本的で便利なアプリケーションから始めましょう。ElementorサイトでDynamic Product Tableを使いたいだけなら、フロントエンドに表示されるようにウィジェットに追加します。 任意のページまたは投稿を開き、Elementorエディタを使用していることを確認します。従来の WordPress インターフェースが表示されたら"Elementorを使った編集"ボタンで切り替える：

Elementorを使うのが初めての方は、ざっと見渡してみてください。右側には大きなスペースがあり、そこにコンテンツが表示され、コンテンツの追加や編集に応じてリアルタイムに更新されます。左側には "ウィジェット "のリストがあり、このエリアにドラッグして、必要に応じて並べ替えたりカスタマイズすることができます：

様々なElementorウィジェットに商品テーブルを追加することが可能です。しかし、ページに単一の商品テーブルを表示したいだけなら、基本的なテキストセクションを使用できます。そのためテキストエディタウィジェットをクリックし、空白エリアにドラッグする：

その後、ウィジェット内をクリックしてデフォルトのテキストを削除し、好きなものを入力することができます。商品フォーム自体は、このシンプルなショートコードを貼り付けるだけで追加できます：

[product_table】。］

該当するコードがページのどこに配置されているかに関係なく、商品表はそれに従って表示されます。これは、ウェブサイトのフロントエンドでページを表示することで確認できます。

コードそのものに要素を使用したい場合は、ショートコードウィジェットを使用することもできます：

商品表をどこに配置するにしても、配置後は必ずページを保存することを忘れないでください。商品テーブルの外観や機能をカスタマイズすることもできます。

これを行うには、WordPressのダッシュボードに戻り、"WooCommerce "メニューを見つけてクリックし、"Settings "タブを選択します。画面上部の "商品 "オプションをクリックし、"商品テーブル "を見つけてクリックし、関連する設定を行います。

ここでは WooCommerce 商品フォームの設定の包括的なリストをご覧いただけます。フォームに表示する情報を選択したり、フォームにフィルタや変数を追加したり、その他いろいろなことができます。ここで変更した内容は、Elementor を使って配置した商品フォームに自動的に適用されます。フォームの調整が終わったら、設定を保存して完了です！

2.折りたたみ、タブ、またはトグルボタンを使用して複数の製品シートを整理する

すべてのWooCommerce商品を1つのテーブルに表示したい場合、上記の方法がより効果的です。しかし、複数のテーブルを作成し、それぞれに個別の商品カテゴリを表示したい場合、どのようにすればよいでしょうか？

Elementorでこれを行うにはいくつかの方法があります。例えば、アコーディオンウィジェットを使って、前の例と同じ効果を作りましょう。

まず、アコーディオン部分を右の編集エリアにドラッグする：

を使用して、好きなだけ異なるタブを追加し、各タブのタイトルとテキストを編集することができます。また、以前と同じショートコードを使用して、1つまたは複数のタブに商品テーブルを追加することも可能です。

もちろん、基本的なショートコードだけを追加しても、同じ商品テーブルがいくつもできてしまいます。その代わりに、各ショートコードを変更して、特定の商品、例えば特定のカテゴリーの商品だけを表示するようにする必要があります。正確な方法は、各テーブルにどの商品を含めるか、または除外するかによって異なります。

同じような効果を得るために使える便利なElementorウィジェットは他にもたくさんあります。トグルウィジェットやタブウィジェットなどです。複数のWooCommerce商品テーブルを魅力的で整理された方法で表示する、Elementorはこの効果を実現できます。

概要

WooCommerce Product TableプラグインをElementorと組み合わせて使用することで、ユーザーフレンドリーで美しい方法で商品を表示することができます。商品テーブルのショートコードをElementorウィジェットに追加するだけで、必要なコンテンツを動的に表示できます。

お問い合わせ
チュートリアルが読めない？無料でお答えします！個人サイト、中小企業サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨询：1025174874
三 Eメール：info@361sale.com
④ 勤務時間: 月～金、9:30～18:30、祝日休み