WooCommerceのチェックアウトページを編集・カスタマイズする方法【初心者向け完全ガイド】

先日、あるオンラインストアでシャツを購入しようとしたときのことです。気に入ったデザインとサイズ、色を選び、カートに進んだところで問題が発生しました。チェックアウトページが非常に長く、しかも複数ページに分かれていたのです。ようやく入力が終わったと思っても、さらに別の情報の入力を求められます。10分ほど格闘した末、私はしびれを切らして別のサイトへ移動してしまいました。

あなたが経験したのはこの通りのケースではないかもしれませんが、オンラインショッピングで何かしらの不便さを感じ、購入を諦めた経験は一度はあるのではないでしょうか。そして、あなたの顧客も同じような経験をしてきたはずです。だからこそ、優れたチェックアウト体験を作り上げることが売上にとって非常に重要なのです。本記事では、WooCommerceのチェックアウトページのカスタマイズについて、より速く、よりスムーズに、そして購入者にとってより快適なものにするために必要なすべての情報をご紹介します。

デフォルトのWooCommerceチェックアウトページはどのような見た目?

デフォルトのWooCommerceチェックアウトページは決して悪いわけではありません。ただ、優れているとも言い難いだけです。あらゆる種類の商品に対応できる汎用的なデザインになっているためです。これからチェックアウトページのカスタマイズ方法について解説しますが、デフォルトのページを否定するつもりはありません。むしろ優れた出発点であり、自社の商品や顧客、そしてその行動パターンに関する知識をもとに調整していくことをおすすめします。

まず、シークレットモード(プライベートブラウジング)で自分のサイトを開き、商品をカートに追加してみましょう。そのままチェックアウトに進み、デフォルトのチェックアウトページを確認してみてください。

デフォルトでは、WooCommerceのチェックアウトページは氏名、住所、電話番号などの基本的な請求先情報を求めます。注文内容や支払い方法の詳細も表示されます。これは最低限必要な要素ですが、必ずしも顧客にとって最良の体験とは言えません。本記事では、チェックアウトページをさまざまな方法で編集する手順を解説していきます。

Elementorでチェックアウトページを簡単にカスタマイズする方法

チェックアウトページの編集には、既存のテンプレートを使う方法と、デフォルトのページを直接編集する方法があります。サイドバーの「テンプレート」をクリックすると、さまざまなテンプレートを試すことができます。ここでは、デフォルトのチェックアウトページを編集する方法を紹介します。

チェックアウトページを手軽にリニューアルする最も簡単かつ迅速な方法は、ページビルダーを使うことです。ここでは人気のElementorを使用しますが、他のページビルダーでも同様の手順で作業できます。Elementorをおすすめする理由は、セットアップと操作が簡単なうえ、WooCommerce専用のウィジェットが豊富に用意されているからです。

チェックアウトページを編集するのに必要なのは、Elementorのチェックアウトウィジェットだけです。woocommerce_checkoutショートコードをウィジェットに置き換えることで、完全にカスタマイズ可能なチェックアウトページになります。カートウィジェットとの相性も抜群で、デザイン作業全体がスムーズに行えます。ただし、このオールインワンソリューションには料金が発生します。これらのウィジェットを使用するには、Elementor Pro版が必要です。投資する価値があると判断した方は、以下の手順に従ってください。

1. Elementorをインストールして有効化する

WordPressダッシュボードで「プラグイン」→「新規追加」をクリックします。「Elementor」と検索し、「今すぐインストール」をクリックして、指示に従って「有効化」します。これでElementor Proがインストールされます。

2. ライセンスキーを登録する

サイドバーの「Elementor」をクリックし、「ライセンス」を選択します。ライセンスキーを入力して「有効化」をクリックすれば、プラグインが使用可能になります。

3. Elementorエディターでチェックアウトページを開く

