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

公開: 2020-08-15

チェックアウトページは、購入プロセスで最も重要なステップの1つです。 オンラインストアをお持ちの場合は、コンバージョン率を上げるためにカスタマイズして最適化することが重要です。 これを行うにはいくつかの方法があります。 このガイドでは、WooCommerceチェックアウトページを編集するための2つの異なる方法を紹介します。プラグインを使用する方法とプログラムで行う方法です。

WooCommerceのチェックアウトページをカスタマイズする必要があるのはなぜですか？

WooCommerceストアをお持ちの場合、チェックアウトは最も重要なページの1つです。 それは顧客が支払い、あなたが販売を閉じる場所です。 カートを放棄する買い物客の数と、現在の競争の激しさを考慮すると、チェックアウトを最適化して、できるだけ多くの売り上げを閉じる必要があります。

WooCommerceには適切なデフォルト設定が含まれていますが、ストアのコンバージョン率を上げるためにチェックアウトページを編集する必要がある場合があります。 WooCommerceチェックアウトページを編集するために適用できる変更のいくつかは次のとおりです。

  • 1ページのチェックアウトを作成する
  • CSSを使用してチェックアウトのスタイルとデザインを変更する
  • チェックアウトフィールドを追加、削除、または再配置します
  • コンテンツを含める
  • フィールドを必須またはオプションにする
  • 条件付きフィールドを追加し、条件付きロジックを作成します
  • 送料、梱包などの追加料金を追加します
  • そして他の多く

ショップページをカスタマイズする方法とチェックアウトからフィールドを削除する方法を以前に見てきましたが、今日はWooCommerceでチェックアウトページをカスタマイズする2つの異なる方法を紹介します。

WooCommerceチェックアウトページを編集します：2つの方法

このガイドでは、WooCommerceのチェックアウトページを2つの異なる方法で編集する方法を学習します。

  1. プラグイン付き
  2. プログラムで（コーディング）

各オプションを詳しく見てみましょう。

1）プラグインを使用してチェックアウトページをカスタマイズします

コーディングスキルがない場合は、プラグインを使用してWooCommerceチェックアウトページを編集できます。 そこには多くのオプションがありますが、このチュートリアルでは、 WooCommerce CheckoutManagerを使用します。

このプラグインは数年前から市場に出回っており、90,000を超えるアクティブなダウンロードがあります。 ここからダウンロードできる基本的で強力な機能を備えた無料バージョンと、19米ドル（1回払い）から始まるより高度な機能を備えた3つのプレミアムプランがあります。 このツールで何ができるか見てみましょう。

WooCommerceチェックアウトページをカスタマイズする-WooCommerceCheckoutManagerメイン

WooCommerceチェックアウトマネージャー

チェックアウトマネージャーは、チェックアウトページを管理するための最良のプラグインの1つです。 チェックアウトページのフィールドを追加、編集、削除して、売り上げを伸ばすことができます。 そして最良の部分は、それが非常に使いやすいということです。 たとえば、メニューからオプションを有効にするだけで、チェックアウトページに配送、請求、および追加のフィールドを追加できます。

このツールを使用すると、名前、会社名、国、都市、郵便番号、住所、電話番号、電子メールなどのフィールドを追加または非表示にできます。 これを行うには、WordPressダッシュボードで[WooCommerce]> [Checkout ]に移動し、[Billing]、[Shipping]、または[Additional]タブに移動します。 そこに、表示または非表示にするすべてのフィールドのリストが表示されます。 woocommerceチェックアウトページをカスタマイズする-チェックアウトマネージャープラグイン

カスタムアップロードファイルフィールドを作成する

