Elementor WooCommerce Builderは、WooCommerceウェブサイトのデザイン、特に個々の商品ページやアーカイブページテンプレートのカスタマイズに大きな柔軟性を提供します。この強(qiáng)力なビルダーで、各ページのレイアウトとデザインを完全にコントロールし、あなたのオンラインショップを美しいだけでなく、強(qiáng)力なものにしましょう。

この記事では Elementor WooCommerce Builder 個別の商品ページテンプレートを作成し、通常のWooCommerce商品ページに含まれるすべてのセクションと、それに対応するElementorウィジェットを1つずつ確認(rèn)します。これらのウィジェットを使えば、商品畫像からカートボタンのレイアウトやスタイルまで、ページの見た目や機(jī)能を簡単にカスタマイズでき、細(xì)部までブランドのスタイルにマッチさせることができます。

Elementor WooCommerce Builder 商品ページ?コンポーネントとそのウィジェット

WooCommerceの商品ページでは、各要素は獨(dú)立したパーツです。 以下に、1つの商品ページを構(gòu)成するすべての主要なパーツとそれに対応するウィジェットを示します：

メニューショッピングカートウィジェット

• 官能性: このカスタムウィジェットはショッピングカートをウィンドウにポップアップし、ユーザが現(xiàn)在のページを離れることなくカートの中身を見たり管理したりできるようにします。
• カスタマイズElementorを使えば、ショッピングカートの外観、開き方、表示場所などを設(shè)定でき、よりスムーズなユーザー體験を?qū)g現(xiàn)できます。

WooCommerceパンくずウィジェット

• 官能性: ユーザーがサイト內(nèi)のどこにいるかを素早く理解し、簡単に前のページに戻れるように、ページパス（パンくずナビゲーション）を表示します。
• カスタマイズパンくずの色、フォント、サイズ、レイアウトをコントロールして、ページ全體のスタイルと統(tǒng)一感を持たせることができます。

製品タイトルウィジェット

• 官能性商品名とタイトルを表示し、ページの核となる部分です。
• カスタマイズ見出しのフォント、サイズ、色、位置を調(diào)整することで、商品の見出しがページ上で目立つようにし、全體のデザインとの一貫性を保つことができます。

商品価格ウィジェット

• 官能性ユーザーの目を引くために、商品の価格をアピールする。
• カスタマイズ価格表示の位置、フォントのスタイル、色などをコントロールし、価格情報を見やすく表示することができます。

製品評価ウィジェット

• 官能性商品の信頼性を高めるために、ユーザーの評価を紹介する。
• カスタマイズこのウィジェットでは、評価星のスタイル、色、間隔を調(diào)整することができます。

ウィジェットの短い説明

• 官能性: ユーザーが商品をすばやく理解できるように、短い商品説明を表示します。
• カスタマイズ説明文のレイアウト、フォントスタイル、配置をコントロールすることで、ユーザーの注意を引くことができます。

製品在庫ウィジェット

• 官能性商品の在庫情報を表示し、ユーザーに在庫狀況をお知らせします。
• カスタマイズユーザーが在庫狀況を理解しやすいように、在庫テキストのスタイル、位置、表示を設(shè)定できます。

カートに追加ウィジェット

• 官能性: これはWooCommerceの商品ページの核となる要素の一つで、ユーザーが商品を直接ショッピングカートに追加できるようにします。
• カスタマイズElementorを使えば、カートに入れるボタンのレイアウト、色、フォントサイズなどを自由にコントロールできるので、十分に目立つようにすることができます。

製品メタ?ウィジェット

• 官能性分類や表示など、製品に関する追加情報を表示します。
• カスタマイズテキスト間の間隔、表示方法（スタックまたはインライン）、メタデータのスタイルをコントロールし、ページ全體のデザインと調(diào)和させることができます。

商品データラベルウィジェット

• 官能性製品の屬性や仕様など、製品の詳細(xì)なデータラベルを表示します。
• カスタマイズデータラベルのスタイル、色、レイアウトは自由に設(shè)定できます。

商品畫像ウィジェット

• 官能性ユーザーを惹きつける重要なビジュアル要素です。
• カスタマイズ: 畫像のサイズや表示方法（スライドショーや靜止表示など）を設(shè)定し、畫像の読み込み速度を最適化することができます。

ウィジェットのアップセル

• 官能性ショーケースにアップセル商品を並べ、ユーザーに関連商品の購入を促す。
• カスタマイズアップセル商品の表示スタイル、配置、メイン商品との距離を設(shè)定できます。

製品関連ウィジェット

• 官能性現(xiàn)在の商品に関連する他の商品を表示し、ユーザーの購買意欲をさらに高める。
• カスタマイズ関連商品の表示スタイルや配置をコントロールできます。

追加情報ウィジェット

• 官能性素材やサイズなど、製品のより詳細(xì)な情報をユーザーに提供する。
• カスタマイズ追加情報の表示スタイルやレイアウトを設(shè)定することで、わかりやすく、ページ上の他の要素と協(xié)調(diào)させることができます。

単一商品ページのテンプレートの作成方法

利用する Elementor WooCommerce Builderカスタマイズされた個別商品ページテンプレートそして、サイト全體のすべての商品ページに適用します。以下はその詳細(xì)な手順です：

1. テーマ?ビルダーへ
   WordPress管理畫面のバックエンドの テンプレート > テーマビルダー.

2. 個々の製品テンプレートを選択 テーマビルダーで、"新しいテンプレートの追加"を選択します。単品"をテンプレート?タイプとして使用し、それに名前を付ける。

3. 製品ブロックの挿入 ポップアップ?テンプレート?ギャラリーでは、以下のことができます。オプションデザインされた個人製品モジュール?ブロックとインサートまたは空白のテンプレート商品ページのカスタムデザインも可能です。

4. デザインページ
   • 先のデザイン要件に基づき、Elementorが提供する WooCommerceウィジェットページをカスタマイズする。

5. 條件の公表と適用
   • デザインが完成したら、"ポスト「ボタン
   • 表示條件を設(shè)定します。このテンプレートをすべての商品ページに適用するか、特定の商品カテゴリーに適用するかを選択できます。條件の選択が完了すると、テンプレートはすぐに有効になります。

はんけつをくだす

Elementor WooCommerce Builderを使えば、コードを書かずにユニークなWooCommerce商品ページテンプレートを自由にデザインできます。このツールはページのレイアウトとデザインを完全にコントロールできるだけでなく、様々なウィジェットを通して細(xì)部まで微調(diào)整することができます。

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