「固定ページ」にマウスを合わせ、「固定ページ一覧」をクリックします。「チェックアウトページ」にマウスを合わせて「編集」をクリックし、上部の「Elementorで編集」を押します。少し待つと、ページがElementorエディターで開きます。

4. Elementorでの編集操作に慣れる

Elementorは横方向のセクション単位で構成されており、各セクションのカラム数を選択してカスタマイズできます。ページエディター上の「+」をクリックするとセクションを追加でき、そのセクションに含めるカラムの数とレイアウトを選択するよう促されます。サイドバーから要素をドラッグ&ドロップしてカラムに配置し、各要素はサイドバーから個別にカスタマイズできます。要素を選択すると、該当する設定項目が表示されます。

5. ショートコードをチェックアウトウィジェットに置き換える

既存のショートコードを削除し、左側のライブラリからチェックアウトウィジェットを追加します。これでElementor製のチェックアウトページのプレビューが表示されます。

6. チェックアウトページをカスタマイズする

サイドバーでElementorチェックアウトウィジェットの豊富な設定を自由に探索できます。主な設定項目は以下の通りです。

• 一般: 1カラムまたは2カラムのレイアウトを選択でき、片方のカラムを固定表示(スティッキー)にすることも可能です。
• 請求先・配送先フォームの変更: 各フォームのヘッダー、プレースホルダー、フィールドを個別に編集できます。
• 追加情報: 顧客が注文に関する指示や特記事項を入力できる専用セクションを設けられます。
• クーポン設定: クーポン入力欄の配置やタイポグラフィをカスタマイズできます。

さらに、「スタイル」タブをクリックすると、以下のような細かい調整も可能です。

• 購入ボタン: 購入ボタンの色、テキスト、余白などを変更できます。
• 注文概要: 注文商品リストのタイポグラフィや間隔を選択できます。
• タイポグラフィ: フォーム以外のすべてのテキストをカスタマイズできます。
• フォーム: フォームのフォントや色を調整できます。「行間隔」設定でスペースを広げることも可能です。

7. モバイル表示でページを確認する

レスポンシブデザインは非常に重要です。Elementorの内蔵ビュー機能を使えば、さまざまな画面サイズでのページの見え方を事前に確認できます。

チェックアウトページの編集はほんの入り口に過ぎません。ElementorとWooCommerceの組み合わせは非常に強力で、あなたのストアを他店から際立たせるために活用できます。

ここまで、Elementorを使ってチェックアウトページ全体を簡単にカスタマイズする方法を見てきました。しかし、Elementorのようなプラグインを使わず、WordPress標準のエディターだけで完結させたい場合もあるでしょう。その方法については、次のセクションで詳しく解説します。

標準エディター(Gutenberg)でチェックアウトページのデザインをカスタマイズする方法

このセクションでは、Gutenbergブロックエディターを使ってWooCommerceのチェックアウトページに変更を加える方法を説明します。ページをエディターで開くには、チェックアウトページにマウスを合わせて「編集」をクリックします。

するとGutenbergブロックエディターが開きます。ブロックエディターは、異なる種類のコンテンツを横方向のブロックとして扱います。左側のライブラリからブロックを追加することで、テキスト、画像、見出しなどを挿入でき、各ブロックは個別にカスタマイズ可能です。左上の「+」をクリックするとブロックライブラリが表示され、右上の歯車アイコンから各ブロックの詳細設定を変更できます。

また、実際のページ上にはショートコードと呼ばれるテキストが表示されているはずです。このショートコードは、WooCommerceがチェックアウトフィールドをページに組み込むための仕組みで、以下のような形式です。

このショートコードは絶対に削除しないでください。ショートコードの上下には、自由に画像やテキストを追加できます。フィールド自体の編集方法については後述しますが、まずは全体的なデザインの変更方法から見ていきましょう。

テキストを追加する

