WooCommerceの1ページのチェックアウトを作成する方法

公開: 2021-03-18

カートの放棄を減らし、コンバージョン率を上げたいですか？ このガイドでは、売り上げを伸ばすのに役立つプラグインの有無にかかわらず、WooCommerceの1ページのチェックアウトを作成する方法を学習します。

チェックアウトがオンラインストアにとって最も重要なページの1つであることは周知の事実です。 ただし、これは多くのユーザーがカートを放棄するステップでもあります。 最近の調査によると、買い物客の70％近くが、ある時点でカートを放棄し、21％がチェックアウト時に放棄しています。 どうして？ 通常、購入プロセスが長すぎるか複雑であるためです。

すべてのeコマースサイトで機能する単一のソリューションはありませんが、ほとんどの企業では1ページのチェックアウトページの方が効果的です。 そのため、WooCommerceストアの1ページのチェックアウトを作成すると、カートの放棄を減らし、売り上げを伸ばすことができます。

WooCommerceの1ページのチェックアウトとは何ですか？

1ページのチェックアウトでは、チェックアウトのすべてのフィールドが1ページに表示されます。 カートの内容、支払いの詳細、請求先住所と配送先住所、配送オプション、および画像、テキスト、追加の連絡フォームなどの他の情報を含めることができます。

WooCommerceの1ページのチェックアウトを作成する-QuadLayers
1ページのチェックアウトの例

1ページのチェックアウトの背後にある主な目標は、購入プロセスを短縮し、カートの放棄を減らすことです。 顧客がすべての情報を入力して1つのページに注文すると、プロセスが完了する可能性が高くなります。

1ページのチェックアウトの利点

1ページのチェックアウトの利点のいくつかは次のとおりです。

  • カートの放棄を減らすのに役立ちます
  • チェックアウトプロセスを短縮します
  • コンバージョン率を上げる
  • 買い物客は1ページに記入する必要のあるすべての情報を見ることができるので理解しやすい

1ページおよび複数ページのチェックアウトの詳細については、この完全ガイドを参照してください。

WooCommerceの1ページのチェックアウトを作成する方法

WooCommerceの1ページのチェックアウトを作成するにはさまざまな方法があります。

  1. プラグインを使用する
  2. プログラムで
  3. ページビルダーで
  4. WordPressダッシュボードから

このセクションでは、各オプションについて説明します。これにより、スキルとニーズに最適なオプションを選択できます。

1）プラグインを使用して1ページのチェックアウトを作成する

WooCommerceで1ページのチェックアウトを作成する最初のオプションは、プラグインを使用することです。 無料とプレミアムの両方で、そこに多くの1ページのチェックアウトプラグインがあります。 このデモでは、WooCommerce DirectCheckoutを使用します。 このプラグインは、チェックアウトプロセスを短縮し、コンバージョン率を高めるのに役立ちます。 1ページのチェックアウトを作成できるだけでなく、不要なチェックアウトフィールドを削除したり、クイック購入ボタンを追加したりすることもできます。

ダイレクトチェックアウトを使用した1ページのチェックアウト

Direct Checkoutには、基本機能を備えた無料バージョンと、19米ドル（1回払い）から始まるより多くの機能を備えた3つのプレミアムプランがあります。

まず、プラグインをダウンロードします。 このリンクまたはWordPressダッシュボードから実行できます。 アクティベートした後、 WooCommerce> DirectCheckoutに移動します。 ここでは、ユーザーをショップおよび単一の商品ページからチェックアウトページに直接リダイレクトするように設定します。

  • カートアラートに追加：「カートを表示」アラートを直接チェックアウトに置き換えます
  • カートリンクに追加：「カートを表示」リンクを直接チェックアウトに置き換えます
  • カートリダイレクト：これにより、[カートに追加]ボタンの動作を変更できます
  • カートのリダイレクト先：ユーザーがカートに何かを追加した後、ユーザーをリダイレクトする場所を選択できます。 この場合、それらをチェックアウトにリダイレクトします
  • カートのURLを置き換える：買い物客がカートに何かを追加した後、チェックアウトにリダイレクトするので、カートのURLをチェックアウトリンクに置き換えます

WooCommerceの1ページのチェックアウトを作成する-直接チェックアウト

これらの変更は、ショップ、単一商品、およびカテゴリのページに適用されることに注意してください。 さらに、カートを無効にするため、ユーザーをカートに誘導するリンクがないことを確認してください。

それでおしまい！ 顧客を商品ページとショップページから直接チェックアウトにリダイレクトすることで、チェックアウトプロセスを簡素化しました。 さらに、買い物客はチェックアウトページで注文を編集および確認できます。

