WooCommerceチェックアウトページをカスタマイズおよび編集する3つの効果的な方法

WooCommerceチェックアウトページを編集するための最良の方法をお探しですか？

WooCommerceのチェックアウトページをカスタマイズする方法を学ぶことで、そのデザインをより細かく制御でき、売り上げを伸ばす可能性が高まります。

‍この詳細なチュートリアルでは、デザインを完全に調整したり、チェックアウトページに表示されるフィールドを変更したりするなど、チェックアウトページをカスタマイズする3つのコードフリーの方法を紹介します。

また、チェックアウトエクスペリエンスをカスタマイズするためにWooCommerceが提供するすべての組み込み機能についても説明します。

始めましょう…

WooCommerceチェックアウトページを編集する理由

そもそもWooCommerceのチェックアウトページを変更する明白な理由はありますか？ 場合によります。 組み込みのチェックアウトモジュールは、クリーンで機能的で、顧客を煩わせることなく支払いを処理するのに十分な速さです。

しかし、その欠点にも気付くかもしれません。 WooCommerceチェックアウトページを編集する主な理由は次のとおりです。

• プリセットフォント、スタイル、WooCommerceパープルなどのデフォルトのWooCommerceブランド要素を置き換えるため。
• ロゴ、ブランドの色、サポートドキュメントへのリンクなど、ビジネスに関連するWebアイテムを追加するため。
• テスト後にコンバージョンのチェックアウトを最適化する必要がある場合。
• 1つのステップに変換することにより、チェックアウトプロセスをスピードアップします。
• アップセル、クロスセル、および関連製品を組み込むため。
• カスタムフィールドを追加したり、WooCommerceが提供する一部のフィールドを削除したりします。
• 配送オプションを変更します。
• ボタンテキスト、プリセットフィールドテキスト、ゲストチェックアウトオプションなどのデザイン要素を変更します。

WooCommerceチェックアウトページを編集する方法

WooCommerceチェックアウトページを編集するために利用できるいくつかのオプションがあります。 最適な方法は、実行しようとしている特定の編集と、プラグインを使用できるかどうかによって異なります。

以下では、3つの最良の方法について説明します。

1. ネイティブのWooCommerce設定– WooCommerceには、チェックアウトをカスタマイズするための多くの組み込みオプションが含まれています。これについては、最初の方法で詳しく説明します。 テーマには、チェックアウトページのデザインをカスタマイズするための独自のオプションが用意されている場合もあります。
2. Elementor Pro – Elementor Proは、チェックアウトページのデザインを完全にカスタマイズできる独自のチェックアウトウィジェットを提供するようになりました。 これは、特にページのデザインを編集したい場合に最適なオプションです。
3. チェックアウトフィールドエディタ–これは、チェックアウトページに表示されるフォームフィールドを編集する場合に最適なオプションです。 これを使用して、新しいフィールドを追加したり、デフォルトのフィールドを削除したり、必要に応じてすべてを再配置したりできます。

それらを見てみましょう。

方法1：デフォルトのWooCommerceチェックアウト設定を使用する

WooCommerceには、チェックアウトモジュールを編集するための組み込み設定が用意されており、WordPressテーマには、WordPressカスタマイザーの一部のフィールドとチェックアウト設定を調整するためのツールが既に用意されている場合があります。

必要な機能がすでにある場合があるため、追加のプラグイン、テーマ、またはフィールドカスタマイザーを探す前に、これらの設定を確認することをお勧めします。

たとえば、WooCommerceには、特定のフィールドを削除したり、チェックアウト時に税率を有効にしたり、クーポンフィールドを表示したりするためのツールがあります。

ステップ1：チェックアウト時に税計算とクーポンフィールドを追加する

WooCommerceには、税金の計算を自動化し、チェックアウト時にクーポンを受け入れるための設定が組み込まれています。

オン/オフを切り替えるには、WordPressの[WooCommerce]>[設定]に移動します。

