WooCommerce サンキューページについて

公開: 2022-09-19

どのようなビジネスにおいても、お客様が商品を購入したら、必ず「ありがとう」と言うことが重要です。 E コマースでは、サンキュー ページを使用してこれを容易にします。

E コマースのサンキュー ページは、顧客とつながることができ、長期的には売り上げの増加に役立つため、非常に重要です。 これは、購入に満足している顧客が、将来そのストアから別の購入を実行したり、他の潜在的な顧客に製品を推奨したりする可能性が高いためです。

この記事では、WooCommerce のサンキュー ページと、ページをカスタマイズする方法について説明します。

目次

WooCommerce ありがとうページとは

デフォルトの WooCommerce ありがとうページのカスタマイズ

  1. デフォルトの WooCommerce ありがとうページをカスタマイズすることの重要性
  2. WooCommerce ありがとうページをカスタマイズする方法
    • プラグインの使用
    • フックの使用
    • 手動テンプレートのオーバーライド

結論

WooCommerce ありがとうページとは

WooCommerce ありがとうページは、ウェブサイト内で注文した直後に顧客に表示されるページです。 「購入確認ページ」または「注文受付ページ」とも呼ばれます。

お礼ページにアクセスすると、URL の形式は yourdomain/checkout/order-received/2554/?key=wc_order_WCS88FJQkkjI9 になります。

以下は、ページのサンプル スクリーンショットです。

上のスクリーンショットに示すように、サンキュー ページ内にはさまざまなコンポーネントがあります。 これらのいくつかは次のとおりです。

お礼のメッセージ: これは、商品を購入してくださったお客様への感謝のメッセージです。 上のスクリーンショットに見られるように、次のように示されています。 ご注文は受信されました。"

一般的な注文情報: このセクションには、主に特定の注文に関する一般的な詳細が含まれています。 これらの詳細には、注文番号、日付、合計、購入に使用された電子メール、および支払い方法が含まれます。

注文の詳細: このセクションには、注文の詳細が表形式で表示されます。 これらの詳細には、製品名、製品価格、小計、合計価格、支払い方法、有効な場合の配送料が含まれます。

住所: このセクションには、顧客への住所の詳細が含まれます (有効な場合は請求先住所と配送先住所)。

デフォルトの WooCommerce ありがとうページのカスタマイズ

上記のコンポーネントから、購入プロセスで非常に重要であることを考慮すると、ありがとうページにはまだ改善の余地があることがわかります。

このセクションでは、デフォルトの WooCommerce サンキュー ページをカスタマイズすることの重要性と、それをカスタマイズする方法について説明します。

デフォルトの WooCommerce ありがとうページをカスタマイズすることの重要性

顧客が製品を購入し、ありがとうページに到達したら、これを購入プロセスの最後のステップと見なすべきではありません。 顧客とのエンゲージメントを高め、信頼を植え付けるために、実際にはさらに多くのことを行うことができます.

したがって、ページはより多くの機能を提供できます。 これらのいくつかは次のとおりです。

  1. 優れたオンボーディング エクスペリエンスの作成: 必要に応じて、製品を購入したばかりの顧客にオンボーディング資料を共有するために、サンキュー ページを使用できます。 このような資料には、ドキュメント、製品ビデオ、および最終顧客に役立つその他の資料が含まれる場合があります。
    この情報により、顧客は製品の使用方法を理解するのにほとんど時間を費やすことなく、製品の使用方法を詳しく知ることができます。
  2. 優れた販売後のエクスペリエンスの作成: 適切に設計およびカスタマイズされたサンキュー ページを配置すると、デフォルトのサンキュー ページと比較して、顧客に大きな印象を残します。 これは、Web サイト内での優れた顧客体験につながります。
  3. 信頼を生み出す: 顧客が特に新製品を購入すると、その製品が期待どおりに機能するかどうか疑問に思うことがあります。 ただし、サンキュー ページが肯定的なレビューや証言などのコンテンツを含むようにカスタマイズされている場合、これらはそのような顧客に安心感を与え、そのような疑問を解消します。 顧客は、これに基づいて Web サイト内でさらにアクションを実行する可能性もあります。
  4. マーケティング戦略として機能する: たとえば、顧客がソーシャル シェア ボタンを使用して Thank you に到着し、そのような顧客が製品をすでに信頼している場合、利用可能なソーシャル サイト内で購入を共有する可能性があります。 これらのシェアは、潜在的な顧客をあなたのウェブサイトに呼び込む可能性があります。
    ページにオファーを表示して、他の製品を販売することもできます。
  5. 独自性: 適切に設計されたサンキュー ページは、Web サイトを際立たせ、全体的に異なるエクスペリエンスを顧客にもたらします。

WooCommerce ありがとうページをカスタマイズする方法

