要約：WordPressのカスタムチェックアウトページを作成する方法
WooCommerceのデフォルトのチェックアウト画面では、売上を逃してしまいます。ここでは、約15分でコンバージョン率の高いカスタムページに置き換える方法をご紹介します。
- SeedProd Pro をインストールする– プラグインを有効化し、ライセンスキーを入力してください。
- 新しいページを作成する– テンプレートを選択し、チェックアウトページに名前を付けます。
- チェックアウトコンテンツを追加する– WooCommerceチェックアウトブロックに加え、ヘッダー、人気商品、およびお客様の声をドラッグして配置します。
- ページを公開する– モバイルでプレビューを確認してから、「公開」をクリックしてください。
- WooCommerceに割り当てる– WooCommerceの「設定」→「詳細設定」で、これをチェックアウトページとして設定します。
チェックアウトページが遅かったり、わかりにくかったり、正しい支払いオプションがなかったりしたために売上を失ったことがある人なら、それがどれほど悔しいことかわかるでしょう。WordPressのカスタムチェックアウトページはそれを解決し、買い物客にスムーズで信頼できる支払い方法を提供します。
調査によると、購入者の70～85％が決済前にカートを放棄していることがわかっています。ここでは、コードを一切触ることなく、約15分で、顧客を次のステップへと誘導するページの作り方を解説します。
WooCommerceとシームレスに連動するドラッグ＆ドロップビルダー、SeedProdを使えば、コンバージョンの高いチェックアウトページを今すぐ立ち上げることができます。
WordPressのカスタムチェックアウトページを作成する簡単な手順：
WordPressでチェックアウトページを作成する方法（コードなし）
このチュートリアルでは、SeedProdを使ってWordPressのチェックアウトページを作成します。SeedProdは、100万以上のウェブサイトで使用されている最高のドラッグ＆ドロップWordPressページビルダーです。
SeedProdを使えば、コードを一行も書くことなく、WordPressのランディングページを簡単に作成することができます。また、強力なWooCommerceとの統合により、カスタムチェックアウトページやその他のWooCommerceページを作成し、WooCommerceストアにリンクさせることができます。
つまり、デフォルトのWooCommerceの1ページチェックアウトを使用する代わりに、コンバージョンのために最適化された完全にカスタマイズされたページを作成することができます。また、立ち上げる前に、WooCommerceのcoming soonページを作成し、リードを生成することができます。
そこで、WordPressでチェックアウトページを作りたい初心者のために、SeedProdを使った方法をご紹介します。
ビデオ・チュートリアル
注：WooCommerce 8.3 以降では、デフォルトでブロックベースのチェックアウトが採用されています。SeedProd はこの機能を完全にカスタムページに置き換えます。本チュートリアルでは、その手順について解説します。WooCommerce の管理画面がこちらのスクリーンショットと異なって見える場合は、これがその理由です。
ステップ1：SeedProdのインストールと有効化
最初のステップは、SeedProdプラグインをインストールして有効化することです。
注： SeedProdには無料版があります。しかし、高度なWooCommerceブロックにはSeedProd Proを使用します。
このステップで助けが必要な場合は、WordPressプラグインをインストールするためのステップバイステップガイドに従ってください。
SeedProdをアクティベートした後、SeedProd " Settingsに進み、ライセンスキーを入力します。
この情報は、SeedProdウェブサイトのお客様のアカウントのダウンロードセクションで簡単に見つけることができます。
ステップ2：新規ページの作成
ライセンスキーを有効化した後、WordPressのダッシュボードからSeedProd " Pagesに移動します。このページでは、SeedProdのさまざまなページモードの概要と、新しいランディングページを追加するエリアが表示されます。
ページモードを使えば、即座に対応できる：
- 近日公開ページの作成と有効化
- メンテナンス・モードの起動
- カスタム404ページを作る
- カスタムWordPressログインページの設定
- WordPressで独立したランディングページを作成する
この優れた点は、複数のWordPressプラグインをインストールすることなく、サイトに追加機能を提供できることだ。
このガイドでは、スタンドアロンのWordPressチェックアウトページを作成したいと思います。そのためには、新しいランディングページを追加ボタンをクリックします。
次の画面では、何百ものレスポンシブなランディングページのテンプレートから選ぶことができます。
上部にあるタブのプレースホルダーをクリックすると、デザインを絞り込むことができます：
- すべて
- 近日公開
- メンテナンス・モード
- 404ページ
- 売上高
- ウェビナー
- リード・スクイーズ
- ウェビナー
- ログイン
最善の方法は、あなたが望むデザインに近いテンプレートを探すことです。完璧にフィットしなくても、次のステップでPHPやCSS、ショートコードなしで簡単にカスタマイズできる。
このチュートリアルでは、Blankテンプレートを使って、開発者を雇うことなくWordPressのチェックアウトページをいかに簡単に作成できるかを紹介します。
テンプレートを選択するには、サムネイルにマウスカーソルを合わせ、オレンジ色のチェックマークアイコンをクリックします。
その後、ページの名前とURLを入力するポップアップが表示されます。
次に、「保存してページの編集を開始する」ボタンをクリックします。
ステップ3：チェックアウトページにコンテンツを追加する
テンプレートをインポートすると、SeedProdのビジュアルページビルダーが開き、以下の例のように表示されます。ここでWordPressのチェックアウトページを作成し、コンバージョンのために最適化することができます。
GTmetrixでのテストによると、SeedProdで作成したページの読み込み時間は556ミリ秒でしたが、Elementorで作成した同じページでは1,882ミリ秒でした。チェックアウトページの読み込みが速ければ、支払い前の離脱率が低下します。
右側にページのライブプレビューが表示されます。左側にはオプションパネルがあり、様々なブロックやセクションを選択したり、デザインをカスタマイズすることができます。
チェックアウトページのヘッダー
まず、チェックアウトページにヘッダーを追加し、ウェブサイト全体でブランディングの一貫性を保てるようにします。
これを行うには、左側のパネルのセクションタブをクリックし、ヘッダーカテゴリーをクリックします。そこから任意のヘッダーセクションにマウスカーソルを合わせ、プラスアイコンをクリックしてページに追加します。
次に、新しいヘッダーセクションの画像エリアをクリックします。ここで、あなたのコンピューターまたはWordPressのメディアライブラリから、サイトのロゴとして使用する画像をアップロードすることができます。
また、チェックアウトページからナビゲーションメニューを削除することをお勧めします。こうすることで、ページから離脱する人の数を減らし、ユーザーにチェックアウトプロセスを完了するよう促すことができます。
ナビゲーションメニューを削除するには、ナビゲーションブロックにマウスカーソルを合わせ、ゴミ箱アイコンをクリックします。
それでは、コールトゥアクションボタン（CTA）をカスタマイズしてみましょう。ユーザーをページから離す代わりに、このボタンを使ってショッピングカートの中身についてユーザーに思い出させることができます。
そこで、CTAボタンをクリックして左側の設定を開き、デフォルトのテキストを置き換えます。私たちの場合は、「カートを見る」に変更しました。
次に、リンクフィールドにWooCommerceカートページのURLを追加します。チェックボックスを選択することで、リンクをnofollowにしたり、新しいタブで開いたりすることができます。
WooCommerceチェックアウト・ブロック
サイトのブランディングが整ったところで、フォームフィールドを使ったチェックアウト機能をページに追加していきましょう。まず、新しいカラムブロックをページにドラッグします。
次に、お好みのレイアウトを選んでください。
次に、左側のパネルをWooCommerceエリアまでスクロールしてください。そこからチェックアウトブロックを選択し、ページにドラッグします。
チェックアウトブロックのどこかをクリックすると、以下のような設定をカスタマイズできます：
- 1列または2列のチェックアウト・レイアウト
- チェックアウトのヘッダーのフォントと色
- カスタムフィールドのスタイリング
- ボタンスタイル
- アラートハイライトカラー
- カートのボーダー、背景、スタイリング
- 支払いセクションのカスタマイズ
チェックアウトフィールドエディタの設定を保存するには、忘れずに「保存」をクリックしてください。
WooCommerce 人気商品
売上を向上させたいのであれば、次にWordPressのチェックアウトページに人気商品を追加することができます。これにより、買い物客が支払いを済ませる前に、より多くの商品をカートに入れるよう促すことができる。
人気商品を追加するには、WooCommerceセクションからベストセラー商品ブロックを選択し、ページにドラッグします。
そこから、列数を編集したり、ページネーションを追加したり、ドロップダウンメニューから他の設定を調整することができます。
この時点で、ヘッドライン・ブロックをドラッグして「人気商品」などに変更するのがよいでしょう。そうすれば、人々は自分が何を見ているのかを正確に知ることができます。
レビューとお客様の声
ソーシャルプルーフ、レビュー、テスティモニアル、これらはすべて、買い物客がWooCommerceの商品を購入する可能性を高めるものです。その理由は、他の人々があなたの商品を信頼し、正しい判断をしているという安心感を与えるからです。
そこで、チェックアウトページにレビューや体験談、星評価を掲載してみてはどうだろうか。
SeedProdを使えば簡単にできます。詳細ブロックに移動し、お客様の声ブロックをチェックアウトページにドラッグするだけです。
設定では、ブロックを完全にカスタマイズすることができます。例えば、テスティモニアルの写真や職種名を追加したり、複数のテスティモニアルをスクロールするカルーセルにすることもできます。
さらに、証言の下にある星評価ブロックを使用することで、さらに社会的証明を追加することができます。
ステップ4：WordPressのチェックアウトページを公開する
ページに満足したら、モバイルでどのように見えるか見てみましょう。今や多くの人がモバイルデバイスから買い物をする時代ですから、すべてがモバイルユーザーに最適化されていることを確認することは、売上を伸ばすために非常に重要です。
幸いなことに、SeedProdにはWordPressチェックアウトをモバイルで簡単にプレビューできる機能があります。下のナビゲーションバーにあるモバイルアイコンをクリックするだけです。
そうすれば、モバイルユーザーと同じようにページの設定を見ることができます。そこから、ユーザーエクスペリエンスを向上させるための調整を行うことができます。
すべての表示に満足したら、緑色の保存ボタンの隣にあるドロップダウン矢印をクリックし、公開をクリックしてチェックアウトページを公開します。
WooCommerceのデフォルトのチェックアウトページの代わりに、コンバージョン率の高いWordPressのチェックアウトページをご利用いただけます。
ステップ 5: WooCommerceにチェックアウトページを割り当てる
このガイドの最後のステップは、新しいWordPressチェックアウトページをWooCommerceに割り当てることです。これにはデフォルトのWooCommerce設定を変更し、新しいページのURLを追加します。
URLを変更することで、顧客はデフォルトのオプションではなく、新しいWordPressのチェックアウトページに自動的に移動します。
この設定を行うには、WooCommerce " Settingsに行き、Advancedタブをクリックします。次に、チェックアウトページの見出しの横にある、今作成したページを検索します。
ドロップダウンリストで見つけたら、それをクリックして公式チェックアウトページとして割り当てます。画面下部の「変更を保存」をクリックして、設定を保存してください。
これで、訪問者が'チェックアウトに進む'をクリックすると、今作ったばかりのコンバージョン率の高いチェックアウト画面に移動します。
公開する前に、WooCommerceに組み込まれているテストモードを使用して、チェックアウト機能をテストしてください。「WooCommerce」→「設定」→「支払い」でテスト用ゲートウェイを有効にし、テスト注文を行って、すべてが正常に動作することを確認してください。
ページに支払い方法が表示されていない場合は、まずそこを確認してください。SeedProdでは、StripeやPayPalをはじめ、有効にしているすべての決済ゲートウェイがそこに表示されます。
WordPressでのチェックアウトページ作成に関するFAQ
WooCommerceのチェックアウトページをカスタマイズするのにコーディングスキルは必要ですか？
いいえ。SeedProdのドラッグ＆ドロップビルダーを使えば、コードを一切触ることなくWooCommerceのチェックアウトページをカスタマイズできます。ビジュアルコントロールを使って、レイアウトの変更、信頼性を高める要素の追加、フォームフィールドの調整などが可能です。PHPやCSSの知識は不要です。
カスタムチェックアウトページに追加の支払いゲートウェイを追加できますか？
はい。WooCommerceは、Stripe、PayPal、Apple Pay、および「後払い」オプションを含む、複数の決済ゲートウェイに対応しています。WooCommerce → 設定 → 決済でこれらを有効にすると、SeedProdが自動的にカスタムチェックアウトページに表示します。
チェックアウトページのコンバージョン率を向上させるには？
フォームはシンプルに保ち、複数の支払い方法を用意し、セキュリティ認証マークや顧客の口コミを掲載しましょう。ナビゲーションメニューを非表示にすることで、購入者が決済途中で離脱するのを防げます。SeedProdのビジュアルビルダーを使えば、コードを一切書かずにこれらすべての調整を行うことができます。
公開前にWooCommerceのチェックアウトをテストするにはどうすればよいですか？
WooCommerce の「設定」→「支払い」でテスト用ゲートウェイを有効にしてください。Stripe と PayPal はどちらもサンドボックスモードを提供しています。本番運用を開始する前に、テスト注文を行って、チェックアウトページが正しく読み込まれ、支払いが処理され、注文確認メールが送信されることを確認してください。
WordPressでカスタムチェックアウトを構築する
WordPressでカスタムチェックアウトページを作成することは、デザイン以上の意味があります。より多くの買い物客が注文を完了できるように、購入プロセスを明確かつ迅速にし、あなたのストアに合わせたものにします。
SeedProdとWooCommerceの統合により、コードを書くことなく、あなたのブランドに合ったチェックアウトページをデザインし、邪魔なものを取り除き、信頼を築き売上を増やす機能を追加することができます。
今すぐカスタムページを設定して、より多くの訪問者を有料顧客に変えましょう。
WooCommerceのヒントをお探しなら、以下の記事をご覧ください：
- WooCommerceショップページのメンテナンスモードを有効にする方法
- WooCommerceストアを高速化する方法（簡単な7つのステップ）
- WooCommerceのコンバージョントラッキングの設定方法
Twitter、YouTube、Facebookで、あなたのビジネスに役立つコンテンツを随時更新しています。