無料版のWooCommerceDirect Checkoutを使用して1ページのチェックアウトを作成できますが、チェックアウトを次のレベルに引き上げる機能がさらに必要な場合は、プレミアムプランの一部をチェックアウトできます。

2）プログラムで1ページのチェックアウトを作成します

このセクションでは、いくつかのPHPスクリプトとCSSスタイルを使用して、プラグインで作成した1ページのチェックアウトに機能を追加します。 したがって、最初のセクションを確認し、プラグインをインストールしてセットアップし、単一ページのチェックアウトを作成することをお勧めします。 文字通り数分かかります。

それが終わったら、プログラムで1ページのチェックアウトページを完全にカスタマイズする方法を見てみましょう。

注：いくつかのコアテーマファイルを編集するので、開始する前に、サイトのバックアップを作成し、サイトに子テーマがインストールされていることを確認してください。 これらの子テーマプラグインのいずれかを使用することも、このガイドに従って独自に作成することもできます。

2.1）チェックアウトページに製品メタデータを追加します

ユーザーが購入している製品に関する情報を追加することから始めましょう。 チェックアウトページに商品の名前、サムネイル画像、説明を表示します。

カートページを無効にしたため、カートに商品を追加すると、買い物客はチェックアウトにリダイレクトされます。 カートページは非表示になっていますが、カートページを使用してすべての商品情報を取得できます。

これを行うには、子テーマのfunctions.phpファイルに次のコードを貼り付けるだけです。

 //製品のメタデータを表示するためのフック
add_action（ 'woocommerce_checkout_before_customer_details'、 'QuadLayers_product_meta'）;
 関数QuadLayers_product_meta（）{
 echo '<div class = "custom-product"> <h2>購入しようとしています';
 $ cart = WC（）-> cart-> get_cart（）;
 foreach（$ cart as $ cart_item_key => $ cart_item）{
 $ product = $ cart_item ['data'];
 echo $ product-> get_name（）。 "</ h2>";
 echo $ product-> get_image（）;
 echo "<span>"。$ product-> get_description（）。 "</ span>";
 }
 echo "<h3>以下のフォームに記入して注文を完了してください</ h3>";
 }

これをテストするには、任意の製品の購入ボタンをクリックし、チェックアウトページにリダイレクトされた後、次のようなものが表示されます。

チェックアウトページに製品メタデータを追加する

2.2）WooCommerceチェックアウトテンプレートファイルの上書き

チェックアウトページの印刷を担当するファイルはform-checkout-phpで、templatesフォルダーのWooCommerceプラグイン/ woocommerce / templates / checkoutにあります。

このファイルを上書きするには、WooCommerceプラグインから元のファイルをコピーして、子テーマのWooCommerceディレクトリ内のチェックアウトフォルダーに貼り付けます。

WCチェックアウトテンプレートファイルの上書き

デフォルトのWooCommerceチェックアウトでは、レイアウトは2列に設定されています。 請求、配送、および追加のフォームが最初の列に表示され、注文の詳細がもう1つの列に表示されます。

これを変更するには、フォームを囲む<div>要素のHTMLクラスをcol2-setからcol1-setに次のように編集します。

 <div class = "col1-set">

この簡単なエディションの後、すべてのフォームが次のように1つの全幅の列に表示されます。

全幅チェックアウトフォーム

次に、次のスクリプトを使用して、注文の詳細のタイトルを編集し、「注文」から「注文の確認」に変更します。

 <h3> <？php esc_html_e（ '注文レビュー'、 'woocommerce'）; ？> </ h3>

これらは、ここでできることのほんの数例です。 それをさらに進めて、独自のカスタマイズを行ってください。 ここでは、任意のネイティブWordPress関数を使用できます。 チェックアウトフックの詳細については、この記事を参照してください。

プログラムでWooCommerceテンプレートをカスタマイズする方法の詳細については、この完全ガイドをご覧ください。

2.3）チェックアウトページにカートを追加します

チェックアウトページでいくつかのショートコードを使用できるため、そこにカートを追加する場合は、次のようにWooCommerceカートのショートコードを使用できます。

 echo do_shortcode（ ' [ woocommerce_cart ] '）;

注文の詳細の直前にカートを表示するには、このPHPスクリプトを子テーマのfunctions.phpファイルに貼り付けます。

 add_action（ 'woocommerce_checkout_after_customer_details'、 'QuadLayers_add_cart_checkout'）;
 関数QuadLayers_add_cart_checkout（）{
       echo do_shortcode（ ' [ woocommerce_cart ] '）;
 }

