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