[全般]タブを選択し、[税金を有効にする]セクションまで下にスクロールします。 チェックアウト時に税率と計算を有効にするチェックボックスをオンにします。 これにより、WooCommerceで設定したレートに基づいて税額が生成および表示されます（ WooCommerce>設定>税>標準レート）。

顧客が割引コードを入力できるフィールドを表示するには、[クーポンコードの使用を有効にする]チェックボックスをオンにします。

特定の要素を表示したくない場合は、チェックボックスを削除するだけです。 フロントエンドでの変更を確認するには、必ず[保存]ボタンをクリックしてください。

ステップ2：税金の有無にかかわらず製品の価格を表示する

チェックアウトの最後に税金を計算することは1つのことですが、特に顧客がチェックアウトを通過するときに、製品の全体的なコストに税金を含めるかどうかも決定する必要があります。

一般に、これは、顧客が支払う直前に税金で価格を上げるのではなく、より透明性を示します。

チェックアウトプロセスに価格設定に税金を含めるには、 WooCommerce>設定>税金に移動します。

ページを下にスクロールして、 「カートとチェックアウト中に価格を表示する」フィールドを見つけます。

ドロップダウンから選択：

• 税込
• 税抜き

[変更を保存]をクリックします。

ステップ3：チェックアウトに表示される配送アイテムを設定する

また、 [WooCommerce]> [設定]で、WooCommerceのチェックアウトに表示される配送ゾーン、方法、計算をマークすることができます。

[配送]タブに移動して調整するだけです。

• 計算：カートページで送料計算ツールを有効にします
• 計算：住所が挿入されるまで、チェックアウト時に送料を非表示にします
• 配送先：チェックアウト時にデフォルトの配送先住所を設定します

[変更を保存]をクリックします。

ステップ4：チェックアウト時にアカウントとプライバシーを管理する

WooCommerce> Settingsの下にいる間に、 Accounts＆Privacyタブに移動します。

ページの上部に、次の2つのフィールドが表示されます。

• ゲストチェックアウト：ゲストチェックアウトと既存のアカウントログインを含める/削除する
• アカウントの作成：顧客がチェックアウト中にアカウントを作成したり、サブスクリプションを開始したりできるようにします

[アカウントとプライバシー]ページを続けて、[プライバシーポリシー]領域を見つけます。

[チェックアウトプライバシーポリシー]テキストボックスに入力して、顧客がチェックアウト時にポリシーを確認できるようにします。 その領域にプライバシーポリシーを表示したくない場合は、フィールドを空白のままにします。

ステップ5：実際のチェックアウトページとその他の詳細設定を選択します

[詳細設定]タブに移動して、[ページ設定]セクションを表示します。 これにより、マーチャントはチェックアウト時に顧客をどこに送るかをWooCommerceに指示するように促されます。

デフォルトでは、WooCommerceはカート、チェックアウト、マイアカウント、および利用規約のページを生成します。これらのページは、WordPressの[ページ] >[すべてのページ]に移動すると見つかります。

ただし、まったく新しいページを生成してここにリンクするオプションがあります。 これはデフォルトのチェックアウトページを上書きし、顧客をカスタムページに送ります。

[詳細設定]タブのもう1つのオプションは、SSL証明書を必要とする[セキュアチェックアウトを強制する]です。

ステップ6：WordPressカスタマイザーでテーマのチェックアウトデザインを変更する

WooCommerce機能を備えたWordPressテーマは、多くの場合、チェックアウトのスタイルを簡単に調整するためにWordPressカスタマイザーツールをインストールします。

すべてのWooCommerceテーマは独自のWordPressカスタマイザー設定を提供しますが（一部には設定がまったくないものもあります）、全体として、チェックアウトをすばやく制御するにはWordPressカスタマイザーをチェックする価値があります。

まず、WordPressで[外観]>[カスタマイズ]に移動します。

利用可能な場合、テーマはWordPressカスタマイザーのどこかにWooCommerceボタンを表示する必要があります。 それをクリックします。