1. 段落ブロックを追加する: ショートコードの上下には自由にテキストを挿入できます。「ブロックを選択するには入力してください」という表示が出たら、段落ブロックをドラッグ&ドロップするか、そのまま入力を始めればOKです。ダブルクリックで別のブロックに移動できます。
2. テキストをカスタマイズする: 右側のブロックタブで、フォントや色を編集できます。対象のテキストまたはブロックを選択してください。

見出しを追加したい場合は、見出しブロックを追加して同様に編集します。H1、H2など、さまざまなサイズから選択することもできます。

画像を追加する

1. 画像ブロックを追加する: 左上の「+」をクリックし、検索バーに「画像」と入力します。希望する画像ブロックのタイプを選んで、クリックまたはドラッグ&ドロップでカラムに配置します。
2. 画像を選ぶ: 「メディアライブラリ」から画像を選ぶか、「アップロード」をクリックしてローカルのファイルを選択します。必要に応じてキャプション(キャプション)も追加できます。

ボタンを追加する

1. ボタンブロックを追加する: ブロックライブラリの検索バーで「ボタン」と検索します。
2. ボタンをカスタマイズする: 表示されるポップアップで、ボタンのラベル、配置、ラベルのフォントを変更できます。ブロック設定からは、色、枠線、サイズも調整可能です。
3. ボタンにリンクを設定する: ポップアップ内のURLボタンをクリックし、リンク先のページURLを貼り付けます。

ブロックエディターには他にも多数のウィジェットがあるので、ページ全体のカスタマイズにぜひ活用してください。作業中は右上の「プレビュー」でこまめに表示を確認し、完了したら「更新」をクリックしましょう。

Gutenbergエディターだけでも多くのことができますが、フィールドのような細部は変更できません。次のセクションでは、その具体的な変更方法を解説します。

チェックアウトページのフィールドをカスタマイズする方法

チェックアウトページのフィールド変更は、思っている以上に大きな効果を発揮します。顧客体験そのものを左右する要素だからです。方法は大きく分けて2つあります。フィールド管理プラグインを使う方法と、手動でコードを編集する方法です。両方を順番に見ていきましょう。

拡張機能(プラグイン)でフィールドをカスタマイズする

ここでは「Checkout Field Manager for WooCommerce」プラグインを使用します。この拡張機能は有料のため購入が必要です。購入後は、以下の手順で始められます。

1. プラグインをインストールして有効化する: wp-admin画面で「プラグイン」→「新規追加」にマウスを合わせます。「プラグインのアップロード」をクリックし、「ファイルを選択」からダウンロードしたzipフォルダを選択します。「今すぐインストール」をクリックし、続けて「有効化」します。
2. WooCommerce設定でフィールドを編集・追加する: 「WooCommerce」→「チェックアウト」をクリックします。上部の「請求」「配送」「追加」タブで、以下のようにフィールドを管理できます。

• フィールドを無効化する: 不要なフィールドは、「無効」列のトグルを切り替えることで非表示にできます。
• フィールドを必須にする: 「必須」をオンにすると、特定のフィールドへの入力を必須にできます。
• フィールドの見た目を編集する: 「位置」列のドロップダウンメニューから、左寄せ、右寄せ、幅広のいずれかを選択できます。
• 既存の内容を編集する: 対象フィールドの末尾にある「編集」をクリックするとポップアップが表示されます。名前、タイプ、ラベル、説明などを変更して「保存」をクリックしましょう。
• 新しいフィールドを追加する: 左上の「+ 新規フィールドを追加」をクリックし、必要な情報を入力して「保存」します。

3. 変更を保存する: すべて完了したら、左下の「保存」をクリックします。

コードでフィールドをカスタマイズする

コーディングに慣れているなら、テーマのfunctions.phpファイルにコードを追加する方法もあります。一般的に、コードでテーマを修正する場合は、先に子テーマを作成し、そちらを編集するのがおすすめです。こうすることで、テーマがアップデートされても変更内容が失われる心配がありません。

