Divi で WooCommerce チェックアウト ページを設定する方法

オンライン ショッピングの過程で最も重要な段階は、購入の完了です。 ユーザーがオンライン ストアをどれだけ長く閲覧しても、販売につながらなければ意味がありません。

顧客にとってチェックアウトプロセスを可能な限りシームレスにすることが重要です。 では、WooCommerce ストアで使いやすいチェックアウト ページを作成するにはどうすればよいでしょうか? この投稿では、Divi を使用してカスタマイズされた WooCommerce チェックアウト ページを設定する方法を見ていきます。

カスタマイズされた WooCommerce チェックアウト ページが必要なのはなぜですか?

顧客は、面倒なチェックアウト プロセスに対処する必要はありません。 真実は、あなたのチェックアウトページとプロセスがストレスの多いものであれば、あなたの顧客はぶらぶらしないということです. 現在、e コマース サイトで放棄されたカートが発生している場合は、チェックアウト ページをオーバーホールすることをお勧めします。

ショッピング体験の開始から最終段階まで、顧客に「すごい」効果を与える必要があります。 従来の WooCommerce チェックアウト ページを選択した場合、この効果は得られません。

顧客にスムーズなショッピング体験を提供するには、独自のシームレスで使いやすいチェックアウト プロセスを作成する必要があります。 カスタマイズされたチェックアウト ページを作成する利点には、次のようなものがあります。

• カート放棄の減少

販売機会の損失は、多くの場合、カートの放棄によって引き起こされます。 顧客がすでに商品をカートに入れているものの、途中で購入を完了せずにサイトを離れてしまう状況です。 複雑なチェックアウト ページは、カートの放棄につながることがよくあります。

顧客が長いプロセスを経なければならない場合、またはプロセスが安全ではないと感じる場合、トランザクションを完了することに興味を失う可能性があります。 カスタマイズされたチェックアウト ページを使用すると、顧客がプロセスをより簡単かつ安全に行えるようになる可能性が高くなります。

• 迅速で簡単な取引

販売目標到達プロセスは、できるだけ短く、迅速に完了する必要があります。 WooCommerce チェックアウト ページを設定してカスタマイズすると、不要な負担を簡単に取り除き、トランザクション プロセスの重要な詳細のみに集中できます。

複数のページに記入するチェックアウト プロセスがあると、顧客は飽きてサイトを離れる可能性があります。 ただし、プロセス全体が合理化されると、顧客が購入ジャーニーをより迅速かつ簡単に完了できるように支援できます。

カスタム WooCommerce チェックアウト ページの設定方法

WooCommerce ページには、デフォルトのチェックアウト ページが付属しています。 これは、サードパーティのプラグインまたはショートコードで編集できます。 新規ユーザーの場合、これらのオプションを使用してチェックアウト ページを編集するのが難しい場合があります。 ここで、Divi Builder のようなプラグインを使用します。

Divi Builder には、カスタマイズされたチェックアウト ページを備えた魅力的なオンライン ストアを構築できる Divi Shop モジュールがあります。 このセクションでは、カスタム WooCommerce チェックアウト ページを設定するためのステップバイステップ ガイドを見ていきます。

その前に、SSL 証明書、データ保護、およびサイトのセキュリティの重要性を理解することが重要です。 プラットフォームに保存されているデータを暗号化するための追加のセキュリティ層には、SSL 証明書が必要です。

SSL 証明書は、サイトが安全にクレジット カードの詳細を提供できることを顧客に示します。 この部分をクリアしたので、カスタム WooCommerce チェックアウト ページの作成について詳しく見ていきましょう。

ステップ 1: Divi Builder プラグインを使用する前に、WooCommerce プラグイン設定でチェックアウト ページを設定します。 これを行うには、WooCommerce ダッシュボードに移動し、[設定] をクリックします。

次に、「詳細」タブをクリックして、チェックアウトページを見つけます。 ドロップダウンメニューから「チェックアウト」オプションを選択し、ページの最後までスクロールして「保存」ボタンをクリックして変更を保存します。