これで、チェックアウトフォームの最後にユーザーが追加した商品が入ったカートが表示されます。

チェックアウトページにカートを追加

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

顧客が注文の詳細を確認するとき、彼らは支払い方法を選択し、「注文する」をクリックして購入を完了することができます。 このブロックは右側の列に表示されているため、バランスの取れたデザインを実現するために、左側にコンテンツを挿入します。

これは、 functions.phpファイルに貼り付けるカスタムコンテンツ関数であり、返品ポリシー、支払い方法、配信などの一部を説明しています。 それを自由にカスタマイズして、あなたの店に適応させてください：

 add_action（ 'woocommerce_checkout_before_order_review'、 'QuadLayers_add_column_before_order_review'）;
関数QuadLayers_add_column_before_order_review（）{    
    printf（ '<div> <h3>ご注文に関する詳細情報：</ h3>
 <p>当店でお買い上げいただきまして誠にありがとうございます。 ここにあなたが知る必要があるかもしれないいくつかの有用な情報があります</ p>
 <ul>
 <li>できる限り迅速に配送できるよう最善を尽くしますが、最適なサービスを維持するために、商品が到着するまでに最大2営業日かかる場合があります</ li>
 <li>返品ポリシーでは、購入後15日以内に交換を依頼することができます。 <ahref = "＃">ショップポリシーをここで読む</a> </ li>
 <li>クレジットカードでのお支払い方法を選択した場合、場合によっては配達が2日遅れる可能性があります</ li>
 <li>受け取ったものに満足できない場合は、払い戻しポリシーに従って払い戻しを選択することもできます</ li>
 <li>割引クーポンはありますか？ メモがある場合は、ここで入手して戻ってきて、適用できるようにしてください</ li>
 </ ul>
 </ div> '、' woocommerce '）;
}

そしてこれが最終結果です：

チェックアウトページにカスタムコンテンツを追加する

2.5）チェックアウトページにCSSスタイルを追加する

function.phpファイルに、 custom-productと呼ばれる独自のクラスが追加されていることがわかります。 このクラスを使用して、いくつかのCSSスクリプトでコンテンツのスタイルを設定します。 さらに、カスタムクラスを使用せずに、新しい1ページのチェックアウトのデザインに最終的な仕上げを加えることができます。

これは、このチュートリアルで使用した完全なCSSスクリプトです。 子テーマのstyle.cssファイルにコピーして貼り付けるだけです。

 / *請求フォームのタイトルを非表示にします* /
.woocommerce-billing-fields> h3：nth-​​child（1）{
    display：none;
}
/ *購入しようとしています... * /
.custom-product> h2：nth-​​child（1）{
    text-align：center;
}
/* 画像 */
img.attachment-woocommerce_thumbnail：nth-​​child（2）{
    マージン：自動;
}
/* 説明 */
.custom-product> span：nth-​​child（3）{
    マージン：自動;
    幅：50％;
    表示ブロック;
}
/ *注文を完了します... * /
.custom-product> h3：nth-​​child（4）{
    text-align：center;
    マージン：25px 0 25px 0;
}
/* 詳しくは.. */
.custom-product> div：nth-​​child（8）{
    float：left;
    幅：47％;
}
＃お客様情報{
    margin-bottom：40px;
}

注：このデモでは、ストアフロントテーマを使用しているため、別のテーマを使用する場合、または独自のカスタマイズを追加した場合は、CSSセレクターを調整する必要があります。

その後、すべてがうまくいけば、チェックアウトページに次のように表示されます。

1ページのチェックアウトサンプルページ

それでおしまい！ 完全にカスタマイズされたWooCommerceの1ページのチェックアウトをプログラムで作成しました。

3）ページビルダーで1ページのチェックアウトを作成します

WooCommerceで1ページのチェックアウトを作成およびカスタマイズするためのもう1つの興味深いオプションは、ページビルダーを使用することです。 そこにいくつかのページビルダーがあります。 このデモでは、SiteOriginを使用します。 100万を超えるアクティブなインストールがあり、そのシンプルさと効率性から、これは最も人気のあるページビルダーの1つです。

プロセスはほとんどのページビルダーで類似しているため、使用するページビルダーに関係なく、問題なくガイドに従うことができるはずです。

まず、WordPressリポジトリからSite Originをダウンロードしてインストールし、Webサイトでアクティブ化します。 次に、エディターでチェックアウトページを開き、名前を追加します。 これを1ページのチェックアウトと呼びます。