WooCommerce Checkout Managerプラグインの最も興味深い機能の1つは、買い物客が購入プロセス中に任意のタイプのファイルをアップロードできるようにする可能性です。 これは、ホテルを予約したり、オンラインでレンタカーを借りたりして、IDまたは運転免許証をアップロードする必要がある場合に非常に便利です。 これらのファイルを編集して、追加のドキュメントを提供する必要がある場合に備えて、ユーザーがファイルを管理できるようにすることもできます。 さらに、任意のコアフィールドまたは条件付きフィールドに固定料金またはパーセンテージ料金を追加できます。

チェックアウトに手数料を追加する

WooCommerceのチェックアウトページを編集するもう1つの興味深いオプションは、料金を追加することです。 これは、次のような状況で追加料金を含める場合に非常に便利です。

  • 速達便
  • 特殊な取り扱い
  • 特定の国または場所への配送には追加料金がかかります
  • クレジットカードまたは支払いゲートウェイに関連する料金

WooCommerceはこれらの追加料金を追加するためのいくつかのオプションを提供していますが、CheckoutManagerはより多くの制御と柔軟性を提供します。 Checkout Managerで料金を追加するには、 WooCommerce> Checkout > Billingに移動します。

有効にできるさまざまな請求フィールドが表示されます。 このデモでは、速達料金を追加し、新しいフィールドを作成する必要があるため、[新しいフィールドの追加]ボタンを押します。 ボタンの種類としてラジオを選択し、新しいフィールドに名前を付けます。

次に、[オプション]タブに移動し、[はい]と[いいえ]の2つのラベルを追加します。 買い物客が速達を選択すると、10ドルの追加料金が追加されます。

チェックアウトに手数料を追加-オプション 変更を保存してください。これで完了です。 これで、ユーザーがチェックアウト時に速達オプションを選択すると、カートに10ドルの追加料金が追加されます。

条件付きフィールドを作成する

フィールドと料金を追加するだけでなく、条件付きフィールドを作成してユーザーエクスペリエンスを向上させることにより、WooCommerceチェックアウトページをカスタマイズすることもできます。 条件付きの親フィールドと値を選択するだけです。 ステップバイステップのプロセスを見てみましょう：

  1. WordPressダッシュボードで、 WooCommerce> Checkout> Billingに移動し、 Add NewFieldをクリックします。
  2. 作成するフィールドのタイプを選択し、ラベル、プレースホルダー/タイプ、および説明を入力します。 これは、作成している条件のタイプによって異なります
  3. その後、右側の条件付きチェックボックスをオンにします。 親フィールドと、条件付きフィールドを表示するために親フィールドが取る必要のある値を選択します
  4. [保存]を押すと完了です。

良い点は、Checkout Managerを使用すると、無制限のカスタムフィールドを作成し、チェックアウトページを編集してユーザーに独自のエクスペリエンスを提供するために、必要な数の条件を適用できることです。

WooCommerceで条件付きフィールドを作成する方法の詳細については、チェックアウトをカスタマイズするためにできることのいくつかの例が記載されたこの完全なガイドを参照してください。

これは単純な例ですが、できることは他にもたくさんあります。 詳細については、WooCommerceチェックアウトに料金を追加する方法に関する完全ガイドをご覧ください。

全体として、チェックアウトページを簡単に編集したい場合は、WooCommerce CheckoutManagerが最適です。 無料版は素晴らしいスタートですが、より高度な機能が必要な場合は、プレミアムプランのいずれかをお勧めします。

2）チェックアウトページをプログラムで編集します（コーディング）

このセクションでは、コーディングを使用してWooCommerceチェックアウトページを編集する方法を説明します。 したがって、それが終わるまでに、次の方法がわかります。

  1. WooCommerceチェックアウトページにカスタムフィールドを追加する
  2. カスタムフィールドをデータベースに保存します
  3. 必須フィールドをオプションにする
  4. チェックアウトページにコンテンツを追加する
  5. WooCommerceチェックアウトページでショートコードを使用する
  6. カスタムCSSを使用してチェックアウトページのスタイルを設定する

