用 Elementor 打造个性化 WooCommerce 产品展示模块

WooCommerce はWordPressで最も人気のあるeコマース・プラグインの1つである。エレメンタ一方、ビジュアルページエディタも人気があります。この2つを組み合わせることで、コードを書くことなく、完全にパーソナライズされた商品ショーケースのページを作成することができます。

このチュートリアルでは、より魅力的でコンバージョン率の高いEコマースページを作るために、Elementor(プロバージョンの機能)を使ってWooCommerceテーマの商品ショーケースモジュールをカスタマイズする方法を詳しく説明します。

I. 準備

作業を始める前に、以下の設定が完了していることを確認してください：

WordPressウェブサイトのインストールと有効化 WooCommerce プラグイン
Elementorプラグインをインストールして有効にする（Elementor Pro推奨）
WooCommerce対応テーマ（Hello Elementor、Astra、Blocksy、Kadenceなど）を使用する。
商品情報がWooCommerce商品カタログに入力されました。

Elementorの無料版を使用している場合、ビジュアライゼーションコントロールにいくつかの制限があります。

次に、商品陳列用テンプレートを作成する2つの方法である。

Elementorは、商品プレゼンテーションの内容をカスタマイズする2つの主流な方法を提供します：

方法1：WooCommerceウィジェットを使って商品ブロックを素早く構築する

トップページのレコメンドエリア、カテゴリーページの商品グループ、水平スライダーなどのレイアウト構築に最適です。

操作手順：

WordPressバックエンドを開く → ページ → 新しいページ
Elementorでページを編集

左側のウィジェット検索ボックスに "Woo "と入力する。

以下のコンポーネントのいずれかをドラッグする：
- 商品：複数の商品を表示し、カテゴリー、ラベル、または手動で選択した商品でフィルタリングすることができます。
- 商品カテゴリー: 商品カテゴリーをグリッドで表示
- 製品カルーセル：横スクロール製品スライダーの構築
- セール商品 / おすすめ商品 / 売れ筋商品：プロモーション商品、おすすめ商品、売れ筋商品をそれぞれ表示しています。

クエリー」タブで表示条件を選択する。

商品画像、ヘッダースタイル、ボタンスタイルなどの外観オプションの設定

ページを保存して公開する

方法2：テーマビルダー（Elementor Pro）を使って個々の商品テンプレートをカスタマイズする

再建に適している製品詳細ページのヘッダー、画像、価格、ボタンなどのレイアウト構造。

操作手順：

オープン・バックエンド→テンプレート→テーマ・ビルダー

Single Product "をクリックし、"Add New "を選択する。

空白のテンプレートを使用するか、公式プリセットをインポートする

以下のウィジェットをドラッグする：
- 製品名
- 商品画像
- 製品価格
- カートに入れる
- 製品評価
- 製品メタ
- 製品内容
- 製品データタブ

完了したら "Publish "をクリックする。
条件設定でテンプレートの適用範囲を選択する（全商品に適用するか、特定のカテゴリーに適用するかなど）

III.高度なカスタマイズ技術

これらのヒントは、商品ショーケースのページをより表現力豊かでわかりやすいものにします：

1.ダイナミックラベルの追加（Proが必要です）

エレメンタル・プロの "動的タグ「この機能により、テキスト、ボタン、タイトルに製品フィールドを埋め込むことができます。

例

期間限定プロモーション: {{product_title}}
ボタンテキスト：今すぐ購入 {{product_price}}

2.高度なスタイル設定の使用

商品カードにホバーシャドウ、画像ズームなどのインタラクティブ効果を追加する。
製品の描画サイズ比率の調整（例：1：1、4：3）
ボタンの色、ボーダー、フォント、その他の詳細スタイルのカスタマイズ

3.レスポンシブで最適化されたレイアウト

Elementorは、デスクトップ用、タブレット用、モバイル用にそれぞれスタイルを設定できます：

カラム数をコントロールする。例えば、デスクトップは4カラム、モバイルは2カラムまたは1カラムが自動的に表示される。
評価やプロフィールなど、モバイルで不要な要素を非表示にする。
ボタンやフォントサイズを調整し、各デバイスでの読みやすさを確保

V. まとめ

エレメンタとともに WooCommerce 商品ウィジェットとテーマビルダーの組み合わせは、商品ページのデザイン空間を大きく広げます。トップページのおすすめ商品ブロックであれ、商品詳細ページの構成再構築であれ、商品ウィジェットとテーマビルダーの使い方に熟練しているだけで、視覚的に強く明快な表示モジュールを構築することができます。

また、より高い機能を必要とする場合は、Crocoblock、Element Pack、Essential Addonsなどの拡張機能を組み合わせて、商用グレードのEコマースサイトを構築することもできます。

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