オンラインストアを作成するのはエキサイティングです。 優れた店頭を持つことは、ビジネスの成功に貢献します。 ただし、うまく機能するお店をデザインしたい場合は、苦労するかもしれません。
WooCommerce ページ ビルダーを使用して、あなたとあなたの顧客の両方に喜ばれる e コマース サイトを作成できます。 を見てみましょう WooCommerce プラグイン。 次のステップは、Beaver Builder を使用してオンライン ストアを簡単に作成できることを示すことです。 さあ、始めましょう！
内容
WooCommerce の簡単な紹介
WooCommerce でできること eコマース機能を追加 オンラインで製品を販売できるように、WordPress サイトに次の手順を実行します。
さらに、WooCommerce は 28 年までに約 2020% の市場シェアを獲得すると予測されているため、良い仲間になることができます。
WooCommerce は、WordPress と同様に、オープン ソースで高度にカスタマイズ可能なソリューションです。 これにより、支払いゲートウェイとさまざまな配送オプションを設定して、すぐに e コマース帝国を始めることができます。
WooCommerce を使用すると、製品を作成、編集、および管理することもできます。
WooCommerce アドオン プラグインを使用すると、他の多くの機能にアクセスできます。
Beaver Builder を使用して WooCommerce ショップと製品ページを構築する (4 つの簡単なステップで)
ただし、WooCommerce の機能を理解するには、まず Web サイトを立ち上げる必要があります。 WooCommerce、Beaver Builder、および Beaver Themer WordPress プラグインをインストールしてアクティブ化することから始めます。 これで、製品ページとショップ ページを作成する準備が整いました。
ステップ 1: 商品を追加してストアを作成する
ショップを設定するための最初のステップとして、商品のリストを作成します。 WooCommerce を使用すると、物理的な商品、デジタル商品、バリエーション (サイズや色など) のある商品を販売できます。
WooCommerce を初めて使用する場合は、WooCommerce が提供するサンプル製品セットをインストールして、システムがさまざまな種類のアイテムでどのように機能するかを理解することができます。 ここでは、バリエーションや販売オプションなど、WooCommerce 製品のいくつかの機能について説明します。
ゼロから始めたい場合は、基本的な製品を作成する方法を学びます。 何を販売する予定であっても、この投稿の他のセクションが役立ちます。
WordPress ダッシュボードで新しい製品を作成します。 左側のメニューで [製品] > [新規追加] を選択します。 ストアに追加するアイテムについて、次のフィールドに入力します。
価格設定、税金、配送料など、商品データ パネルまで下にスクロールすることで、商品の重要なパラメーターのほとんどを設定できます。 WooCommerce では、商品に税金と配送オプションを含めるオプションがあり、個別に上書きできます。
一般設定で、製品がダウンロード可能か仮想かを決定します。 製品が物理的なものである場合は、チェックボックスをオフのままにしてください。
在庫管理だけでなく、始められます。 製品を接続すると、クロスセルとアップセルのオプションが提供されます。
また、商品データ パネルの下にある [商品の簡単な説明] フィールドの下に、商品の簡単な説明を XNUMX つ追加することもできます。 通常、ストアフロントのリストにはこの情報が含まれています。
画面の右側に製品カテゴリとタグが表示されます。 役立つオーガナイザーをいくつか紹介します。
商品リストには、XNUMX 枚か XNUMX 枚の写真を含める必要があります。 次のオプションを使用できます: 単一の画像または画像のグループ:
デバイスから写真をアップロードするか、メディア ライブラリから画像を追加できます。 同様に、製品ギャラリーに画像を追加できます。 画像をドラッグ アンド ドロップするだけで並べ替えることができます。
ステップ 2: 新しい商品ページをデザインする
商品を表示するには、商品ページを作成できます。 Beaver Themer のビデオ チュートリアルでは、WooCommerce の単一商品ページをカスタマイズする方法について段階的な手順を説明しています。
Beaver Themer は、Beaver Builder を WooCommerce ページ ビルダーに拡張するための強力なツールです。 このアドオンを使用すると、サイト全体にテンプレートを適用できます。
Beaver Builder で [テーマ レイアウト] > [新規追加] をクリックします。
レイアウトにはタイトルが必要です。 Add Themer Layout ボタンをクリックする前に、レイアウトとタイプを選択する必要があります。
次のページに進むときに、新しいデザインがすべての製品ページに適用されていることを確認してください。 XNUMX 番目のボックスで、[場所] の下の [すべての製品] を選択し、[製品] を選択します。
作業を保存した後、Beaver Builder でレイアウトを編集できます。 右上隅から始めて、青いプラス記号をクリックします。 [テンプレート] をクリックしたら、[新規] をクリックします。
[製品] > [既存のレイアウトを置き換える] を選択して、既存のレイアウトを置き換えます。 テンプレートを製品ページに変える便利なデフォルトがいくつか用意されています。
WooCommerce モジュールを基本レイアウトに追加したり、基本レイアウトから削除したりできます。 WooCommerce モジュールには、モジュール > テーマ モジュール > WooCommerce からアクセスできます。 製品の評価、説明、アップセル、その他多くの機能の他に、多くのオプションがあります。
レイアウトの編集中に、Beaver Builder の [Preview As:] 機能を使用して、別の製品の表示に切り替えることができます。
その機能を使用すると、各製品を表示したときにどのように見えるかを確認できます。 含まれているデザインとモジュールに満足したら、製品ページを公開します。 単一の商品ページが新しいフォーマットでスタイル設定されます。
ステップ 3: WooCommerce ショップページを作成する
ショップページを WooCommerce 製品と同じ扱いにする時が来ました。 デフォルトの WooCommerce ショップのレイアウトは非常にシンプルで、あまりエキサイティングではありません。
ショップページをデザインするときは、Beaver Themer の方が適しています。 まず、WooCommerce > 設定に移動し、製品タブをクリックして、ショップ ページがショップまたは作成したその他のカスタム ページを指していることを確認します。 商品を指定すると、商品がアーカイブ ページとして表示されます。
Beaver Builder で [Themer Layouts] > [Add New] > [Theme Builder] を選択し、[Add New] をクリックします。 次の画面の [タイプ] で [テーマ レイアウト] オプションを選択します。
次の画面では、製品アーカイブの場所を選択できます。 ストアの商品は、ショップ ページと商品カテゴリ ページに表示されます。 必要に応じて、変更できます。
Launch Beaver Builder をクリックすると、レイアウトをカスタマイズできます。 画面上部のプラス記号をクリックし、[テンプレート] をクリックすると、次のページが表示されます。
Products テンプレートを使用して、新しいショップ ページを簡単に作成できます。 これまで説明してきたすべてのツールを使用して、作成したテンプレートに変更を加えることができます。
ショップのレイアウトが投稿モジュールのスタイル設定に合うように調整してください。
変更がモジュールに保存されたら、画面の上部で [完了] > [発行] をクリックします。
最後に、Shop ページとして指定したページがサイトのナビゲーション メニューに表示されるようにする必要があります。 それ以外の場合は、WordPress ダッシュボードの [外観] > [メニュー] セクションから追加できます。
ステップ 4: WooCommerce Layouts を使用してショップページをさらにカスタマイズする
WooCommerce モジュールも Beaver Builder の優れた機能であり、優れた WooCommerce ページ ビルダーになります。 WooCommerce 機能の一部をサイトの任意の Beaver Builder 構造に追加できます。 このモジュールでは、次のオプションを使用できます。
- 単一および複数の製品:
- 製品 ID やカテゴリに基づいて選択した製品を表示したり、セール中の製品、最近の製品、最高評価の製品など、必要なものを表示したりできます。
- カート: WooCommerce ショッピング カートの内容を表示します。
- チェックアウト: チェックアウト ページを通常どおりに表示します。
- 注文追跡: このフォームに注文に関する情報を入力します。
- マイ アカウント: このページには、通常、アカウント情報、過去の注文、住所の詳細など、マイ アカウント ページに表示される情報が含まれています。
Links
まとめ
ブランドを効果的に表現するオンライン ショップを作成することは、困難な作業です。 ただし、WooCommerce のプラグインである Beaver Builder の助けを借りて、プロセスを簡単にすることができます。
ご覧のとおり、WooCommerce と Beaver Builder の両方を使用してストアフロントを構築するための XNUMX つの重要な手順を概説しました。
- 商品を追加してストアを作成します。
- 新しい商品ページをデザインします。
- 新しい WooCommerce ショップ ページを作成します。
- WooCommerce レイアウトを使用すると、e コマース サイトをさらにカスタマイズできます。
Beaver Builder を使用して商品ページやショップ ページを作成する方法について、何か知りたいことはありますか? 以下のコメント欄であなたの考えを共有してください！