ご覧のとおり、チェックアウトページはGutenbergブロックに配置されたWooCommerceショートコードです。 バックエンドでGutenbergブロックを無効にしている場合は、同じショートコードが古いテキストエディタに表示されます。 ショートコードブロックを削除して、ページビルダーブロックを追加するだけです。

これで、ページビルダーを使用して完全にカスタマイズされた1ページのチェックアウトの作成を開始できます。 列に任意のウィジェットを追加して、目的のレイアウトに設定できます。 を挿入する必要があることに注意してください

[ woocommerce_checkout ]

もう一度ショートコードします。そうしないと機能しません。

そして、ここに最良の部分があります。 ページビルダーレイアウトで使用可能なウィジェットまたはモジュールのいずれかを使用することもできます。 さらに、他のショートコードを含めることができます。 カートと「マイアカウント」のものは非常に一般的です。

これは基本的な例であるため、各ウィジェットを調整し、必要に応じてチェックアウトページをカスタマイズする必要があります。 また、各ページビルダーの動作は異なるため、プロセスは似ていますが、いくつかの調整が必要になる場合があることに注意してください。 一般的な推奨事項として、通常、全幅でサイドバーのないテンプレートが最適です。

4）グーテンベルクブロックエディタを使用して1ページのチェックアウトを作成します

同様に、Gutenbergブロックエディターを使用して、WooCommerceの1ページのチェックアウトをカスタマイズできます。 このために、WordPressダッシュボードでチェックアウトページを開くと、チェックアウトショートコードのブロックが表示されます。 [ブロックの追加]ボタン（ + ）をクリックし、[列]を選択して、このページにさらにブロックを追加しましょう。

WooCommerceの1ページのチェックアウトを作成する-Gutenmberg

ここでは、利用可能なブロックとショートコードのいずれかを使用して、チェックアウトページを完全にカスタマイズできます。 または、コーディングスキルがある場合は、コードブロックを使用して独自のHTMLコードを挿入することでチェックアウトを編集することもできます。 このデモでは、カートとアカウントのショートコードを2列に追加したため、次のようになります。

このようにして、Gutenbergブロックエディターを使用してWooCommerceで1ページのチェックアウトを簡単に作成できます。

最後のヒント

  • 1ページのチェックアウトを作成するときは、チェックアウトの主な目的である顧客ができるだけ簡単に注文できるようにすることを常に念頭に置いてください。 この目的からユーザーの注意をそらすようなコンテンツは避けてください。
  • 「注文する」ボタンを押す前にユーザーが確認する必要のあるすべての情報は、チェックアウトページからすべてを実行できるように、同じページで利用できる必要があります。 必要な情報をすべて含め、ユーザーを別のURLに誘導するリンクを挿入しないようにします。
  • ユーザーは、購入するときに長いコンテンツページが好きではありません。 物事をシンプルかつクリーンに保ち、効率的でプロフェッショナルなチェックアウトページの実現に集中します

結論

全体として、1ページのチェックアウトは、購入プロセスを短縮し、カートの放棄を減らし、コンバージョン率を高めるのに役立ちます。 場合によっては、複数ページのチェックアウトの方が効果的かもしれませんが、ほとんどの店舗では、チェックアウトが短いほど効果的です。

このガイドでは、WooCommerceで1ページのチェックアウトを作成するさまざまな方法を見てきました。

  • プラグイン付き
  • プログラムで
  • ページビルダーで
  • グーテンベルクブロックエディタの使用

迅速で効率的なソリューションが必要な場合は、ダイレクトチェックアウトを使用するのが最善の選択です。 このフリーミアムプラグインを使用すると、数分で1ページのチェックアウトを作成できます。また、チェックアウトを改善して売り上げを伸ばすのに役立ついくつかの機能も含まれています。 たとえば、チェックアウトフィールドを削除したり、クイック購入ボタンやクイック表示ボタンを追加したりできます。 追加のプラグインをインストールせずにページビルダーを使用する場合は、Gutenbergブロックエディターまたはページビルダーを使用してチェックアウトページを作成できます。

一方、コーディングスキルがある場合は、チェックアウトページを編集するためのオプションが増えます。 Direct Checkoutプラグインを使用してチェックアウトを作成した後、PHPおよびCSSスクリプトを追加して、チェックアウトを完全にカスタマイズできます。 この記事では、いくつかの例を見てきましたが、できることはもっとたくさんあります。 それらをベースとして自由に使用し、自分に最適なものを見つけるために遊んでください。

WooCommerceで1ページのチェックアウトを作成するためのお気に入りの方法はどれですか？ 他に含めるべきものを知っていますか？ 以下のコメントセクションでお知らせください。