要約：カスタムWordPressチェックアウトページの作成方法
デフォルトのWooCommerceチェックアウトは販売機会を損失させます。ここでは、約15分で高コンバージョンなカスタムページに置き換える方法を説明します。
- SeedProd Proをインストール – プラグインを有効化し、ライセンスキーを入力します。
- 新しいページを作成 – テンプレートを選択し、チェックアウトページに名前を付けます。
- チェックアウトコンテンツを追加 – WooCommerceチェックアウトブロック、ヘッダー、人気商品、お客様の声などをドラッグ＆ドロップします。
- ページを公開 – モバイルでプレビューし、公開ボタンを押します。
- WooCommerceに割り当て – WooCommerce → 設定 → 詳細設定 でチェックアウトページとして設定します。
チェックアウトページが遅い、分かりにくい、または適切な支払いオプションがないために販売機会を逃したことがあるなら、それがどれほどイライラするかご存知でしょう。WordPressのカスタムチェックアウトページはそれを解決し、買い物客にスムーズで信頼性の高い支払い方法を提供します。
調査によると、買い物客の70〜85％が支払い前にカートを放棄しています。ここでは、コードに触れることなく、約15分で買い物客を離脱させないページを作成する方法を説明します。
ここでは、WooCommerceとシームレスに連携するドラッグ＆ドロップビルダーであるSeedProdを使用して、今日から高コンバージョンなチェックアウトページを立ち上げることができます。
カスタムWordPressチェックアウトページを作成するための簡単な手順：
WordPressでチェックアウトページを作成する方法（ノーコード）
このチュートリアルでは、WordPressチェックアウトページを作成するためにSeedProdを使用します。SeedProdは、100万以上のウェブサイトで使用されている最高のドラッグ＆ドロップWordPressページビルダーです。
SeedProdを使用すると、一行のコードを書かずに、あらゆるWordPressランディングページを簡単に作成できます。また、強力なWooCommerce連携により、カスタムチェックアウトページやその他のWooCommerceページを作成し、WooCommerceストアにリンクすることができます。
これは、デフォルトのWooCommerceのワンページチェックアウトを使用する代わりに、コンバージョンに最適化された完全にカスタマイズされたページを作成できることを意味します。そして、公開する前に、リードを獲得するためにWooCommerceの近日公開ページを作成できます。
したがって、初心者向けのWordPressでチェックアウトページを作成したい場合は、SeedProdで次のように行うことができます。
ビデオチュートリアル
注意： WooCommerce 8.3以降では、デフォルトでブロックベースのチェックアウトが使用されます。SeedProdはそれをカスタムページで完全に置き換えます。このチュートリアルではその方法を説明します。WooCommerceの管理画面がここのスクリーンショットと異なる場合は、その理由がこれです。
ステップ1: SeedProdのインストールと有効化
最初のステップは、SeedProdプラグインをインストールして有効化することです。
注意： SeedProdの無料版も利用可能ですが、高度なWooCommerceブロックを使用するためにSeedProd Proを使用します。
このステップでヘルプが必要な場合は、WordPressプラグインのインストールに関するこのステップバイステップガイドに従ってください。
SeedProdを有効化した後、SeedProd » 設定に移動し、ライセンスキーを入力します。
この情報は、SeedProdウェブサイトの「ダウンロード」セクションで簡単に見つけることができます。
ステップ2：新しいページを作成する
ライセンスキーを有効にした後、WordPressダッシュボードからSeedProd » Pagesに移動します。このページには、SeedProdのさまざまなページモードの概要と、新しいランディングページを追加する領域が表示されます。
ページモードを使用すると、すぐに次のことができます。
- 「近日公開ページ」を作成してアクティブ化する
- メンテナンスモードをアクティブ化する
- カスタム404ページを作成する
- カスタムWordPressログインページを設定する
- スタンドアロンWordPressランディングページを作成する
このことの素晴らしい点は、複数のWordPressプラグインをインストールせずに、サイトに余分な機能を追加できることです。
このガイドでは、スタンドアロンのWordPressチェックアウトページを作成します。これを行うには、Add New Landing Pageボタンをクリックします。
次の画面で、何百ものレスポンシブなランディングページテンプレートから選択できます。
上部のタブプレースホルダーをクリックして、デザインをフィルタリングできます。
- すべて
- 近日公開
- メンテナンスモード
- 404ページ
- セールス
- ウェビナー
- リード獲得
- ウェビナー
- ログイン
最善のアプローチは、希望するデザインに最も近いテンプレートを探すことです。完璧に一致しない場合でも、PHP、CSS、またはショートコードなしで次のステップで簡単にカスタマイズできます。
このチュートリアルでは、開発者を雇わずにWordPressチェックアウトページを簡単に作成する方法を示すために、Blankテンプレートを使用します。
テンプレートを選択するには、サムネイルの上にマウスをホバーし、オレンジ色のチェックマークアイコンをクリックします。
その後、ポップアップが表示され、ページの名前とURLを入力するように求められます。
次に、Save and Start Editing the Pageボタンをクリックして進めることができます。
ステップ3：チェックアウトページにコンテンツを追加する
テンプレートをインポートすると、SeedProdのビジュアルページビルダーで開き、以下の例と同様の外観になります。ここでWordPressチェックアウトページを作成し、コンバージョンを最適化できます。
GTmetrixのテストでは、SeedProdで構築されたページは556ミリ秒で読み込まれましたが、Elementorで構築された同じページは1,882ミリ秒でした。より高速なチェックアウトページは、支払い前の離脱が少なくなることを意味します。
右側にはページのライブプレビューが表示され、左側にはオプションパネルがあり、さまざまなブロックやセクションを選択してデザインをカスタマイズできます。
チェックアウトページヘッダー
まず、チェックアウトページにヘッダーを追加して、ウェブサイト全体でブランディングの一貫性を保げるようにします。
これを行うには、左側のパネルでSectionsタブをクリックし、Headerカテゴリをクリックします。そこから、ヘッダーセクションの上にマウスをホバーし、プラスアイコンをクリックしてページに追加します。
次に、新しいヘッダーセクションの画像領域をクリックします。ここで、コンピューターまたはWordPressメディアライブラリから画像をアップロードして、サイトのロゴとして使用できます。
また、チェックアウトページからナビゲーションメニューを削除することをお勧めします。これにより、ページを離れる人の数が減り、ユーザーがチェックアウトプロセスを完了するように促されます。
ナビゲーションメニューを削除するには、ナビゲーションブロックの上にマウスをホバーし、ゴミ箱アイコンをクリックするだけです。
次に、行動喚起ボタン（CTA）をカスタマイズしましょう。ユーザーをページから離脱させる代わりに、このボタンを使用してショッピングカートの内容をユーザーにリマインドさせることができます。
したがって、CTAボタンをクリックして左側の設定を開き、デフォルトのテキストを置き換えます。この場合、「カートを見る」に変更しました。
次に、リンクフィールドにWooCommerceカートページのURLを追加できます。必要に応じて、チェックボックスを選択してリンクをノーフォローにしたり、新しいタブで開いたりできます。
WooCommerceチェックアウトブロック
サイトのブランディングが完了したら、フォームフィールドを使用してチェックアウト機能をページに追加しましょう。まず、新しいカラムブロックをページにドラッグします。
次に、好みのレイアウトを選択してください。
次に、左側のパネルを下にスクロールしてWooCommerceエリアに移動します。ここには最適なWooCommerceブロックがあります。そこから、チェックアウトブロックを選択してページにドラッグします。
チェックアウトブロック内のどこかをクリックして、以下を含む設定をカスタマイズします。
- 1列または2列のチェックアウトレイアウト
- チェックアウトヘッダーのフォントと色
- カスタムフィールドのスタイリング
- ボタンのスタイル
- アラートのハイライトカラー
- カートの境界線、背景、スタイリング
- 支払いセクションのカスタマイズ
チェックアウトフィールドエディタの設定を保存するには、必ず保存をクリックしてください。
WooCommerce人気商品
売上を向上させたい場合は、WordPressのチェックアウトページに人気商品を追加できます。これにより、購入者は支払い前にカートにさらに商品を追加するよう促される可能性があります。
人気商品を追加するには、WooCommerceセクションからベストセラー商品ブロックを選択してページにドラッグします。
そこから、列数を編集したり、ページネーションを追加したり、ドロップダウンメニューから他の設定を調整したりできます。
この時点で、見出しブロックをドラッグして「人気商品」のようなものに変更すると良いでしょう。そうすれば、人々は何を見ているのか正確にわかります。
レビューとお客様の声
社会的証明、レビュー、お客様の声に関しては、これらすべてが購入者がWooCommerce製品を購入する可能性を高めます。その理由は、他の人々があなたの製品を信頼しており、正しい決断をしていることを人々に安心させるからです。
では、チェックアウトページにレビュー、お客様の声、星評価を含めてみませんか？
SeedProdを使用すると、これを簡単に行うことができます。高度なブロックに移動し、お客様の声ブロックをチェックアウトページにドラッグします。
設定では、ブロックを完全にカスタマイズできます。たとえば、お客様の声の写真や役職を追加したり、複数のお客様の声をスクロール可能なカルーセルにすることもできます。
さらに、お客様の声の下に星評価ブロックを使用して、さらに多くの社会的証明を追加できます。
ステップ4：WordPressチェックアウトページを公開する
ページに満足したら、モバイルでの表示を確認しましょう。結局のところ、今日では多くの人がモバイルデバイスから買い物をしているため、すべてがモバイルユーザーに最適化されていることを確認することは、売上を伸ばすために不可欠です。
幸いなことに、SeedProdにはWordPressのチェックアウトをモバイルで簡単にプレビューできる機能があります。下部のナビゲーションバーにあるモバイルアイコンをクリックするだけです。
すると、ページがモバイルユーザーと同じように設定されていることがわかります。そこから、ユーザーエクスペリエンスを向上させるために調整を加えることができます。
すべてがうまくいったと思ったら、緑色の「保存」ボタンの横にあるドロップダウン矢印をクリックし、「公開」をクリックしてチェックアウトページを公開します。
デフォルトのWooCommerceチェックアウトページの代わりに、ターゲットオーディエンスに合わせて調整された、コンバージョン率の高いWordPressチェックアウトページが用意されました。
ステップ5：チェックアウトページをWooCommerceに割り当てる
このガイドの最後のステップは、新しいWordPressチェックアウトページをWooCommerceに割り当てることです。これには、デフォルトのWooCommerce設定を変更し、新しいページのURLを追加することが含まれます。
URLを変更すると、顧客はデフォルトのオプションではなく、新しいWordPressチェックアウトページに自動的に移動するようになります。
この設定を行うには、「WooCommerce」→「設定」に移動し、「詳細設定」タブをクリックします。次に、「チェックアウトページ」の見出しの横にあるドロップダウンリストで、作成したページを検索します。
ドロップダウンリストで見つけたら、クリックして公式のチェックアウトページとして割り当てます。設定を保存するために、画面下部にある「変更を保存」をクリックすることを忘れないでください。
これで、訪問者が「チェックアウトに進む」をクリックすると、作成したばかりの新しいコンバージョン率の高いチェックアウト画面に移動します。
公開する前に、WooCommerceの組み込みテストモードを使用してチェックアウトをテストしてください。「WooCommerce」→「設定」→「支払い」で、テストゲートウェイを有効にし、テスト注文を行ってすべてが機能することを確認してください。
支払い方法がページに表示されない場合は、まずここで確認してください。SeedProdは、Stripe、PayPal、その他の有効にしたものを含む、有効にしたゲートウェイをすべて表示します。
WordPressでチェックアウトページを作成することに関するFAQ
WooCommerceのチェックアウトページをカスタマイズするにはコーディングスキルが必要ですか？
いいえ。SeedProdのドラッグアンドドロップビルダーを使用すると、コードに触れることなくWooCommerceのチェックアウトページをカスタマイズできます。レイアウトを変更したり、信頼性の高いシグナルを追加したり、フォームフィールドを視覚的なコントロールを使用して調整したりできます。PHPやCSSは不要です。
カスタムチェックアウトページにさらに多くの支払いゲートウェイを追加できますか？
はい。WooCommerceは、Stripe、PayPal、Apple Pay、Buy Now Pay Laterオプションを含む複数の支払いゲートウェイをサポートしています。「WooCommerce」→「設定」→「支払い」で有効にすると、SeedProdがカスタムチェックアウトページに自動的に表示します。
チェックアウトページのコンバージョン率を向上させるにはどうすればよいですか？
フォームをシンプルに保ち、複数の支払いオプションを提供し、セキュリティバッジや顧客の証言を追加します。ナビゲーションメニューを削除すると、買い物客がチェックアウト途中で離脱するのを防ぐことができます。SeedProdのビジュアルビルダーを使用すると、これらの調整をすべてコードなしで行うことができます。
公開前にWooCommerceのチェックアウトをテストするにはどうすればよいですか？
WooCommerce → 設定 → 支払い でテストゲートウェイを有効にします。Stripe と PayPal はどちらもサンドボックスモードを提供しています。本番稼働前に、チェックアウトページが正しく読み込まれ、支払いが処理され、注文確認メールが送信されることを確認するために、テスト注文を行ってください。
WordPressでカスタムチェックアウトを構築する
WordPressでカスタムチェックアウトページを作成することは、デザイン以上のものです。購入プロセスを明確、迅速、そしてストアに合わせて調整することで、より多くの買い物客が注文を完了できるようになります。
SeedProdとそのWooCommerce連携機能を使用すると、ブランドに合わせたチェックアウトページをデザインし、気を散らす要素を排除し、コードを書かずに信頼を築き、売上を伸ばす機能を追加できます。
今日からカスタムページを設定して、より多くの訪問者を有料顧客に変えましょう。
さらに多くのWooCommerceのヒントをお探しなら、これらの投稿をご覧ください。
- WooCommerceショップページのメンテナンスモードを有効にする方法
- WooCommerceストアを高速化する方法（簡単な7つのステップ）
- あなたのストアのためにWooCommerceコンバージョンをトラッキングする方法
また、ビジネスを成長させるための役立つコンテンツについては、Twitter、YouTube、Facebookでフォローしてください。