WooCommerce は、サンキュー ページの幅広いカスタマイズ オプションを提供していません。 ただし、ページをカスタマイズする方法はいくつかあります。 このセクションでは、サンキュー ページをカスタマイズする方法をいくつか見ていきます。

プラグインの使用

WooCommerce ありがとうページをカスタマイズするために使用できるプラグインが多数あります。 これらのいくつかは次のとおりです。

  • カスタムサンキューページ拡張機能
  • NextMove Lite – WooCommerce のサンキューページ
  • WooCommerceのYITHカスタムサンキューページ

このガイドでは、無料の NextMove Lite – Thank You Page for WooCommerce プラグインであるプラグインの 1 つを調べます。

NextMove Lite のインストール – WooCommerce のサンキュー ページ

プラグインをインストールするには、[プラグイン] > [新規追加] セクションに移動し、「NextMove Lite – WooCommerce のサンキュー ページ」を検索します。

次に、プラグインの横にある「今すぐインストール」ボタンをクリックします。

これが完了したら、プラグインを有効にします。

デフォルトの NextMove ありがとうページ

NextMove プラグインを有効にすると、プラグインはデフォルトのサンキュー ページを生成します。 これはWooCommerce > 設定 > NextMove Lite: XLPluginsセクションにあります。

このサンキュー ページを好みに合わせてカスタマイズしたり、新しいページを追加したりできます。 新しいサンキュー ページを追加するには、以下のセクションに示されている [新規追加] ボタンをクリックする必要があります。

ありがとうページのカスタマイザー

以下のスクリーンショットに示すように、最初に「コンポーネント」リンクをクリックすると、サンキューページのカスタマイザーにアクセスできます。

そうすると、ありがとうページのカスタマイザ セクションにリダイレクトされます。

上のスクリーンショットに見られるように、カスタマイザーには 4 つのコア セクションが含まれています。 これらは：

  • コンポーネントの選択: お礼ページ内で使用できるさまざまなモジュールまたはコンポーネントが含まれています。 このセクション内で、目的のコンポーネントを選択できます。
  • コンポーネントの編集: 選択したコンポーネントをカスタマイズできます。 ここでは、見出しなどのさまざまなコンテンツを変更したり、さまざまなスタイルを適用したりできます。
  • レイアウトの選択: このセクションでは、サンキュー ページの希望のレイアウトを定義できます。 1 列または 2 列のレイアウトを選択できます。
  • コンポーネントの配置: コンポーネントの配置セクションでは、サンキュー ページ内にあるさまざまなコンポーネントを目的の順序にドラッグ アンド ドロップできます。

お礼ページのカスタマイズ

カスタマイズ方法の例として、この例では、新しいサンキュー ページを設定し、それにコンポーネントを追加します。

まず、「新規追加」ボタンをクリックします

次の画面で、サンキュー ページのタイトルを指定し、次の図のようにページの優先度を 1 に設定します。

これが完了したら、ページを公開します。 その後、Thank You ページのカスタマイザ セクションにリダイレクトされます。 ここで、いくつかのデフォルト コンポーネントがページに追加されていることがわかります。

これらは、注文確認、顧客の詳細、および注文の詳細です。 これらのコンポーネントのさまざまな側面を好みに合わせてカスタマイズできます。

それぞれをカスタマイズするには、「コンポーネントの配置」セクションから特定のコンポーネントをクリックする必要があります。 コンポーネントは、さまざまな側面を変更できる「コンポーネントの編集」セクション内にレンダリングされます。

この場合、注文確認のために、見出しと小見出しのフォント サイズ、色をカスタマイズし、小見出しを変更します。

顧客の詳細コンポーネントについては、以下に示すように境界線と背景を変更します。

注文の詳細セクションに関しては、以下のように見出しとレイアウトをカスタマイズします。

上記のコンポーネントに加えて、さらに 2 つのコンポーネントを追加します。

i) 画像テキスト

このコンポーネントに関しては、画像とプロモーション テキストを追加して、顧客が別の製品を購入するよう促します。

コンポーネント内では、下のスクリーンショットに示すように、「買い物を続ける」ボタンの表示も有効にします。

ii) ビデオ

ページ内には、店舗の製品に関する詳細情報を提供するビデオも含まれます。 ビデオ ソース セクション内に Youtube または Vimeo ビデオを含めることができます。

上記が実行されると、レイアウトを変更して「2列レイアウト」を選択できます。 次に、2 つの列内で好みに応じてコンポーネントをグループ化できます。

その後、サンキュー ページをプレビューして、変更が反映されていることを確認できます。 以下は、上記で実行した変更のサンプル ビューです。

フックの使用

ありがとうページをカスタマイズするために使用できる WooCommerce フックがいくつかあります。 そのようなフックの完全なリストは次のとおりです: Action and Filter Hook Reference 。