これらすべてのカスタマイズを実現するには、いくつかのWooCommerceチェックアウトフックを使用します。 フックに慣れていない場合は、WooCommerceフックの使用方法に関するスターターガイドを確認することをお勧めします。 関数.phpファイルにいくつかの変更を適用するため、子テーマを使用することをお勧めします。 多くの子テーマプラグインの1つを使用するか、このガイドに従ってプラグインを作成できます。

2.1）WooCommerceチェックアウトページにカスタムフィールドを追加する

最初に紹介するのは、チェックアウトページにカスタムフィールドを追加する方法です。 これを行うには、子テーマのfunctions.phpファイルに次のスクリプトを貼り付けます。

 //チェックボックスフィールド
add_action（ 'woocommerce_after_order_notes'、 'quadlayers_subscribe_checkout'）;

function quadlayers_subscribe_checkout（$ checkout）{
woocommerce_form_field（ 'subscriber'、array（
'type' => 'チェックボックス'、
// '必須' => true、
'class' => array（ 'custom-field form-row-wide'）、
'label' => 'ニュースレターを購読してください。
）、$ checkout-> get_value（ 'subscriber'））;
}

これにより、チェックアウトページの最後にカスタムチェックボックスフィールドが追加され、ユーザーはニュースレターを購読することができます。 同様に、任意のフィールドタイプを追加できます。 たとえば、次のスクリプトを使用してラジオ入力フィールドタイプを追加しましょう。

 //ラジオ入力フィールド
add_action（ 'woocommerce_before_order_notes'、 'quadlayers_radio_checkout'）;
関数quadlayers_radio_checkout（$ checkout3）{
woocommerce_form_field（ 'feed'、array（
'type' => 'radio'、
// '必須' => true、
'class' => array（ 'custom-field form-row-wide'）、
'label' => 'どうやって私たちを見つけましたか？。'、
'オプション' => array（
'Google' => 'Google'、
'友達' => '友達'、
'Facebook' => 'Facebook'、
'Youtube' => 'YoutTube'、
'その他' => 'その他'
）。
））;
}

これにより、ラジオ入力タイプが追加されるため、顧客にあなたのことをどこで聞いたかを尋ねることができます。 woocommerceチェックアウトページにカスタムフィールドを追加する WooCommerceチェックアウトページにカスタムフィールドを追加する方法の詳細については、いくつかの例を含むこの完全なガイドを確認してください。

2.2）カスタムフィールドの値をデータベースに保存します

次に、これらのカスタムフィールドを使用してチェックアウトを編集し、WooCommerceの注文に関する情報を収集する方法を見てみましょう。 これを行うには、必要なときにいつでもカスタムフィールドの値を取得できる必要があります。 さらに、顧客がフォームに入力して[注文する]ボタンをクリックしたら、カスタムフィールドの値をデータベースに保存する必要があります。

これを実現するには、 'woocommerce_checkout_update_order_meta'フックを使用する必要があります。 手順2.1で追加した2つのカスタムフィールドを更新するには、次のコードをコピーして子テーマfuncitons.phpファイルに貼り付けます。

 add_action（ 'woocommerce_checkout_update_order_meta'、 'quadlayers_save_function'）;
function quadlayers_save_function（$ order_id）{
if（！empty（$ _POST ['subscriber']））{
update_post_meta（$ order_id、 'subscriber'、sanitize_text_field（$ _POST ['subscriber']））;
}
if（！empty（$ _POST ['feed']））{
update_post_meta（$ order_id、 'feed'、sanitize_text_field（$ _POST ['feed']））;
}
}

このスクリプトは、データベースに保存する前に、カスタムフィールドが空であるかどうかをif()条件付きでチェックします。 このスクリプトを追加した後、 global “$post” WPオブジェクトを使用して、データベースから保存されたデータを取得できます。 次のスクリプトでは、現在の注文のサブスクライバーメタデータを取得します。 これは、WooCommerce注文リストのバックエンドで使用できます。

 グローバル$ post;
