ショッピングのトレンドは急速に変化しており、人々はこれまで以上にオンラインで購入する傾向があります。
人々が買い物に出かけるよりもオンラインで購入する方が便利だから、オンラインショッピングの習慣を満たすためにeコマースストアのニーズが高まっているのはそのためです。
適切なツールと設定を使用して、すぐにeコマースストアを開始することもできます。 そして、あなたは記録的な期間内にあなたの売上高の劇的な増加に気づくでしょう。
eコマースストアの立ち上げを計画していて、WordPressのエキスパートが仕事を代行してくれるのを探している場合は、何も必要ありません。
はい！ WordPressの開発者やコーディングの専門家である必要はなく、適切なツールとセットアップを使用したコーディングの知識がなくても、自分で行うことができます。
Elementorページビルダーを使用してWooCommerceショップページを作成するステップバイステップのチュートリアルに従ってください。
より深く掘り下げて要点を理解しましょう！
- Elementorを使用して製品ページを作成するために必要なものは何ですか？
- Elementorページビルダーのインストール方法は？
- Elementor WooCommerce製品ページを段階的に作成する
- モバイルでWooCommerce製品ページを最適化
- Elementor Proの価格
- まとめ
Elementorを使用して製品ページを作成するために必要なものは何ですか？
WooCommercepluginをWordPress.orgリポジトリからWordPressサイトにインストールし、その上にElementorページビルダー。 無料版はWordPress.orgからダウンロードできますが、無料版には限られたカスタマイズオプションが付属しています。 したがって、無制限のカスタマイズオプションを取得したい場合は、プロのElementorにアクセスして、公式のElementor.orgからダウンロードしてください。
Elementorページビルダーのインストール方法は？
- Elementor無料版の場合：
Plugin移動>新規追加> Elementorページビルダーを入力>インストールをクリックしてアクティブ化します。
- Elementor Proの場合：
Elementor.comからProバージョンを購入し、zipファイルをアップロードして、[インストールしてアクティブ化]をクリックします。
Elementor WooCommerce製品ページを段階的に作成する
標準のWooCommerce製品ページは、基本的なWooCommerce製品ページとまったく同じように見えます。
ただし、ブランドの声を追加したい場合は、独自にカスタマイズする必要があります。
ステップ1：ダッシュボードメニューから[テンプレート]セクションに移動し、[新規追加]をクリックします。
次に、ドロップダウンメニューから[単一の製品]を選択します。
Elementorにはあらかじめ作成された製品ページテンプレートが付属しているので、クイックスタートを希望する場合は、目的のものに最も近いオプションから誰でも選択できます。
ゼロから作成するよりも、既製のテンプレートから製品ページを作成する方がはるかに簡単です。 したがって、既存のテンプレートを変更して、時間と労力を節約してください。
このテンプレートを製品ページに選択しました。
お気に入りのテンプレートを選択すると、Elementorエディターが表示され、好みに応じてテンプレートをカスタマイズできます。
ここでは、左側のメニューにさまざまなブロックが表示されます。 使用するブロックをドラッグアンドドロップします。
「+」追加ボタンをクリックして、追加する列サイズを選択します。
商品テンプレートに2列のサイズを選択しました。
次に、右側の列に製品タイトルウィジェットを追加し、それに製品のタイトルを追加します。
製品タイトルを追加したら、次のステップはその上に「Wooブレッドクラム」を追加することです。
次に、左側の列に商品画像を追加し、左側の列から商品画像ウィジェットをドラッグアンドドロップします。
両方の列にパディングを追加して、互いにわずかに離すことができます。
画像を追加し、必要な寸法に従ってパディングを調整した後、製品タイトルの下に製品評価ウィジェットを追加します。
製品レビューブロックの下に製品ウィジェットの簡単な説明を追加します。 2つのブロック間のスペースを調整することもできます。
製品の説明とすべての詳細を確認したら、次のステップは製品の価格を追加することです。そのためには、価格ウィジェットを製品の説明の下にドラッグアンドドロップする必要があります。
製品の説明の下に価格タブを追加した後、左側のメニューからオプションを選択して価格ウィジェットをカスタマイズできます。 アイコンを拡大したり、フォントスタイルを変更したり、フォントの色を黒から他の任意の色に変更したりできます。
次に、「カートに追加」ウィジェットを追加し、必要に応じてメニューからその色、フォント、またはスタイルをカスタマイズします。
次に、製品カテゴリと製品シリアル番号を表示する価格ウィジェットの下に製品メタを追加します。
ステップ2： 次のセクションで製品に関する追加情報を追加します。
新しい2列のセクションを作成し、説明、追加情報、レビューを含む[商品データ]タブを追加します。 列の右側に、関連する製品セクションを追加します。
各列の同じフォーマットを維持するには、各列の左隅をクリックして、各列の列フォーマットをコピーして貼り付けることができます。
ステップ3：「アップセルセクション」を追加する別のセクションを追加します。
追加後のアップセルセクションは次のようになります。 セクションを揃えるためにパディングを追加します。
そして最後に、製品ページのデザインが完了しました。 最後のステップは、製品を公開する場所です。 公開をクリックするか、左側のメニューの一番下の隅にある目のセクションに移動し、設定をクリックして製品のカテゴリを選択できます。
[条件を追加]メニューをクリックし、製品のカテゴリを選択して、[公開]をクリックします。
モバイルでWooCommerce製品ページを最適化
多くのトラフィックがスマートフォンを経由するため、スマートフォンを表示するためにストアを最適化する必要があります。そうしないと、売上を失う可能性があります。
WooCommerceはすでにモバイル向けに最適化されていますが、商品ページテンプレートがモバイル画面で完全に適切に表示されるかどうかを確認するには、以下の手順に従ってください。
Elementorインターフェースの左下隅にオプションのResponsive Modeがあります。
モバイル対応オプションをクリックすると、モバイル、デスクトップ、タブの表示オプションを切り替えることができます。
表示したいオプションのいずれかをクリックして、複雑さを見つけたらデザインを微調整します。
保存して、製品ページの公開を続けます。
Elementor Proの価格
Elementorベーシックバージョンは無料で利用できますが、プロバージョンには3つのライセンスが付属しています。
プラスライセンスとエキスパートライセンスは、それぞれ3サイトと1000サイトをサポートする大人のビジネスや代理店に適しています。
まとめ
Elementorページビルダーの唯一の目的は、ユーザーがコーディングに依存することなく創造性を解き放つことを可能にすることです。 Elementorには、魅力的なレイアウトに基づいてあらゆる種類の製品ページを作成できるさまざまなウィジェットが付属しています。 基本的なWooCommerce要素は10以上あり、ユーザーはショップページのあらゆるねじれや曲線をカスタマイズできます。 また、Elementorメニューに目的の要素が見つからなくても、心配する必要はありません。 兵器庫をアップグレードし、ライブラリに複数の要素を追加できる他の多くの詳細設定があります。 それらの1つは、WooCommerce専用の要素が付属するEssentialAdd-ons