これらのコードのカスタマイズは、子テーマ内の functions.php ファイルに追加する必要があります。

たとえば、受注メッセージを変更するには、次のコードを追加できます。

 add_filter('woocommerce_thankyou_order_received_text', 'alter_order_received_text', 10, 2 ); function alter_order_received_text( $newstr, $neworder ) { $new_text = 'Thank You For Your Order. We are glad to have you as our customer.'; return $new_text; }

以下は、出力例の図です。

手動テンプレートのオーバーライド

WooCommerce のサンキュー ページは、子テーマ内のテンプレート オーバーライドによってカスタマイズすることもできます。

これを達成するには、次のことを行う必要があります。

i) woocommerce > templates > checkout ディレクトリに移動し、 thankyou.phpファイルをコピーします。

ii) ファイルを子テーマ内の woocommerce > checkout ディレクトリ パスに貼り付けます。 以下は、これに関する図です。

これが完了したら、thankyou.php コードを好みに合わせてカスタマイズできます。

たとえば、サンキュー ページ内に注文日を含めるには、thankyou.php ファイル内に次のコードを追加する必要があります。

 <p class="woocommerce-order-date"> <?php _e( 'Order Date:', 'woocommerce' ); ?> <strong><?php echo date_i18n( get_option( 'date_format' ), $order->get_date_created() ); ?></strong> </p>

したがって、ファイル内の完全なコードは、たとえば次のようになります。

 <?php /** * Thankyou page * * This template can be overridden by copying it to yourtheme/woocommerce/checkout/thankyou.php. * * HOWEVER, on occasion WooCommerce will need to update template files and you * (the theme developer) will need to copy the new files to your theme to * maintain compatibility. We try to do this as little as possible, but it does * happen. When this occurs the version of the template file will be bumped and * the readme will list any important changes. * * @see https://docs.woocommerce.com/document/template-structure/ * @package WooCommerce\Templates * @version 3.7.0 */ defined( 'ABSPATH' ) || exit; ?> <div class="woocommerce-order"> <?php if ( $order ) : do_action( 'woocommerce_before_thankyou', $order->get_id() ); ?> <?php if ( $order->has_status( 'failed' ) ) : ?> <p class="woocommerce-notice woocommerce-notice--error woocommerce-thankyou-order-failed"><?php esc_html_e( 'Unfortunately your order cannot be processed as the originating bank/merchant has declined your transaction. Please attempt your purchase again.', 'woocommerce' ); ?></p> <p class="woocommerce-notice woocommerce-notice--error woocommerce-thankyou-order-failed-actions"> <a href="<?php echo esc_url( $order->get_checkout_payment_url() ); ?>" class="button pay"><?php esc_html_e( 'Pay', 'woocommerce' ); ?></a> <?php if ( is_user_logged_in() ) : ?> <a href="<?php echo esc_url( wc_get_page_permalink( 'myaccount' ) ); ?>" class="button pay"><?php esc_html_e( 'My account', 'woocommerce' ); ?></a> <?php endif; ?> </p> <?php else : ?> <p class="woocommerce-notice woocommerce-notice--success woocommerce-thankyou-order-received"><?php echo apply_filters( 'woocommerce_thankyou_order_received_text', esc_html__( 'Thank you. Your order has been received now.', 'woocommerce' ), $order ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></p> <p class="woocommerce-order-date"> <?php _e( 'Order Date:', 'woocommerce' ); ?> <strong><?php echo date_i18n( get_option( 'date_format' ), $order->get_date_created() ); ?></strong> </p> <?php endif; ?> <?php do_action( 'woocommerce_thankyou_' . $order->get_payment_method(), $order->get_id() ); ?> <?php do_action( 'woocommerce_thankyou', $order->get_id() ); ?> <?php else : ?> <p class="woocommerce-notice woocommerce-notice--success woocommerce-thankyou-order-received"><?php echo apply_filters( 'woocommerce_thankyou_order_received_text', esc_html__( 'Thank you. Your order has been received now.', 'woocommerce' ), null ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></p> <?php endif; ?> </div>

結論

製品を購入した後に顧客に「ありがとう」と言うと、全体的な顧客体験が向上します。 WooCommerce は、ありがとうページを提供することでこれを可能にします。 ただし、そこにはあまり詳細が組み込まれていません。

このガイドでは、デフォルトの WooCommerce ありがとうページをカスタマイズする方法を検討しました。 ありがとうページをすばやく簡単にカスタマイズするには、プラグイン アプローチを使用できます。 一方、コードに戸惑わない場合は、他の 2 つの方法のいずれかを使用できます。

ご質問やご意見がございましたら、下のコメント セクションでお気軽に共有してください。