これはStorefrontテーマの例にすぎません（同じものが表示されない場合があります）が、テーマでカスタマイザーに[チェックアウト]タブがあるのはかなり一般的です。 チェックアウトの制御を示す可能性のあるもの、または同様のものを選択してください。

テーマによって提供されるすべてのチェックアウト設定をウォークスルーします。 ストアフロントテーマでは、次のフィールドをオプション、必須、または非表示にすることができます。

• 会社名フィールド
• 住所2行目フィールド
• 電話フィールド

必須フィールドをアスタリスクで強調表示することもできます。

最後に、ストアフロントテーマには、チェックアウトの最後にプライバシーポリシーと利用規約のページを表示するオプションがあります。

方法2：ページビルダーを使用してWooCommerceのチェックアウトフィールドと全体的なスタイルを編集する

Elementor、Beaver Builder、Themifyなどのページビルダーはすべて、WooCommerceチェックアウトページに現在表示されているものをオーバーライドするWooCommerceコンテンツウィジェットを提供しています。

ページビルダーは、プレミアムプラン用にWooCommerceチェックアウトモジュールをほぼ独占的に予約しているため、この機能にお金を払わなければならない可能性が高くなります。 たとえば、ProプランでElementorCheckoutウィジェットを受け取ります。

そうは言っても、ページビルダーを使用すると、チェックアウトページをほぼ完全に制御できるため、コーディングの知識がなくてもWooCommerceのチェックアウトを簡単に編集でき、年間約50ドルから100ドルで済みます。

このチュートリアルでは、Elementorを使用して、チェックアウトのカスタマイズがページビルダーで一般的にどのように機能するかを示します。

ステップ1：Elementorで指定されたチェックアウトページを開く

ElementorでWooCommerceチェックアウトを編集するには、WooCommerceによって自動的に作成されたチェックアウトページに移動する必要があります。 [ページ]>[すべてのページ]でそれを見つけます。

「チェックアウトページ」というラベルの付いたページを開き、 Elementorで編集をクリックします。

ステップ2：WooCommerceチェックアウトショートコードを削除する

WooCommerceは自動的に「WooCommerce」を追加しました エディターへの「チェックアウト」ショートコード。これにより、デフォルトのWooCommerceチェックアウトモジュールがレンダリングされます。

目標は、それをページビルダーのチェックアウトモジュールと交換することです。 したがって、WooCommerceチェックアウトショートコードを削除します。

ステップ3：ElementorCheckoutウィジェットにドロップします

次に、ページビルダーのチェックアウトウィジェットを見つけます。 ElementorはCheckoutと呼ばれるものを提供しています。これは、検索バーを使用するか、WooCommerceの見出しの下を参照することで見つけることができます。 チェックアウトウィジェットをクリックして、 「ウィジェットをここにドラッグ」と表示されている空白のページにドラッグします。

注： Elementorのプレミアムバージョンにアップグレードしていない場合、チェックアウトウィジェットが表示されない場合があります。 これは、ほとんどのページビルダーに当てはまります。

ステップ4：コンテンツ、スタイル、および高度な機能をカスタマイズする

チェックアウトウィジェット上にドラッグした後、Elementorはチェックアウトプレビューをレンダリングします。 次に、左側にあるこれらのタブをクリックして、チェックアウトのあらゆる側面をカスタマイズできます。

例として、一般レイアウトを1列に切り替えて、名フィールドのプレースホルダーテキストを調整できます。

その他のカスタマイズタブは次のとおりです。

• 支払明細
• 追加情報
• ご注文
• クーポン
• 支払い

[スタイル]タブでWooCommerceチェックアウトを編集する方法は無限にあります。

次のタブを使用します。

• セクション
• タイポグラフィ
• フォーム
• 注文の概要
• 購入ボタン

例として、青い購入ボタンを緑の購入ボタンに切り替えました。

最後に、[詳細設定]タブには、編集するためのさらに強力なツールが用意されています。

• レイアウト
• モーションエフェクト
• 変換
• 背景
• ボーダー
• マスク
• 応答性
• 属性
• カスタムCSS