$ order = wc_get_order（$ post-> ID）;
$ c_meta = $ order-> get_meta（ 'subscriber'）;

これは生のスクリプトであるため、特定のニーズに合わせて調整する必要があることに注意してください。

2.3）必須フィールドをオプションにする

WooCommerceでチェックアウトページを編集するもう1つの簡単で効果的な方法は、必須フィールドまたは必須フィールドをオプションにすることです。 このようにして、買い物客に取引に必要なフィールドのみを入力させ、購入体験を向上させます。

たとえば、ダウンロード可能な製品または仮想製品を販売しているため、[請求]セクションの[住所]フィールドをオプションにしたいとします。 子テーマのfunctions.phpファイルに次のコードを追加するだけです。

 add_filter（ 'woocommerce_billing_fields'、 'wc_address_field_optional'）;
関数wc_address_field_optional（$ fields）{
$ fields ['billing'] ['billing_address_1'] ['required'] = false; 
$ fieldsを返します。 
}

このスニペットをベースとして使用すると、すぐにさらに多くのフィールドをオプションにすることができます。

条件付きフィールド

WooCommerceのチェックアウトページをさらに一歩進めたい場合は、条件付きフィールドを追加してカスタマイズできます。 条件付きフィールドには条件付きロジックがあるため、別のフィールドの値に基づいて表示または非表示になるフィールドがあります。 たとえば、ユーザーが支払いオプションとしてクレジットカードを選択した場合にのみクレジットカードフィールドが表示されるように、条件付きロジックを作成できます。

条件付きフィールドと、それらを使用してチェックアウトページを編集する方法の詳細については、この完全なガイドを参照してください。

2.4）チェックアウトページにコンテンツを追加する

WooCommerceのチェックアウトページを編集するもう1つの方法は、コンテンツを追加することです。 WCチェックアウトフックに関する確かな知識があれば、画像、タイトル、テキストなど、あらゆる種類のコンテンツを好きな場所に簡単に挿入できます。 たとえば、次のスクリプトを使用して、チェックアウトページの[注文する]ボタンの前に信頼バッジの画像を追加できます。

 add_action（ 'woocommerce_review_order_before_submit'、 'quadlayers_checkout_content'）;
関数quadlayers_checkout_content（）{
echo '<img src = "https://www.heresylab.com/wp-content/uploads/2019/01/paypal-1.png" />;
}

woocommerceチェックアウトページに信頼バッジを追加する 画像とは別に、チェックアウトの上部に簡単なヘッダーテキストを追加することもできます。

 add_action（woocommerce_checkout_before_customer_details
、 'quadlayers_checkout_header'）;
関数quadlayers_checkout_header（）{
echo "<h2>これはカスタムヘッダーです<h2>
";
}

もう1つの興味深い方法は、チェックアウトページにメッセージを追加することです。 通常、店舗は配送や配送などに関連することについて言及します。 たとえば、商品を受け取るまでに5営業日待つ必要がある可能性があることを顧客に通知したいとします。 ファイルテーマのfunctions.phpファイルに、次を追加します。

 add_action（ 'woocommerce_after_order_notes'、 'wc_add_message'）;
関数wc_add_message（）{
echo '配達には最大5営業日かかる場合があることに注意してください。';
}

2.5）チェックアウトページに料金を追加する

WooCommerceのチェックアウトページを編集して追加料金を追加する方法を見てみましょう。 ほとんどの場合、追加料金には2つのタイプがあります。

  • 修理済み
  • パーセンテージ

このセクションでは、両方をチェックアウトに追加する方法を説明します。

固定料金を追加する

固定料金の典型的な例は速達です。 速達に10ドルの固定料金を含めたいとしましょう。

