WooCommerceカートとチェックアウトを1つのページに配置する方法

公開: 2020-09-21

WooCommerceカートとチェックアウトを1つのページに配置

この簡単なチュートリアルでは、WooCommerceカートとチェックアウトを1ページに配置する方法に関するソリューションを共有します。これにより、チェックアウトプロセスが大幅に最適化され、別のページが読み込まれるのを待たないため、顧客は多くの時間を節約できます。このソリューションは、追加の手順を節約したい場合に使用できます。特に、注文ごとに約1つの製品が販売される高額商品の場合に使用できます。

WooCommerceカートと1ページのチェックアウト

定期的にオンラインで買い物をする顧客は、常に迅速なチェックアウトプロセスを必要としています。読み込み速度が遅い場合、または支払いを行う前に他のページにリダイレクトされる場合は、別のストアを選択できます。多くの人がオンラインストアにWooCommerceを使用する主な理由は、WooCommerceを変更できることです。

WooCommerceのデフォルトのチェックアウトプロセスには、カートとチェックアウト用に2つの別々のページがあります。 WooCommerceカートとチェックアウトを1つのページに配置して、ユーザーエクスペリエンスを向上させ、コンバージョンを増やす方法を説明したいと思います。

ショートコード、設定、およびPHPスニペットが混在しているため、これが究極のガイドになります。これらを使用して、これを機能させることができます。これは少し複雑に思えるかもしれませんが、私が共有しようとしている手順に熱心に従えば、思ったよりも簡単に感じるでしょう。

これを行う主な理由は、マルチステップチェックアウトプロセスでカートの放棄の問題が発生する可能性が高く、それによってWooCommerceストアの売上が向上するためです。

以上のことを踏まえて、カートとチェックアウトを同じページに配置するための簡単なステップバイステップガイドを次に示します。さらに、WooCommerceのテストと追跡を行って、コンバージョン率が優れているかどうかを確認することもできます。

WooCommerceカートとチェックアウトを1つのページに配置する手順

WordPressサイトにログインし、管理者ユーザーとしてダッシュボードにアクセスします。
[ダッシュボード]メニューから、[外観メニュー]> [テーマエディターメニュー]をクリックします。 テーマエディタページが開いたら、カートとチェックアウトを1つのページに配置する関数を追加するテーマ関数ファイルを探します。
phpファイルの最後に次のコードを追加します。これは、「woocommerce_cart」ショートコードをチェックアウトページに追加する必要があることを意味します。 変更を保存することを忘れないでください：

 / **

 *カートを表示@チェックアウトページのみ– WooCommerce

* /

add_action（ 'woocommerce_before_checkout_form'、 'njengah_cart_on_checkout_page_only'、5）;

関数njengah_cart_on_checkout_page_only（）{

if（is_wc_endpoint_url（ 'order-received'））return;

echo do_shortcode（ '[woocommerce_cart]'）;

}

結果を確認するには、チェックアウトページを更新するだけで、次のように表示されます。

カートページのレイアウトに精通している場合は、カートの合計セクションを知っているかもしれません。私が共有したこのきちんとしたコードは、同じページに2つのショートコードがあるため、合計を自動的に非表示にします。これは素晴らしい機能です。

ショートコードだけでうまくいきますが、少し調べてみると、カートページがスタンドアロンとして表示されていることがわかります。さらに、カートはチェックアウトページで空になり、WooCommerceはユーザーをカートページにリダイレクトし、空のカートメッセージを表示します。これは、これを変更するためにいくつかの調整を行う必要があることを意味します。カートページを完全に削除して、ユーザーに表示されないようにする必要があります。

WordPressダッシュボードで、[ WooCommerce]> [設定]をクリックします。 設定ページで[詳細設定]タブをクリックし、小さな「x」をクリックして、次のように変更を保存します。

その後、カートページを削除する必要があります。これは、もはや役に立たず、リダイレクトがすでに配置されており、カートテーブルがすでにチェックアウトページにあるためです。
ただし、ユーザーが直接アクセスした場合、またはカートテーブルが空になった場合に、空のチェックアウトページをリダイレクトする場合は、ここに小さなスニペットがあります。これは、空のチェックアウトページをホームページにリダイレクトするのに役立ちます。

[ダッシュボード]メニューから、[外観メニュー]> [テーマエディターメニュー]をクリックします。 テーマエディタページが開いたら、空のチェックアウトページをホームページにリダイレクトする関数を追加するテーマ関数ファイルを探します。

phpファイルの最後に次のコードを追加します。

 / **

*空のカート/チェックアウトをリダイレクトする-WooCommerce

* /




add_action（ 'template_redirect'、 'njengah_redirect_empty_cart_checkout_to_home'）;

関数njengah_redirect_empty_cart_checkout_to_home（）{

if（is_cart（）&& is_checkout（）&& 0 == WC（）-> cart-> get_cart_contents_count（）&&！is_wc_endpoint_url（ 'order-pay'）&&！is_wc_endpoint_url（ 'order-received'））{

wp_safe_redirect（home_url（））;

出口;

}

}

結果を確認するには、カート内のすべての製品を削除すると、次のようにホームページにリダイレクトされます。

結論

それだ！これで、チェックアウトプロセスが最適化され、WooCommerceストアでのカートの放棄の問題について心配する必要がなくなりました。最初のスニペットでは、「woocommerce_cart」ショートコードをチェックアウトページに追加して、カートテーブルを上に追加し、チェックアウトフォームを下に追加しました。ただし、ユーザーに表示されないように、カートページを完全に削除する必要があることに注意してください。

さらに、空のチェックアウトをリダイレクトするのに役立つボーナスPHPコードスニペットを追加しました。この短い投稿が、WooCommerceカートとチェックアウトを1ページに収める方法についての解決策を提供したことを願っています。

同様の記事

WooCommerceペイメントゲートウェイのアイコンを変更する方法
フッターにWooCommerce支払いアイコンを追加する方法[HTML]
WooCommerceチェックアウトページでPayPalアイコンを非表示にする方法
WooCommerceの商品画像のサイズを変更する方法
プラグインなしでWordPressページをリダイレクトする方法は？
WooCommerceストアフロントをステップバイステップでインストールする方法[完全ガイド]
WooCommerceのチェックアウトテキストに進むを変更します
WooCommerce製品をカテゴリ別に表示する方法
WooCommerce製品ページから数量フィールドを非表示または削除する
WooCommerceでカートの小計を非表示にする方法または小計の行を削除する方法
WooCommerceクーポンコードフィールドを非表示にする方法
特定のカテゴリの支払い方法を無効にする方法
WooCommerceでカートに追加ボタンを非表示にする方法
WooCommerceで支払い方法を取得する方法»コード例
WooCommerceでマイアカウントページを作成する方法
WooCommerceストアフロントテーマとは何ですか？ [回答済み]
WooCommerceにログインした後にカートにリダイレクトする方法
WooCommerceショップページのカートボタンテキストに追加を変更する方法
カートをスキップしてチェックアウトページにリダイレクトする方法WooCommerce
WooCommerceを変更する方法 'カートに追加'通知