ElementorがWooCommerce商品ページテンプレートを直感的にカスタマイズ・編集する方法

Elementorを使えば、個々の商品ページを簡単にデザインすることができます。ドラッグ＆ドロップの簡単な操作で、ページ上の様々な要素を好みに合わせて調整し、デザインをパーソナライズすることができます。以前は、WooCommerceページのデザインをカスタマイズするには、多くのコードを記述する必要があり、専門家でなければ難しいものでした。

でも、今は、それがすべて簡単になった。 Elementor WooCommerce Builder.複雑なコードをいじったり、操作をマージしたり、フックを追加したり、複雑なPHPファイルに入り込んだりする必要はもうない。

を使用するだけです。 エレメンタル・プロ Elementorのパワフルな機能を使えば、デザインと商品ページのレイアウトを完全にコントロールすることができます。カスタマイズはすべてフロントエンドのElementorのページビルダーで直接行います。デザインは簡単で直感的です。

デフォルトのWooCommerce商品テンプレート

基本的なWooCommerceの商品ページを以下に示します：

Elementorを使えば、商品ページテンプレートのレイアウトを自由にデザインすることができます。このチュートリアルでは、この商品ページのデザインを作成する方法を紹介します：

Elementorの個別商品テンプレートを使用しているため、一度テンプレートの作成が完了すれば、全商品、特定のカテゴリー、その他の条件に適用することができます。

WooCommerceの商品ページをカスタマイズする方法

このチュートリアルでは、商品ページのカスタマイズに焦点を当てますので、WooCommerceの基本的なセットアップと新しい商品の追加方法は省略します。後日、特別なWooCommerceチュートリアルを行う予定です。

セットアップが完了したら、WooCommerceプラグインをインストールして、関連商品をサイトに追加するといいだろう。また、ビジュアルデザイン機能を利用するために、ElementorとElementor Proをインストールする必要がある。

注目してください！WooCommerceを有効にしないとElementorの製品テンプレートにアクセスできないので、忘れずに有効にしてください！

ステップ1：単一製品テンプレートの作成

ステップ2：あらかじめデザインされた商品ページのテンプレートを選ぶか、一から作る！

最も簡単な方法は、あらかじめデザインされた商品ページテンプレートを使用し、それを自分のウェブサイトに合わせてカスタマイズすることです。商品ページにはいくつかの異なるスタイルがあります。ウィジェットを追加し始める前に、商品ページが全幅であることを確認するために全幅テンプレートに切り替えることができます。

Elementorを使えば、商品ページのレイアウトやスタイルを完全にカスタマイズし、コントロールすることが可能です。もう一つの方法は、ゼロから作成することです。編集パネルでは、商品固有のウィジェットを見ることができます。

ステップ3：ページを構成する商品ウィジェットを追加する

注目してください！商品説明、ショッピングカートボタン、その他のコンテンツなどの必須フィールドを含むいくつかのサンプル商品を挿入し、1つの商品テンプレートでプレビューできるようにすることが重要です。

さて、いよいよ商品ページを構成する要素を作りましょう。このチュートリアルでは、以下のElementorウィジェットのみを使用し、他のプラグインは必要ありません：

• 製品タイトルウィジェット
• Wooパンくずウィジェット
• 商品画像ウィジェット
• 製品評価ウィジェット
• ウィジェットの短い説明
• 商品価格ウィジェット
• カートに追加ウィジェット
• 製品メタ・ウィジェット
• 製品データタブ
• 製品関連 
• ウィジェットの追加

ビデオで見たように、レイアウトの調整や要素の移動は完全に自由です。商品ページをより効果的で魅力的なものにするために、他のあらゆるウィジェットを使用することができます。シェアボタン、コールトゥアクションウィジェット、フィーチャー画像、ドロップダウンメニュー......カスタムフィールドも、ダイナミックコンテンツ機能を使ってテンプレートに追加することができます。

ステップ4：他の商品と一緒に商品ページをプレビューする

商品テンプレートが正しくデザインされていることを確認するために、複数の異なる商品でプレビューすることをお勧めします。左下パネルの目のアイコンをクリックし、「設定」をクリックします。プレビュー設定]で、表示したい特定の商品を選択します。さあ、適用してどのように見えるか見てみましょう。

ステップ5：条件設定

この段階で、商品テンプレートを表示する場所を決定する条件を設定できます。デフォルトでは、テンプレートはサイト上のすべての商品ページに影響します。特定の商品カテゴリーを選択することも可能です。公開 "をクリックすると、個々の商品が公開されます！

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

ショップページのカスタマイズ

このタスクを達成するためには、生産ラインを設計する必要がある。カタログページこのページは、サイト上のすべての製品、またはカテゴリー内の製品に影響します。まず エレメンタ > 私のテンプレート属製品プロフィールテンプレートの作成.次に、既存のテンプレートを選択するか、テンプレートを作成します。

追加 "アーカイブ製品 "ガジェットと"アーカイブタイトル"のデザインをカスタマイズします。個々の商品テンプレートのデザインと一致させるには、ページ間でスタイルをコピーする機能を使います。商品ページに戻り、［コピー］を右クリックします。アーカイブされた商品に戻り、右クリックでスタイルを貼り付けます。

で "アーカイブ製品 「の設定"諮る > すじ "の下での選考新製品".次に、商品カテゴリーでリングを選択します。これで指輪のカテゴリーだけが表示されます。このカテゴリーの商品リストが長い場合は、ページネーションでスライドしてください。スタイルタブでは列と行インター隙間.調整カラーそして書体その他

パブリッシュする前に、個々の製品テンプレートで行うように、アーカイブを表示する場所を決定する条件を選択します。をクリックします。ポスト"とアーカイブページが公開された。

はんけつをくだす

ElementorのWooCommerce Builderは、直感的に商品ページを作成し、微調整できるデザインの柔軟性を提供します。これにより時間を節約し、アイデアからライブで完全に機能するWooCommerceオンラインショップにかかる時間を劇的に短縮します。