以下のスクリプトを使用して、フィールド名のテキストを編集するだけです。 この例では、「追加料金」と呼び、注文に$ 10が追加されます。

 add_action （ 'woocommerce_cart_calculate_fees' 、 function （） {
 if （ is_admin （） && ！ defined （ 'DOING_AJAX' ）） {
 戻る;
 }
 WC （）->カート-> add_fee （ __ （ '追加料金' 、 'txtdomain' ）、 10 ）;
 }）;

このコードは、チェックアウト時に顧客の注文の合計に10ドルの固定料金を自動的に追加することに注意してください。

パーセンテージベースの料金を追加する

もう1つの方法は、パーセンテージベースの料金を請求することです。 これは、追加の税金がある場合、または特定の支払いゲートウェイの料金に追加の費用を追加したい場合に役立ちます。 注文の合計金額（商品+送料）に3％の手数料を追加するとします。

 add_action （ 'woocommerce_cart_calculate_fees' 、 function （） {
 if （ is_admin （） && ！ defined （ 'DOING_AJAX' ）） {
 戻る;
 }
 $パーセンテージ= 0.03 ;
 $ percentage_fee = （ WC （）->カート-> get_cart_contents_total （） + WC （）->カート-> get_shipping_total （）） * $ percentage ;
 WC （）->カート-> add_fee （ __ （ 'Tax' 、 'txtdomain' ）、 $ percentage_fee ）;
 }）;

このスクリプトは、チェックアウト時に買い物客の合計注文に3％の手数料を追加します。

ストアに手数料を追加するための詳細と例については、WooCommerceチェックアウトに手数料を追加する方法に関するガイドをご覧ください。

2.6）WooCommerceチェックアウトページでショートコードを使用する

WooCommerceショートコードは、柔軟性が高く、チェックアウトフックを使用してあらゆるタイプのコンテンツを追加できます。 ただし、ショートコードを印刷するだけでは機能しません。 代わりに、次のようにそれらを含める必要があります。

 echo do_shortcode（ '[ woocommerce_cart ]'）;

したがって、前の例で行ったのと同じ方法でフックを使用すると、次のようになります。

 add_action（ 'woocommerce_after_checkout_form'、 'quadlayers_checkout_shortcode'）;
関数quadlayers_checkout_shortcode（）{
echo do_shortcode（ '[ woocommerce_cart ]'）; }

このスクリプトは

[ woocommerce_cart ]

ショートコードを実行して、チェックアウトページの下部にWooCommerceカートを表示します。 WCチェックアウトページにショートコードサポートを追加する WordPress、WooCommerce、またはカスタムショートコードを使用できることに注意してください。 ただし、一部のショートコードはWooCommerceと互換性がないか、サポートされていない可能性があるため、使用する前に確認してください。 ショートコードの詳細については、WooCommerceの完全なショートコードガイドをご覧ください。

2.7）カスタムCSSを使用してWooCommerceチェックアウトページを編集します

最後に、CSSスタイルを編集して、WooCommerceストアのチェックアウトページをカスタマイズすることもできます。 これは、チェックアウトページ全体の再構築に何時間も費やす必要があるという意味ではありません。 いくつかの簡単な変更でさえ、チェックアウトを最適化するのに役立ちます。 たとえば、色、フォント、余白、または境界線を編集することで、コンバージョン率が大幅に向上することがわかります。

ここにはすべてのビジネスに有効な魔法の公式はありません。さまざまなスタイルをテストする必要がありますが、いくつか調整することで売り上げを伸ばすことができます。 たとえば、次の簡単なスクリプトを使用して、カスタムCSSスタイルを適用し、チェックアウトページの背景色を編集できます。

 add_action（ 'wp_head'、 'quadlayers_checkout_style'）;

関数quadlayers_checkout_style（）{
         if（is_checkout（）== true）{

                 echo '<style> body {background：#dfdfff！important;} <style>';
         }
}

