Elementorを使用して素晴らしいWooCommerce製品ページを構築および設計します

eコマースストアを競合他社と区別し、クライアントに独自のエクスペリエンスを提供するには、製品ページを変更する必要があります。 さらに、オンラインストア全体で一貫したビジュアルデザインを維持するには、製品ページを美的にパーソナライズするオプションが重要です。

Elementorは市場をリードするWordPressウェブサイトビルダーの1つですが、それを使用してWooCommerceストアを構築できることもご存知ですか？

多くの組み込みElementorWooCommerceモジュールを使用すると、WooCommerceコンテンツまたは機能ブロックを挿入したり、Elementorビルダーを使用してそれらのスタイルを設定したりできます。 かなり素晴らしいですよね？

WooCommerceのスタイリングとカスタマイズでは、小さな変更ごとにPHPとCSSが必要でしたが、Elementorのようなツールが改善されて複雑になるにつれて、ストアの外観と動作を制御するためのオプションが増えています。

始めましょう。

• Elementorテンプレートの作成
• Elementorの製品画像またはギャラリーの構築
• WooCommerceの製品タイトル、価格、カートに追加
• Elementor製品タブの設定
• Elementor製品の簡単な説明
• ElementorおよびWooCommerce製品のアップセル
• 結論–Elementor製品ページビルダー

Elementorテンプレートの作成

手順の最初のステップは、WordPressダッシュボードのテンプレートに移動して新しいElementorテンプレートを作成することです。 [新規作成]をクリックして、作成するテンプレートとして[単一の製品]を選択します。

このテンプレートを最初から開発するため、ブロックを配置する必要はありません。 新しいページの通常のElementorBuilder画面が表示されるまで、次のボックスを終了します。

Elementorの製品画像またはギャラリーの構築

すべてのWooCommerce製品には、製品の写真を顧客に紹介する製品画像または画像ギャラリーがあります。 Elementorには、これをテンプレートに挿入できる組み込みのProductImagesモジュールが用意されています。

単純な2列の行を作成し、左側の列にProductImagesモジュールを入力します。 これは実用的に見えて仕事を実行しますが、この記事で使用されているElementor HelloThemeに一致するように販売バッジをカスタマイズしましょう。 これを行うには、カスタムCSSの小さな行を適用する必要があります。これは、[詳細]> [カスタムCSS]に移動し、以下のコードを貼り付けることで導入できます。

セレクター.onsale {\ sbackground-color：＃cc3366; \NS}

WooCommerce製品のタイトル、価格、カートへの追加

右側の列に、製品タイトル、製品価格、およびカートに追加するためのElementorモジュールを追加します。

Elementorコンストラクターでこれらの3つのモジュールを検索し、ドラッグアンドドロップして上記の順序で配置します。 これは完全に機能しますが、上記のセクションHelloElementorテーマのようなスタイルに一致するようにカスタマイズしたいと思います。 Elementorを使用したモジュールのスタイリングは簡単です。モジュールをクリックするだけで、エディターは左側のスタイリングオプションを開く必要があります。

これらのモジュールの内容は優れています。 したがって、[スタイル]タブで作業します。 まず、Hello Elementorテーマで使用されているものと一致するように、製品タイトルのフォントと色を更新しましょう。

次に、各モジュールをクリックしてテキストの色を変更することにより、製品価格モジュールとバスケットに追加モジュールについて同じことを行う必要があります。 製品価格については、見出しと対比するために濃い灰色を使用するので、フォローしている場合はこの16進コードを入力してください–＃54595f

次に、[カートに追加]モジュールで、いくつかの更新を行います。 以下の設定を使用したボタンの背景色とボタンの境界線の半径：

• コンテンツを「カートに追加」に設定します。
• 背景色を「＃cc3366」に設定します
• 境界線の半径を0に設定します

金額セレクターの境界線半径を0に変更しました。これは、[数量]の[スタイル]タブで実行できます。

Elementor製品タブの設定

すべての製品は、製品の説明やレビュー（利用可能な場合）などの基本情報を表示する必要があります。 これは通常、製品タブで処理されます。

上部セクションの下に新しい行を作成し、Product DataTabsモジュールをElementorBuilderから行にドラッグして挿入してください。 Hello Elementorテーマからいくつかのスタイルを継承しているため、ここで必要なスタイリングはそれほど多くありません。 ただし、レビュー送信ボタンのスタイルを変更しましょう。

