Elementor WooCommerce Builderによる個別商品ページのカスタマイズ完全ガイド - Photonflux.com｜専門的なWordPress修理サービス、グローバルなリーチ、迅速な対応

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

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

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

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

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

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

WooCommerceパンくずウィジェット

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

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

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

商品価格ウィジェット

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

製品評価ウィジェット

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

ウィジェットの短い説明

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

製品在庫ウィジェット

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

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

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

製品メタ・ウィジェット

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

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

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

商品画像ウィジェット

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

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

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

製品関連ウィジェット

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

追加情報ウィジェット

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

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

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

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

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

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

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

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

はんけつをくだす

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

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