さらに、このスクリプトをベースとして、HTMLタグ内に独自のCSSルールを追加して、サイトに最適なルックアンドフィールを与えることができます。 これは、CSSをチェックアウトページに適用するための簡単なハックです。 CSSの小さな部分を追加すると非常に便利です。 ただし、より広範なスタイルスクリプトが必要な場合は、次のようにwp_enqueue_style()ネイティブWPフックを使用して、WordPressの方法でCSSスタイルをエンキューする必要があります。

 add_action（ 'wp_enqueue_scripts'、 'quadlayers_enqueue_css'）;

関数quadlayers_enqueue_css（）{    
    wp_enqueue_style（ 'checkout_style'、
        get_stylesheet_directory_uri（）。 '/checkout-style.css'
    ）;
}

このようにして、すべてのカスタムCSSを別のファイル（この例ではcheckout-style.css ）に含めることができます。このファイルは、メインのstyle.cssファイルと同じレベルの子テーマフォルダーに保存されます。

これらは、いくつかの簡単なスクリプトを使用してWooCommerceのチェックアウトページをカスタマイズする方法のほんの一例です。 それらをベースにして、チェックアウトの他の側面を追加または編集するために遊んでみることをお勧めします。 さらに、コーディングを介してショップページを編集する場合は、WooCommerceショップページをプログラムでカスタマイズする方法についてのガイドを参照することをお勧めします。

ボーナス：チェックアウトフック

WooCommerceのチェックアウトページを編集するために使用できるチェックアウトフックはたくさんあります。 これらは主なもののいくつかです：

  • woocommerce_before_checkout_form
  • woocommerce_checkout_before_customer_details
  • woocommerce_checkout_billing
  • woocommerce_before_checkout_billing_form
  • woocommerce_checkout_shipping
  • woocommerce_before_order_notes
  • woocommerce_checkout_after_order_review
  • woocommerce_checkout_after_customer_details
  • woocommerce_review_order_before_cart_contents
  • woocommerce_review_order_before_shipping
  • woocommerce_review_order_after_order_total
  • woocommerce_checkout_order_review
  • woocommerce_review_order_before_submit
  • woocommerce_review_order_before_payment
  • woocommerce_review_order_after_submit
  • woocommerce_after_checkout_form

フックとその仕組みの詳細については、次のガイドを確認してください。

  • WooCommerceチェックアウトフックの使用方法
  • WooCommerceフックの使用方法–フルガイド

最後に、使用できるフックの完全なリストについては、このドキュメントページを参照してください。

結論

全体として、チェックアウトページを編集することで大きな違いが生まれ、WooCommerceストアを次のレベルに引き上げることができます。 少し変更を加えるだけでも、コンバージョン率を上げて売り上げを伸ばすことができます。 このガイドでは、チェックアウトを編集する2つの方法を紹介しました。

  • プラグイン付き
  • プログラムで（コーディングを介して）

コーディングスキルはないが、簡単で確実なソリューションが必要な場合は、 WooCommerce CheckoutManagerが最適です。 このフリーミアムプラグインには、チェックアウトページを編集するための強力な機能があり、使いやすいです。

一方、コーディングを介して独自のソリューションを作成し、プラグインをインストールしたくない場合は、プログラムでチェックアウトページを編集できます。 チェックアウトのさまざまな側面を編集するための5つの異なる例を示しましたが、オプションは無限です。 スクリプトをいじって、創造性を解き放ち、チェックアウトを最適化します。

チェックアウトプロセスを短縮してコンバージョン率を向上させたい場合は、WooCommerce用のクイック購入プラグインまたは直接チェックアウトリンクを使用することをお勧めします。

最後に、ストアのショップページを編集するためのさまざまなオプションを学習したい場合は、このステップバイステップガイドを参照することをお勧めします。

質問がある場合、またはサイトに適用したチェックアウトのカスタマイズを私たちと共有したいですか？ 以下のコメントセクションでお知らせください。 ご連絡をお待ちしております。