これを行うには、カスタムCSSを少し必要とします。 [製品データ]タブの編集を開始し、[詳細設定]タブをクリックして、[カスタムCSS]まで下にスクロールします。 以下のCSSを入力すると、デザインに合わせて色を調整できます。

.woocommerce #review form #reply .form-submit input {background-color：＃cc3366; 色：#fff; border-radius：0px; }

Elementor製品の簡単な説明

さて、これまでのところ、まともでシンプルなデザインになっていますが、少しまばらに見えます。 製品の簡単な説明モジュールを上部に追加すると、これを埋めてコンテキストを追加するのに役立ちます。

WooCommerceの簡単な説明モジュールを検索し、製品価格の下とカートに追加モジュールの上にドラッグアンドドロップしてください。

Hello Elementorからスタイルを継承しているため、ここではまだスタイリングは必要ありません。

ElementorとWooCommerceの製品アップセル

すべてのWooCommerceサイトにとって、バスケットの平均値を上げることは非常に重要です。そのため、ElementorにProduct Upsellsモジュールが含まれているため、ストアのカスタマイズを簡単に統合できます。

Elementor Builderで製品のアップセルモジュールを検索し、[製品データ]タブの後ろの新しい行に挿入してください。

ご覧のとおり、これには、残りのスタイルを補完するために少し調整が必要です。 モジュールの変更を開始し、次の変更を加えます。

• タイトルの色を–＃cc3366に設定します
• 見出しの色を–＃cc3366に設定します
• 価格の色を–＃54595fに設定します
• ボタンの背景色を–＃cc3366に設定します
• ボタンの色を– #fffに設定します
• ボタンの境界半径をt0–0に設定します

完成品は上記のようになります。 このガイドをテンプレートの出発点として使用すると、適切と思われる色の16進コードを調整できます。

完了したら、テンプレートを公開します。 次のウィンドウに、「テンプレートをどこに表示しますか？」という質問が表示されます。 「条件の追加」をクリックして、このテンプレートをいつ使用するかを決定します。 「すべての製品」を選択して、すべての製品ページでテンプレートを使用できます。 このテンプレートは、特定のカテゴリに分類される製品、または特定のタグが関連付けられている製品にのみ使用することもできます。

結論– Elementor product page Builder

一部のユーザーは、Elementorを使用しているときに、フォントの色やタイポグラフィなどのカスタマイズされたデザイン設定を表示するのが難しい場合があります。 ストアの外観を制御できるWordPressテーマを使用している場合、WooCommerceストアの外観が影響を受ける可能性があります。 この問題が発生した場合は、記事がカスタムページ設定を上書きする場合があることに注意してください。

空白のページを選択し、製品ウィジェットを使用してゼロからページを作成して、完全にカスタマイズされた外観にすることもできます。 空のページを使用し、テンプレートライブラリのポップアップウィンドウが表示されたら閉じて、新しく作成したページでの構築を開始します。 カスタムの[カートに追加]ボタン、[商品の価格]、[商品の画像]、[商品のタイトルと説明]は、商品ページをカスタマイズするために使用できるWooCommerceウィジェットのほんの一部です。 このページにアクセスすると、現在利用可能なさまざまなウィジェットをすべて確認できます。 必要に応じて、ページレイアウトの任意の場所にウィジェットを配置し、目的の外観に一致するようにウィジェットのスタイルをカスタマイズできます。

eコマースストアを競合他社と区別し、クライアントに独自のエクスペリエンスを提供するには、製品ページを変更する必要があります。 さらに、オンラインストア全体で一貫したビジュアルデザインを維持するには、製品ページを美的にパーソナライズするオプションが重要です。 Elementorは、WooCommerceストアのページをカスタマイズするための素晴らしいツールであり、強くお勧めします。 ページビルダーには、使いやすさに加えて、カスタム製品ページの作成に役立つすべての必要なウィジェットとスタイルオプションが含まれています。 このチュートリアルが参考になり、Elementorを使用してWooCommerce製品と製品アーカイブページをカスタマイズするために必要な情報が提供されたことを願っています。 過去にElementorを使用してWooCommerceページを作成したことがありますか？ コメントセクションであなたの考えを共有することを歓迎します。 ぜひご覧ください。