WordPressでチェックアウトページを作成する方法（エキスパートガイド） 

チェックアウトページが遅かったり、わかりにくかったり、正しい支払いオプションがなかったりしたために売上を失ったことがある人なら、それがどれほど悔しいことかわかるでしょう。WordPressのカスタムチェックアウトページはそれを解決し、買い物客にスムーズで信頼できる支払い方法を提供します。

このガイドでは、コードに触れることなくゼロから構築する方法を説明します。明確なコールトゥアクション、モバイルフレンドリーなデザイン、実際のカスタマーレビューなど、実際に注文を完了させるための要素を追加していきます。

WooCommerceとシームレスに連動するドラッグ＆ドロップビルダー、SeedProdを使えば、コンバージョンの高いチェックアウトページを今すぐ立ち上げることができます。

WordPressのカスタムチェックアウトページを作成する簡単な手順：

WooCommerceは、決済ゲートウェイ、商品ページ、クレジットカードサポートなどの基本的なチェックアウトを簡単に追加することができます。しかし、カスタマイズなしでは、オンラインショッピングカートの70-85%に影響を与えるという調査結果もあるカート放棄を減らすことができる機能が不足しています。

カスタムチェックアウトページを作成することで、以下のことが可能になります：

• 信頼を築くために、証言と社会的証明を加える
• 関連商品を表示して注文額を増やす
• カスタムフォームを使用して、必要な情報のみを収集します。
• さまざまな顧客に適した支払い方法を提供する
• より速く、よりフレンドリーなチェックアウト体験のためのフィールドのカスタマイズ

適切なレイアウトと要素があれば、カスタムチェックアウトページは単に見栄えが良いだけでなく、コンバージョン率を直接改善し、より多くの一度きりの購入者をリピーターに変えることができます。

WordPressでチェックアウトページを作成する方法（コードなし）

このチュートリアルでは、SeedProdを使ってWordPressのチェックアウトページを作成します。SeedProdは、100万以上のウェブサイトで使用されている最高のドラッグ＆ドロップWordPressページビルダーです。

SeedProdを使えば、コードを一行も書くことなく、WordPressのランディングページを簡単に作成することができます。また、強力なWooCommerceとの統合により、カスタムチェックアウトページやその他のWooCommerceページを作成し、WooCommerceストアにリンクさせることができます。

つまり、デフォルトのWooCommerceの1ページチェックアウトを使用する代わりに、コンバージョンのために最適化された完全にカスタマイズされたページを作成することができます。また、立ち上げる前に、WooCommerceのcoming soonページを作成し、リードを生成することができます。

そこで、WordPressでチェックアウトページを作りたい初心者のために、SeedProdを使った方法をご紹介します。

ビデオ・チュートリアル

ステップ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のチェックアウトページを作成し、コンバージョンのために最適化することができます。

右側にページのライブプレビューが表示されます。左側にはオプションパネルがあり、様々なブロックやセクションを選択したり、デザインをカスタマイズすることができます。

チェックアウトページのヘッダー

まず、チェックアウトページにヘッダーを追加し、ウェブサイト全体でブランディングの一貫性を保てるようにします。

これを行うには、左側のパネルのセクションタブをクリックし、ヘッダーカテゴリーをクリックします。そこから任意のヘッダーセクションにマウスカーソルを合わせ、プラスアイコンをクリックしてページに追加します。

次に、新しいヘッダーセクションの画像エリアをクリックします。ここで、あなたのコンピューターまたは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タブをクリックします。次に、チェックアウトページの見出しの横にある、今作成したページを検索します。

ドロップダウンリストで見つけたら、それをクリックして公式チェックアウトページとして割り当てます。画面下部の「変更を保存」をクリックして、設定を保存してください。

これで、訪問者が'チェックアウトに進む'をクリックすると、今作ったばかりのコンバージョン率の高いチェックアウト画面に移動します。

WordPressでのチェックアウトページ作成に関するFAQ

WordPressでカスタムチェックアウトを構築する

WordPressでカスタムチェックアウトページを作成することは、デザイン以上の意味があります。より多くの買い物客が注文を完了できるように、購入プロセスを明確かつ迅速にし、あなたのストアに合わせたものにします。

SeedProdとWooCommerceの統合により、コードを書くことなく、あなたのブランドに合ったチェックアウトページをデザインし、邪魔なものを取り除き、信頼を築き売上を増やす機能を追加することができます。

今すぐカスタムページを設定して、より多くの訪問者を有料顧客に変えましょう。

WooCommerceのヒントをお探しなら、以下の記事をご覧ください：

• WooCommerceショップページのメンテナンスモードを有効にする方法
• WooCommerceストアを高速化する方法（簡単な7つのステップ）
• WooCommerceのコンバージョントラッキングの設定方法

Twitter、YouTube、Facebookで、あなたのビジネスに役立つコンテンツを随時更新しています。