重要な点として、前述のCheckout Field Managerはfunctions.phpへの変更を上書きする仕様のため、両者を併用することはできません。

また、WooCommerceがページフィールドをどのように読み込んでいるのかを理解しておくことも大切です。WooCommerceはフィールドをフィルターに通しています。これにより、カスタムコードを追加してフィールドに変更を加えられるのです。WooCommerceチェックアウトページの場合、このフィルターは次のようになっています。

つまり、woocommerce_checkout_fieldsにフックすることで、既存のコードを上書きできます。フックとは、WordPressのコアファイルを修正するためのコード断片のことです。サイトには最初から以下のようなフックが用意されています。

• woocommerce_before_checkout_form
• woocommerce_checkout_before_customer_details
• woocommerce_checkout_billing
• woocommerce_checkout_shipping
• woocommerce_checkout_after_customer_details
• woocommerce_checkout_before_order_review
• woocommerce_checkout_order_review
• woocommerce_checkout_after_order_review
• woocommerce_after_checkout_form

さらに、WooCommerceが提供するフックは長いリストの中から選べます。Business Bloomerのフック一覧ページでは、フックを視覚的に把握できるので参考にしてください。それでは、実際にフィールドを変更する方法を見ていきましょう。

order_commentsフィールドのプレースホルダーを変更する

order_commentsフィールドのラベルを変更する

フィールドを削除する

WooCommerce公式にも、コードを使ってチェックアウトフィールドをカスタマイズする方法を解説した記事がありますので、併せて参照してください。

続いて、チェックアウトページのレイアウト変更方法について見ていきます。

チェックアウトページのレイアウトを変更する方法

アクションフックを追加することで、WooCommerceページのレイアウトをカスタマイズできます。主な方法は以下の2つです。

スニペット管理プラグインを使う方法

まずは、より簡単なスニペット管理プラグインを使った方法から紹介します。

1. スニペット管理プラグインをインストールして有効化する: ここでは「Code Snippets」を使用します。プラグインディレクトリから入手できます。「プラグイン」→「新規追加」で「Code Snippets」と検索し、「今すぐインストール」と「有効化」をクリックします。
2. フックのコードをコピーする: WooCommerceのフックライブラリからコードをコピーするか、テキストエディターで独自のフックを作成してコピーします。例えば、ページ下部に利用規約セクションを追加したい場合は、該当するコードをコピーします。
3. コードを追加する: 左側の「Code Snippets」→「新規追加」をクリックします。識別しやすい名前を付け、functionsタブを選択して、下部にコードを貼り付けます。「Run Snippet Everywhere(どこでもスニペットを実行)」オプションが選択されていることを確認し、「変更を保存して有効化」をクリックします。これでフックの追加は完了です。

手動でコードを追加する方法

テーマのfunctions.phpファイルに直接追加したい場合は、以下の手順に従ってください。

1. テーマファイルエディターを開く: サイドバーの「外観」→「テーマファイルエディター」をクリックします。
2. フックのコードをコピーする: WooCommerceライブラリからコピーするか、テキストエディターで独自のコードを作成してコピーします。前のセクションと同様に、利用規約セクションを追加する場合は該当コードをコピーします。その他のコードはWooCommerceのフックライブラリで確認できます。
3. functions.phpファイルを編集する: 右側のファイルメニューをスクロールしてfunctions.phpを見つけます。コピーしたコードを貼り付けて「ファイルを更新」をクリックします。おめでとうございます。テーマへのフック追加が完了しました。

チェックアウトページにおすすめの追加プラグイン・拡張機能

素晴らしいチェックアウト体験を作るために、以下の拡張機能の導入も検討してみてください。