以前にWooCommerceの「チェックアウトページ」として設定されたページを維持し、WooCommerceチェックアウトショートコードをページビルダーチェックアウトウィジェットに交換する限り、変更を保存してプロセスを完了することができます。

方法3：フィールドを編集するためのカスタマイザープラグインをインストールする

次のような多くのWooCommerceチェックアウトカスタマイザープラグインが存在します。

ほとんどのWooCommerceチェックアウトプラグインは、フィールドを変更および追加するための追加のカスタマイズツールを提供しますが、マルチステップチェックアウトプラグインのように、デザインを完全に刷新するためのツールがいくつかあります。

上記の推奨プラグインをすべて調べることをお勧めしますが、プラグインを使用してWooCommerceチェックアウトを編集する方法を理解するのに役立つ、チェックアウトフィールドエディタープラグインを使用した簡単なチュートリアルを実行します。

ステップ1：CheckoutFieldEditorプラグインをインストールしてアクティブ化する

Checkout Field Editorプラグインをインストールしてから、プラグインをアクティブ化するプロセスを実行します。

プラグインがアクティブになると、WordPressに新しいタブが追加されます。このタブには、 WooCommerce>CheckoutFormに移動してアクセスできます。

ステップ2：現在のフィールドを編集する

プラグインは、WooCommerceチェックアウト内の現在のすべてのフィールドを表示します。ただし、プラグインはデフォルトのWooCommerceチェックアウトにリンクしているため、フィールドを完全に制御できます。

編集できます：

• 請求フィールド
• 配送フィールド
• 追加フィールド

WooCommerceチェックアウトフィールドを編集するには、変更するフィールドの横にある[編集]をクリックします。 この例では、[会社名]フィールドを変更します。

[フィールドの編集]ウィンドウで、次のようにフィールドのオプションを変更できます。

• ラベル
• プレースホルダー
• デフォルト値
• クラス
• 検証

[必須]チェックボックスをオフにすることもできるため、顧客はフィールドに入力する必要がありません。 フィールドを無効にして、チェックアウトにまったく表示されないようにすることもできます。 必ず[保存して閉じる]をクリックしてください。

プラグインは通常、その後すべてを保存しますが、[変更を保存]ボタンをもう一度クリックして機能することを確認できます。

ご覧のとおり、チェックアウト領域から[会社名]フィールドを削除しました。

そして、それはフロントエンドのチェックアウトからなくなりました。

プレースホルダーテキストのようなものを編集することもできます。 その場合、問題のフィールドを開いて設定を変更するのと同じプロセスです。

チェックアウトの[名]フィールドに、新しいプレースホルダーテキストが表示されるようになりました。

ステップ3：WooCommerceチェックアウトに新しいフィールドを追加する

まったく新しいフィールドを追加するには、[フィールドの追加]ボタンをクリックします。

次のようなオプションから選択して、フィールドのタイプを選択します。

• 文章
• 番号
• 隠れた
• パスワード
• 電話
• チェックボックス
• 月
• URL
• などなど

例として、[番号]フィールドを作成し、顧客に忠誠報酬番号を入力するように依頼します。 プレースホルダー、デフォルト値、必須フィールドかどうかなどの要素を指定することもできます。

必ず[有効]チェックボックスをオンにしてから、[保存して閉じる]をクリックしてください。

ステップ4：結果を表示する

バックエンドでは、リストの下部に新しいチェックアウトフィールドが表示されます。 デフォルトでは最後に配置されていますが、クリックしてドラッグすると並べ替えることができます。

また、新しいフィールドはフロントエンドチェックアウトモジュールにも表示されます。

今日完璧なチェックアウトページを作成する

デフォルトのWooCommerceチェックアウト設定から始めて、希望する結果を達成するのに役立つかどうかを確認することをお勧めします。 より高度な編集については、カスタムフィールドの使用を検討してください。 また、高度であるが比較的簡単に実装できるカスタマイズには、推奨されるページビルダーの1つを使用してください。

WooCommerceチェックアウトを編集する方法に関する主な質問は何ですか？ コメントであなたの考えを共有してください！