Elementor を使用して素晴らしい WooCommerce 製品ページを構築およびデザインします

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

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

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

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

始めましょう。

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

Elementor テンプレートの作成

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

このテンプレートを最初から開発するため、ブロックを配置する必要はありません。 新しいページの通常の Elementor ビルダー画面に到達するまで、次のボックスを終了します。

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

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

シンプルな 2 列の行を作成し、左側の列に製品画像モジュールを入力します。 これは実用的であり、機能的ですが、この記事で使用されている Elementor Hello テーマに合わせて販売バッジをカスタマイズしてみましょう。 これを行うには、カスタム CSS の短い行を適用する必要があります。これは、[詳細設定] > [カスタム CSS] に移動し、以下のコードを貼り付けることで導入できます。

セレクター .onsale { \s背景色: #cc3366 ; \s}

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

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

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

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

次に、各モジュールをクリックしてテキストの色を変更し、「製品価格」モジュールと「バスケットに追加」モジュールでも同じことを行う必要があります。 製品価格については、見出しと対照的に濃いグレーを使用するので、この手順に従っている場合は、この 16 進コードを入力してください – #54595f

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

• 内容を「カートに入れる」に設定します。
• 背景色を「#cc3366」に設定します
• 境界線の半径を 0 に設定します

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

Elementor 製品タブの設定

すべての製品には、製品の説明やレビューなどの基本情報があれば表示する必要があります。 これは通常、製品タブで処理されます。

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

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

.woocommerce #レビューフォーム #返信 .form-submit input {背景色: #cc3366; 色: #fff; 境界半径: 0px; }

Elementor製品の簡単な説明

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

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

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

Elementor および WooCommerce製品のアップセル

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

Elementor ビルダーで製品 Upsells モジュールを検索し、それを製品データ タブの後ろの新しい行に挿入してください。

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

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

完成品は上記のようになります。 このガイドをテンプレートの出発点として使用すると、カラー 16 進コードを必要に応じて調整できます。

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

結論 – Elementor製品ページビルダー

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

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

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