1. WooCommerce Checkout Add-Ons: ラッピングなどのアドオンを注文に追加できるようにする拡張機能です。
2. WooCommerce One Page Checkout: 任意のページをチェックアウトページに変換できます。顧客が同じページ上で商品を選んで購入できるため、購買プロセスが大幅に簡略化されます。
3. WooCommerce Social Login: メールアドレスや電話番号の代わりに、SNSアカウントでログインできるようにします。
4. YITH WooCommerce Order Tracking: 配送情報を簡単に管理でき、顧客が購入商品の追跡を行えるようになります。
5. YITH Advanced Refund System for WooCommerce: 返金システムの構築をサポートします。

なぜチェックアウトページをカスタマイズすべきなのか?

チェックアウトページの最大の目的は、顧客にサイトで商品を購入してもらうことです。カスタマイズされたチェックアウトページがそれを実現する理由は以下の通りです。

1. 顧客にとってより速くなる: 不要なフィールドを削除して購入手続きを短縮できれば、カート放棄される可能性は低くなります。プロセスが長引くほど、顧客の購入意欲は低下してしまうからです。
2. クロスセル・アップセルができる: チェックアウトページを活用して、関連商品や興味を持ちそうな商品を提案できます。「必要だと知っていたのに、あなたの店で売っているとは知らなかった商品」を顧客に知ってもらう絶好の機会です。
3. 安心感のある購買体験を提供できる: お客様の声(レビュー)を掲載すれば、顧客はあなたを信頼できると感じやすくなります。特定の情報を求める理由を透明性を持って伝えるのも効果的です。

チェックアウトページをカスタマイズする際のベストプラクティス

1. アカウント作成を簡単にする: アカウント作成のプロセスをできる限り手間なくしましょう。カートへの追加から支払いまでの時間を極力短縮します。「会社名」のような不要なフィールドは削除するか、可能であれば任意入力にしましょう。
2. 信頼性の要素を追加する: 支払ったお金が安全な場所に渡っているという安心感を顧客に与えます。
3. ソーシャルプルーフを取り入れる: 顧客が自身のSNSでショップの体験を共有したくなるような仕掛けを作ります。
4. 料金を明示する: 不必要な追加料金は避けましょう。お金がどこに使われているのかを明確にします。例えば、送料は商品価格に上乗せする形のみにするなどです。
5. 十分な支払いオプションを用意する: 多すぎず少なすぎない、適切なバランスの支払い方法を揃えます。ターゲット層に人気の決済ゲートウェイを選びましょう。StripeやPayPalをWooCommerceに追加する方法を解説した記事もありますので、ぜひご覧ください。

まとめ

デフォルトのWooCommerceチェックアウトページはシンプルながら、カスタマイズの余地が十分にあります。チェックアウトページのあらゆる要素を編集して、顧客にとって最高のショッピング体験を作り上げることができます。ただし、変更を加える前に、必ずBlogVaultでサイトのバックアップを取ってください。万が一トラブルが発生したり、うっかりショッピング体験を悪化させてしまった場合の保険になります。BlogVaultはリアルタイムバックアップだけでなく、復元プロセスも驚くほど簡単です。

よくある質問(FAQ)

アクションフックとは何ですか?

アクションフックとは、サイトのコアファイルにコード断片を追加し、サイトの動作に影響を与える仕組みです。WordPressには膨大な数のフックライブラリがあり、それらを利用することも、独自のカスタムフックを作成することもできます。

WooCommerceチェックアウトページのテキストはどうやって編集しますか?

WordPress標準のエディター、またはページビルダープラグインを使えば、サイト全体のフォントやテキストを編集・カスタマイズできます。おすすめはSeedProdのようなページビルダーです。操作性が高く、無料版と有料版の両方が用意されています。

フックやフィルターはどこに追加すればよいですか?

フックやフィルターは、子テーマのfunctions.phpファイルに追加するのが基本です。子テーマは親テーマと同じ外観を保ちながら、コードの調整や追加が可能です。子テーマの確認は、「外観」→「テーマ」から、サムネイル画像がないテーマを探すことで判別できます。子テーマがまだない場合は、作成方法を解説した記事を参考にしてください。