ステップ 2: チェックアウト ページが既に設定されているので、次のステップは Divi Shop Builder プラグインをインストールすることです。 それで、エレガントなテーマの公式ウェブサイトに移動して、Divi Shop Builder プラグインを購入します。 「マイアカウントページ」からダウンロードリンクをクリックしてダウンロードしてください。

ダウンロード後、プラグインをインストールして有効化します。 インストールが完了すると、プラグインがDiviメニューに表示されます。 続行する前に、購入のためにプラグインを認証していることを確認してください。

これを行うには、エレガント テーマ Web サイトの「マイ アカウント ページ」に移動して、ライセンス キーをコピーします。 プラグインを認証したら、使用を開始できます。 Divi Shop Builder は Divi Builder プラグインで動作し、WooCommerce ストアの構築を非常にシームレスなタスクにします.

ステップ 3: 次のステップは、カスタム WooCommerce チェックアウト ページを作成することです。 これを行うには、クリックしてチェックアウト ページを開き、購入した Divi Builder を有効にします。 次に、Divi Builder プラグインを開き、モジュールの追加を開始します。

Divi Builder に 5 つの新しいモジュール (Checkout Billing、Checkout Coupon、Checkout Order、Checkout Shipping、および Cart/Checkout Notices) が追加されています。 これらのモジュールは、WooCommerce ストアでカスタム チェックアウト ページを設定するのに役立ちます。 これらのモジュールがどのように機能するかを次に示します。

チェックアウト請求: これにより、顧客が請求の詳細を入力できるすべてのフォーム入力フィールドをカスタマイズできます。 必要に応じてフィールド ラベルを編集できます。

Checkout Shipping: これにより、顧客は 2 番目の住所を指定できます。 Checkout 請求と同様に、必要に応じてフォーム フィールドを編集することもできます。

チェックアウト クーポン: これにより、顧客は割り当てられた固有のプロモーション コードを入力して、特別割引を請求できます。 Checkout Coupon モジュールを他のモジュールとは別に配置して、それらを機能させる必要があります。 スペースに制約がある場合は、行とセクションの間のパディングを減らしてより多くのスペースを作成します。

チェックアウト注文: これは、支払いオプションに進む前に、顧客が注文を確立して確認する場所です。 ドラッグ＆ドロップ機能を使用して、この部分を適切に編集することもできます。

チェックアウト通知: 他のチェックアウト ページにメモを追加する場合は、このモジュールを使用できます。 必要に応じて、デザインを精巧にすることもシンプルにすることもできます。

Checkout モジュールを使用する場合、それらが他のフォーム モジュールと同じセクションにないことを確認する必要があります。 一緒に置くと機能しません。 お問い合わせフォーム モジュール、オプトイン フォーム モジュール、コメント モジュール、およびログイン モジュールは、チェックアウト ページを作成する際に別々のセクションに配置して、適切に機能させる必要があります。

Divi テーマ内の他のモジュールと同様に、Divi Builder を使用してチェックアウト モジュールのスタイルをカスタマイズできます。 これを行うには、次の手順に従います。

• クリックしてチェックアウト モジュールを開きます

• [デザイン] タブをクリックします。

• さまざまな要素を使用して、デザインとブランド アイデンティティに一致する方法でページのスタイルを設定します

• [詳細設定] タブからカスタマイズを追加することもできます。 [詳細設定] タブから、デバイスのスクロール効果、トランジション、配置、および表示設定を設定できます。 高度な CSS スクリプト用にカスタム ID とクラスを追加することもできます。

結論

Divi は、WooCommerce チェックアウト ページの設定からストレスを取り除きます。 現在のチェックアウト ページを編集したり、カスタマイズしたカート ページを作成したりできます。 divi プラグインには、ストアを想像できる限り顧客に招待するための多数の機能が付属しています。 また、ショッピングとチェックアウトのプロセスが非常にシームレスになります。