要約：カスタムWordPressチェックアウトページの作成方法
デフォルトのWooCommerceチェックアウトは販売機会を失います。無料の設定で基本を修正し、カスタムページでデザインを修正します。これは高速バージョンです。
- まず無料オプション – WooCommerceの設定でゲストチェックアウト、クーポンフィールド、チェックアウトページを切り替えます。
- SeedProdをインストール – プラグインを有効化し、ライセンスキーを入力します。
- 新しいページを作成 – テンプレートを選択し、チェックアウトページに名前を付けます。
- チェックアウトコンテンツを追加 – WooCommerceチェックアウトブロックをドラッグし、フォームをスタイル設定し、ヘッダー、人気商品、お客様の声を追加します。
- 公開して割り当て – モバイルでプレビューし、公開ボタンを押し、WooCommerce » 設定 » 詳細設定でチェックアウトページとして設定します。
チェックアウトページが遅い、分かりにくい、または適切な支払いオプションがないために販売機会を逃したことがあるなら、それがどれほどイライラするかご存知でしょう。WordPressのカスタムチェックアウトページはそれを解決し、買い物客にスムーズで信頼性の高い支払い方法を提供します。
Baymard Instituteの継続的な平均によると、買い物客の約70％が支払う前にカートを放棄します。管理できるチェックアウトが解決策です。新規ページをゼロから構築する場合でも、既存のWooCommerceチェックアウトページをカスタマイズする場合でも同様です。
まず無料のWooCommerce設定を紹介します。次に、コードに触れることなく、約15分でSeedProdを使用して完全にカスタムなチェックアウトページを構築する方法を説明します。
プラグインなしでWooCommerceのチェックアウトページをカスタマイズする方法
WooCommerceにはいくつかの無料のチェックアウト設定が含まれており、何かをインストールする前に確認する価値があります。
すぐに変更できるのは次のとおりです。
- ゲストチェックアウト：顧客がアカウントを作成せずに支払えるようにします（WooCommerce » 設定 » アカウントとプライバシー）
- クーポンフィールド：チェックアウト時にクーポンコードボックスを表示または非表示にします（WooCommerce » 設定 » 一般）
- チェックアウトページ：どのページをチェックアウトとして使用するかを選択します（WooCommerce » 設定 » 詳細設定 » ページ設定）
- フィールドの基本：一部のアドレスフィールドはオン/オフを切り替えることができますが、フィールドの追加または削除にはプラグインが必要です
これらの設定は、チェックアウトの見た目ではなく、機能方法を変更します。レイアウト、色、ブランディングはすべてテーマのテンプレートから取得され、WooCommerceはそれらのいずれに対してもビジュアルエディターを提供しません。
このガイドの残りの部分では、デフォルトのチェックアウトを自分でデザインしたページに置き換える方法を説明します。
WordPressでチェックアウトページを作成する方法（ノーコード）
このチュートリアルでは、SeedProdを使用してWordPressチェックアウトページを作成します。SeedProdは、100万以上のウェブサイトで使用されている最高のドラッグアンドドロップWordPressウェブサイトビルダーです。
SeedProdを使用すると、1行のコードを書かずに任意のWordPressランディングページを作成できます。そのWooCommerce統合は、ストアの他の部分もカバーしているため、カートページやショップページも同様の方法でカスタマイズできます。
これは、デフォルトのWooCommerceのワンページチェックアウトを使用する代わりに、コンバージョンに最適化された完全にカスタマイズされたページを作成できることを意味します。そして、公開する前に、リードを獲得するためにWooCommerceの近日公開ページを作成できます。
したがって、初心者向けのWordPressでチェックアウトページを作成したい場合は、SeedProdで次のように行うことができます。
ビデオチュートリアル
新しいブロックチェックアウトを使用していますか？ WooCommerce 8.3以降では、デフォルトでブロックベースのチェックアウトが使用されます。SeedProdはこれをカスタムページで完全に置き換えます。このチュートリアルではそれについて説明します。そのため、WooCommerce管理画面がここのスクリーンショットと異なる場合は、それが理由です。
ステップ1: SeedProdのインストールと有効化
最初のステップは、SeedProdプラグインをインストールして有効化することです。
無料バージョンの制限：SeedProdの無料バージョンはランディングページを処理しますが、このチュートリアルで紹介するWooCommerceブロックはSeedProd Eliteプランに含まれています。
このステップでヘルプが必要な場合は、WordPressプラグインのインストールに関するこのステップバイステップガイドに従ってください。
SeedProdを有効化した後、SeedProd » 設定に移動し、ライセンスキーを入力します。
この情報は、SeedProdウェブサイトの「ダウンロード」セクションで簡単に見つけることができます。
ステップ2：新しいページを作成する
ライセンスキーを有効にした後、WordPressダッシュボードからSeedProd » Pagesに移動します。このページには、SeedProdのさまざまなページモードの概要と、新しいランディングページを追加する領域が表示されます。
ページモードを使用すると、すぐに次のことができます。
- 「近日公開ページ」を作成してアクティブ化する
- メンテナンスモードをアクティブ化する
- カスタム404ページを作成する
- カスタムWordPressログインページを設定する
- スタンドアロンWordPressランディングページを作成する
各モードは、サイトが別途WordPressプラグインを必要とする機能を拡張します。
このガイドでは、スタンドアロンのWordPressチェックアウトページを作成します。これを行うには、Add New Landing Pageボタンをクリックします。
次の画面で、何百ものレスポンシブなランディングページテンプレートから選択できます。
上部にあるタブをクリックしてデザインをフィルタリングできます。
- すべて
- 近日公開
- メンテナンスモード
- 404ページ
- セールス
- ウェビナー
- リード獲得
- ログイン
最も良いアプローチは、希望のデザインに最も近いテンプレートを探すことです。完璧に合わない場合でも、次のステップでPHP、CSS、またはショートコードなしでカスタマイズできます。
このチュートリアルでは、開発者を雇わずにWordPressチェックアウトページを簡単に作成する方法を示すために、Blankテンプレートを使用します。
テンプレートを選択するには、サムネイルの上にマウスをホバーし、オレンジ色のチェックマークアイコンをクリックします。
その後、ポップアップが表示され、ページの名前とURLを入力するように求められます。
次に、「保存してページ編集を開始」ボタンをクリックします。
ステップ3：チェックアウトページにコンテンツを追加する
テンプレートをインポートすると、SeedProdのビジュアルページビルダーで開き、下の例と同様の外観になります。
GTmetrixのテストでは、SeedProdで構築されたページは556ミリ秒で読み込まれましたが、Elementorで構築された同じページは1,882ミリ秒でした。より高速なチェックアウトページは、支払い前の離脱が少なくなることを意味します。
右側にはページのライブプレビューが表示され、左側にはオプションパネルがあり、さまざまなブロックやセクションを選択してデザインをカスタマイズできます。
チェックアウトページヘッダー
まず、チェックアウトページにヘッダーを追加して、ウェブサイト全体でブランディングの一貫性を保げるようにします。
これを行うには、左側のパネルでSectionsタブをクリックし、Headerカテゴリをクリックします。そこから、ヘッダーセクションの上にマウスをホバーし、プラスアイコンをクリックしてページに追加します。
次に、新しいヘッダーセクションの画像領域をクリックします。ここで、コンピューターまたはWordPressメディアライブラリから画像をアップロードして、サイトのロゴとして使用できます。
また、チェックアウトページからナビゲーションメニューを削除することをお勧めします。離脱経路が少ないほど、チェックアウト完了率が高くなります。
ナビゲーションメニューを削除するには、ナビゲーションブロックにマウスカーソルを合わせ、ゴミ箱アイコンをクリックします。
次に、行動喚起ボタン（CTA）をカスタマイズしましょう。ユーザーをページから離脱させる代わりに、このボタンを使用してショッピングカートの内容をユーザーにリマインドさせることができます。
左側の設定を開き、デフォルトのテキストを置き換えるには、CTAボタンをクリックしてください。この例では、「カートを見る」に変更しました。
次に、リンクフィールドにWooCommerceカートページのURLを追加できます。必要に応じて、チェックボックスを選択してリンクをノーフォローにしたり、新しいタブで開いたりできます。
WooCommerceチェックアウトブロック
ブランディングを設定したら、チェックアウトフォーム自体を追加する時間です。まず、新しいカラムブロックをページにドラッグします。
次に、好みのレイアウトを選択してください。
次に、左側のパネルを下にスクロールしてWooCommerceセクションに移動します。そこから、チェックアウトブロックを選択し、ページにドラッグします。
チェックアウトブロックのいずれかをクリックして、設定を開きます。
スタイルタブでは、フォームの外観を正確に制御できます。
- レイアウト：1列または2列のチェックアウトフォーム
- ヘッダー：チェックアウトの見出しのフォントと色
- フィールド：背景、テキスト、境界線、ラベルのスタイル設定、および行間隔
- ボタン：スタイル（フラット、2D、ビンテージ、ゴースト、またはリンク）、色、および境界線の半径
- アラート：情報、エラー、および成功メッセージのハイライトカラー
- カート：境界線、背景、フォント、およびヘッダーのスタイル設定
- 支払いセクション：背景、テキストカラー、およびフォントファミリー
より迅速に開始するには、代わりにテンプレートタブをクリックします。チェックアウトフィールドの既製のスタイルがあり、ワンクリックでフォーム全体に適用できます。
変更を保存するには、必ず保存をクリックしてください。
チェックアウトに表示されるフィールドの変更
チェックアウトブロックの設定は、フォームの外観を制御しますが、表示されるフィールドは制御しません。WooCommerceがフィールドを決定するため、会社名フィールドを削除したり、SeedProdのパネルからフォームの順序を変更したりすることはできません。
チェックアウトフィールドを追加、削除、または並べ替えるには、Checkout Field Editor for WooCommerceのような専用のフィールドエディタプラグインを使用します。無料バージョンは基本的な機能を扱います。
注意点：チェックアウトフィールドを編集するPHPスニペットは、クラシックショートコードチェックアウトでのみ機能します。WooCommerceの新しいブロックチェックアウトは、これらのフィルターをサイレントに無視するため、古いコードチュートリアルが機能しなくなることがよくあります。
WooCommerce人気商品
売上を向上させたい場合は、WordPressのチェックアウトページに人気商品を追加できます。これにより、購入者は支払い前にカートにさらに商品を追加するよう促される可能性があります。
人気商品を追加するには、WooCommerceセクションからベストセラー商品ブロックを選択してページにドラッグします。
そこから、列数を編集したり、ページネーションを追加したり、ドロップダウンメニューから他の設定を調整したりできます。
グリッドの上にヘッドラインブロックを追加し、「おすすめ商品」のようなものに変更します。そうすれば、買い物客は何を見ているのかを正確に知ることができます。
レビューとお客様の声
レビューやお客様の声は、他の人があなたの製品を信頼していることを買い物客に安心させます。その安心感は、購入者が購入をためらうまさにその時、チェックアウト時に最も重要です。
SeedProdで追加できます。高度なブロックに移動し、お客様の声ブロックをチェックアウトページにドラッグします。
設定では、ブロックをカスタマイズできます。たとえば、お客様の声の写真や役職を追加したり、スクロールカルーセルにして複数のレビューを表示したりできます。
さらにソーシャルプルーフを高めるために、お客様の声の下にスターレーティングブロックをドロップすることもできます。
信頼バッジも同様に機能します。支払いボタンの近くにある南京錠アイコンや返金保証は、土壇場の疑念を鎮めるのに役立つちょっとした追加です。
ステップ4：WordPressチェックアウトページを公開する
ページに満足したら、モバイルでの表示を確認してください。ほとんどの買い物客はスマートフォンで閲覧するため、小さな画面で壊れるチェックアウトは売上を失うことになります。公開する前に、すべてがモバイル向けに最適化されていることを確認してください。
SeedProdには、このためのモバイルプレビューが組み込まれています。下部ナビゲーションバーのモバイルアイコンをクリックします。
モバイルの買い物客が見るのと同じようにページが表示され、公開前に窮屈に見えるものを修正できます。
すべてがうまくいったと思ったら、緑色の「保存」ボタンの横にあるドロップダウン矢印をクリックし、「公開」をクリックしてチェックアウトページを公開します。
デフォルトのWooCommerceチェックアウトの代わりに、実際にあなた自身のチェックアウトページができました。
ステップ5：チェックアウトページをWooCommerceに割り当てる
最終ステップは、WooCommerceに新しいページを使用するように指示することです。これはWooCommerceダッシュボードの設定の1つです。
WooCommerce » 設定に移動し、詳細設定タブをクリックします。次に、チェックアウトページの見出しの横にある、作成したページを検索します。
ドロップダウンリストで見つけたら、クリックして公式のチェックアウトページとして割り当てます。設定を保存するために、画面下部にある「変更を保存」をクリックすることを忘れないでください。
これで、訪問者が「チェックアウトに進む」をクリックすると、作成したページに表示されます。これは、ストアが以前にブロックまたはクラシックチェックアウトを使用していたかどうかに関係なく機能します。
公開する前に、WooCommerceに組み込まれているテストモードを使用してチェックアウトをテストしてください。WooCommerce » 設定 » 支払い でテストゲートウェイを有効にし、テスト注文を行ってすべてが機能することを確認します。
支払い方法がページに表示されない場合は、まずここで確認してください。SeedProdは、Stripe、PayPal、その他の有効にしたものを含む、有効にしたゲートウェイをすべて表示します。
WordPressチェックアウトページに関するよくある質問
WooCommerceのチェックアウトページをカスタマイズするにはコーディングスキルが必要ですか？
いいえ。SeedProdのドラッグアンドドロップビルダーを使用すると、コードに触れることなくWooCommerceチェックアウトページをカスタマイズできます。レイアウトを変更したり、フォームをスタイル設定したり、ビジュアルコントロールを使用して信頼シグナルを追加したりできます。PHPやCSSは必要ありません。
カスタムチェックアウトページにさらに多くの支払いゲートウェイを追加できますか？
はい。WooCommerceは、Stripe、PayPal、Apple Pay、Buy Now Pay Laterオプションを含む複数の支払いゲートウェイをサポートしています。WooCommerce » 設定 » 支払い で有効にすると、SeedProdはそれらをカスタムチェックアウトページに自動的に表示します。
WooCommerceのチェックアウトを1ページにするにはどうすればよいですか？
カートブロックとチェックアウトブロックの両方を含むページをSeedProdで構築し、WooCommerce » 設定 » 詳細設定 でチェックアウトページとして割り当てます。買い物客は、リロードなしで単一のページでカート、請求先情報、および注文概要を表示します。
WooCommerceのチェックアウトページをカスタマイズするためのコードが機能しないのはなぜですか？
お使いのストアは、おそらくWooCommerceのブロックチェックアウトを使用しており、これはwoocommerce_checkout_fieldsのようなPHPフィルターをサイレントに無視します。クラシックショートコードチェックアウトに切り戻すか、PHPフックに依存せずにチェックアウトページを置き換えるSeedProdのようなビジュアルビルダーを使用してください。
SeedProdはWooCommerceブロックチェックアウトで機能しますか？
はい。SeedProdは個別のカスタムチェックアウトページを構築し、WooCommerceの設定でそれを割り当てることで、以前アクティブだったチェックアウトタイプ（ブロックまたはクラシック）を置き換えます。最初にWooCommerceチェックアウトモードを切り替える必要はありません。
チェックアウトページのコンバージョン率を向上させるにはどうすればよいですか？
フォームをシンプルに保ち、複数の支払いオプションを提供し、セキュリティバッジや顧客の証言を追加します。ナビゲーションメニューを削除すると、買い物客がチェックアウト途中で離脱するのを防ぐことができます。SeedProdのビジュアルビルダーを使用すると、これらの調整をすべてコードなしで行うことができます。
公開前にWooCommerceのチェックアウトをテストするにはどうすればよいですか？
WooCommerce » 設定 » 支払い でテストゲートウェイを有効にします。Stripe と PayPal はどちらもサンドボックスモードを提供しています。本番稼働前に、チェックアウトページが正しく読み込まれ、支払いが処理され、注文確認メールが送信されることを確認するためにテスト注文を行ってください。
WordPressでカスタムチェックアウトを構築する
WordPress でカスタムチェックアウトページを作成することは、デザイン以上のものです。購入プロセスを明確かつ迅速にし、より多くの買い物客が注文を完了できるようにします。
SeedProd を使用すると、コードを書かずに、ブランドに合わせて、気を散らすものを排除したチェックアウトページをデザインできます。公開後は、アップセルや販売後のレビュー収集と並行して、WooCommerce のお礼ページをカスタマイズできます。
今日からカスタムページを設定して、より多くの訪問者を有料顧客に変えましょう。
さらに多くのWooCommerceのヒントをお探しなら、これらの投稿をご覧ください。
また、ビジネスを成長させるための役立つコンテンツについては、Twitter、YouTube、Facebookでフォローしてください。
