チェックアウト後にWooCommerceリダイレクトを設定する方法

公開: 2021-05-11

チェックアウト後にWooCommerceリダイレクトを設定する 顧客をカスタムのありがとうページにリダイレクトしますか？ 顧客がWooCommerceで注文を完了すると、[受注済み]ページにリダイレクトされます。 このページには、非常に重要な役割があります。 この投稿では、チェックアウト後にWooCommerceリダイレクトを設定する方法を段階的に説明し、注文受付ページをカスタマイズします。

ただし、ページは実際には配信されません。 カスタムのThankYouページにリダイレクトすることをお勧めします。

ありがとうページをカスタマイズすると、顧客にユニークなショッピング体験が生まれます。 そのため、特定の製品に合わせてカスタマイズされた、美しくデザインされたありがとうページを用意することが重要です。

また、競合他社と比較して、ストアをユニークにするのにも大いに役立ちます。 このページでは、アフターサービスを含めてサポートの詳細を管理することもできます。

これは、オンラインストアで売り上げを伸ばし、トラフィックを増やしたい場合に不可欠です。

この簡単なチュートリアルの終わりまでに、プログラムで顧客をカスタムページにリダイレクトできるようになります。 また、新しいありがとうページを作成し、既存のページを上書きするためのコードスニペットをいくつか共有します。

このチュートリアルの主な目的は、コードスニペットを使用したり、WooCommerceテンプレートを上書きしたりすることで、ページを非常に簡単にカスタマイズできることを開発者が理解できるようにすることです。

ユーザーをカスタムのありがとうページにリダイレクトするには何が必要ですか？

先に進む前に、子テーマも作成する必要があります。 これにより、更新中に変更が失われることがなくなります。

このチュートリアルでは、カスタムPHPコードスニペットを使用することに注意してください。 作業を簡単にするために必要なすべての手順を説明しました。

このチュートリアルでは、WordPressが正常にインストールされており、その上にWooCommerceが追加されていることも前提としています。

これをどのように達成できるか見てみましょう。

1.顧客をカスタムのありがとうページにリダイレクトする

このセクションでは、カスタムPHPコードスニペットを使用して、ユーザーが購入を完了した後にウェルカムページにリダイレクトします。

ウェルカムページは、製品をアップセルしたり、紹介を含めたり、製品について顧客を教育したりするための優れた方法です。 このページに割引やクーポンを含めて、新規で忠実な顧客を引き付けることもできます。

a）WooCommerceでのチェックアウト後に顧客をリダイレクトする手順

ユーザーをカスタムページにリダイレクトするために従う必要のある手順は次のとおりです。

  1. WordPressサイトにログインし、管理者ユーザーとしてダッシュボードにアクセスします。
  2. [ダッシュボード]メニューから、[外観メニュー]> [テーマエディターメニュー]をクリックします。 テーマエディタページが開いたら、チェックアウト後に顧客をリダイレクトする関数を追加するテーマ関数ファイルを探します。
  3. 次のコードをphpファイルに追加します。 
add_action( 'woocommerce_thankyou', 'njengah_redirectcustom');

function njengah_redirectcustom( $order_id ){

 $order = wc_get_order( $order_id );

 $url = 'https://yoursite.com/custom-url';

if ( ! $order->has_status( 'failed' ) ) {

 wp_safe_redirect( $url );

exit;

 }

}
  1. これが結果です： カスタムありがとうページ

コードのしくみ

コードスニペットは、ユーザーが購入を完了した後、顧客をカスタムページにリダイレクトします。

ユーザーが購入を完了したかどうかを確認し、URLにリダイレクトします。 このコードが機能するように、適切なページのURLを置き換えることを忘れないでください。

カスタムページは、サイトのユーザーエクスペリエンスを向上させるために美しくデザインする必要があります。

b）WooCommerceテンプレートを上書きしてWooCommerceありがとうページを設定する

WooCommerceテンプレートを上書きすることで、カスタムのサンキューページを簡単に設定できます。 テンプレートリダイレクトフックと、リダイレクトURLを使用したコールバック関数を使用する必要があります。

従う必要のある簡単な手順は次のとおりです。

  1. 最初に、カスタムリダイレクトページを作成する前に、ユーザーがチェックアウトページ、注文ページ、または注文受領ページにいるかどうかを確認します。 template_redirect（）関数を使用します。 その後、以下に示すようにtemplate_redirectアクションフックを追加します。
 add_action('template_redirect', 'your_callback_function');
  1. 次のステップは、上記のテンプレートリダイレクトフックで参照したコールバック関数を作成することです。 ただし、コールバック関数とフックの名前は一致している必要があることに注意してください。
  2. チェックアウトが成功した後にユーザーをリダイレクトするページを追加するには、コールバック関数でwp_redirect（）関数を使用する必要があります。 wp_redirect関数の後に出口を追加することをお勧めします。 これは、リダイレクトの問題を回避するのに役立ちます。
  3. コードを挿入するには、[外観]メニュー> [テーマエディターメニュー]をクリックします。 テーマエディタページが開いたら、関数を追加するテーマ関数ファイルを探します。
  4. 変更を保存するか、テーマのfunctions.phpまたはプラグインファイルを更新します。

それがあなたがする必要があるすべてです。 これで、ユーザーが購入を完了した後、優先ページへのリダイレクトが正常に作成されました。

2.WooCommerceのありがとうページをフィルターでカスタマイズする

カスタムのありがとうページを作成する代わりに、既存のページをカスタマイズできます。 これを実現するために、フィルターフックとアクションフックを使用します。

アクションフックを使用すると、さまざまなポイントにカスタムコードを挿入できます。 一方、フィルターフックを使用すると、変数を操作して返すことができ、変数は渡されます。

このセクションでは、フィルターを使用して、タイトルを変更し、タイトルをパーソナライズし、注文情報の前にテキストを変更します。

また、調査フォームを作成して、顧客から追加情報を収集する方法についても説明します。 また、フォームのAJAXリクエストを送信および処理する方法についても説明します。

a）ありがとうページのタイトルを変更する

WooCommerceは、includes / wc-conditional-functions.phpファイルで関数is_order_received_pa​​ge（）を提供します。 この関数を使用してページタイトルを変更します

従う必要のある手順は次のとおりです。

  1. WordPressサイトにログインし、管理者ユーザーとしてダッシュボードにアクセスします。
  2. [ダッシュボード]メニューから、[外観メニュー]> [テーマエディターメニュー]をクリックします。 テーマエディタページが開いたら、ありがとうページのタイトルを変更する関数を追加するテーマ関数ファイルを探します。
  3. 次のコードをphpファイルに追加します。 
add_filter( 'woocommerce_endpoint_order-received_title', 'njengah_thank_you_title' );

function njengah_thank_you_title( $old_title ){

return 'You\'re awesome!';

}
  1. これが結果です： タイトルを変更する

b）タイトルをパーソナライズする

「ありがとう」ページのタイトルを強化できます。 顧客の名前などの詳細を追加できます。

これを実現するには、次の手順に従う必要があります。

  1. WordPressサイトにログインし、管理者ユーザーとしてダッシュボードにアクセスします。
  2. [ダッシュボード]メニューから、[外観メニュー]> [テーマエディターメニュー]をクリックします。 テーマエディタページが開いたら、ありがとうページのタイトルをパーソナライズする関数を追加するテーマ関数ファイルを探します。
  3. 次のコードをphpファイルに追加します。 
add_filter( 'woocommerce_endpoint_order-received_title', 'njengah_personalize_order_received_title', 10, 2 );

function njengah_personalize_order_received_title( $title, $id ) {

if ( is_order_received_page() && get_the_ID() === $id ) {

global $wp;

// Get the order. Line 9 to 17 are present in order_received() in includes/shortcodes/class-wc-shortcode-checkout.php file

$order_id  = apply_filters( 'woocommerce_thankyou_order_id', absint( $wp->query_vars['order-received'] ) );

$order_key = apply_filters( 'woocommerce_thankyou_order_key', empty( $_GET['key'] ) ? '' : wc_clean( $_GET['key'] ) );

if ( $order_id > 0 ) {

$order = wc_get_order( $order_id );

if ( $order->get_order_key() != $order_key ) {

$order = false;

}

}

if ( isset ( $order ) ) {

//$title = sprintf( "You are awesome, %s!", esc_html( $order->billing_first_name ) ); // use this for WooCommerce versions older then v2.7

$title = sprintf( "You are awesome, %s!", esc_html( $order->get_billing_first_name() ) );

}

}

return $title;

}
  1. これが結果です： パーソナライズ

c）注文情報の前にテキストを変更する

デフォルトでは、注文情報の前のテキストは「ありがとうございます。 ご注文は受信されました。" ありがとうページにテキストが表示されます。 これは、ファイルtemplates / checkout /thankyou.phpから取得されます。

WooCommerceには、このテキストを変更できるフィルターがあります：woocommerce_thankyou_order_received_text。

これを変更するには、次の手順に従う必要があります。

  1. WordPressサイトにログインし、管理者ユーザーとしてダッシュボードにアクセスします。
  2. [ダッシュボード]メニューから、[外観メニュー]> [テーマエディターメニュー]をクリックします。 テーマエディタページが開いたら、ありがとうページのタイトルをパーソナライズする関数を追加するテーマ関数ファイルを探します。
  3. 次のコードをphpファイルに追加します。 
add_filter('woocommerce_thankyou_order_received_text', 'njengah_change_order_received_text', 10, 2 );

function njengah_change_order_received_text( $str, $order ) {

$new_str = $str . ' We have emailed the purchase receipt to you.';

return $new_str;

}
  1. ここに独自のテキストを追加できることを忘れないでください。 これが結果です： タイトルの後のテキスト
  2. または、顧客にフォームをダウンロードしてもらいたい場合は、このときに手順を追加できます。 あなたは彼らが彼らの製品をダウンロードすることができるカスタムリンクを彼らに提供することができます。 これを実現するには、functions.phpファイルに次のコードを追加します。 
add_filter('woocommerce_thankyou_order_received_text', 'njengah_change_order_received_text', 10, 2 );

function njengah_change_order_received_text( $str, $order ) {

$new_str = 'We have emailed the purchase receipt to you. Please make sure to fill <a href="http://example.com/some-form.pdf">this form</a> before attending the event';

return $new_str;

}
  1. これが結果です： ダウンロードリンク

3.追加の詳細を収集する

ユーザーから追加情報を収集することが可能です。 たとえば、ユーザーエクスペリエンスを評価するように依頼できます。

これを実現したい場合は、フォームを作成する必要があります。 また、バックエンドに登録するには、AJAXリクエストを送信して処理する必要があります。

実行する必要のある手順を見てみましょう。

  1. WordPressサイトにログインし、管理者ユーザーとしてダッシュボードにアクセスします。
  2. [ダッシュボード]メニューから、[外観メニュー]> [テーマエディターメニュー]をクリックします。 テーマエディタページが開いたら、テーマ関数ファイルを探します/

3.まず、フォームを追加する必要があります。 タイトルの直後に表示したい場合は、woocommerce_thankyou_order_received_textフックを使用する必要があります。

  1. 次のコードスニペットを追加して、調査フォームを追加します。 
add_action( 'woocommerce_thankyou', 'njengah_poll_form', 4 );

function njengah_poll_form( $order_id ) {

echo '<h2>What do you think about my shop?</h2>;

<form id="thankyou_form"&gt;

<label><input type="radio" name="like" value="superb"&gt; Superb</label>

<label><input type="radio" name="like" value="good enough"&gt; Good enough</label>

<label><input type="radio" name="like" value="could be better"&gt; Could be better</label>;

<input type="hidden" name="action" value="collect_feedback" />

<input type="hidden" name="order_id" value="' . $order_id . '" />

' . wp_nonce_field( 'thankyou'.$order_id, 'thankyou_nonce', true, false ) . '

</form>';

}
  1. 次のステップは、AJAXリクエストを送信することです。 これを行うには、同じファイルに次のコードを追加します。

add_action( 'wp_footer', 'njengah_send_thankyou_ajax' );

function njengah_send_thankyou_ajax(){

// exit if we are not on the Thank You page

if( !is_wc_endpoint_url( 'order-received' ) ) return;

echo "&lt;script&gt;

jQuery( function( $ ) {

$('input[type=radio][name=like]').change(function() {

$.ajax({

url: '" . admin_url('admin-ajax.php') . "',

type: 'POST',

data: $('#thankyou_form').serialize(),

beforeSend : function( xhr ){

$('#thankyou_form').html('Thank you! You feedback has been send!');

},

success : function( data ){

console.log( data );

}

});

});

});

&lt;/script&gt;";

}

  1. これが結果です： 調査
  2. その後、同じファイルに次のコードを追加して、AJAXリクエストを処理する必要があります。

add_action（ 'wp_ajax_collect_feedback'、 'njengah_thankyou_ajax'）; // wp_ajax_ {ACTION}

add_action（ 'wp_ajax_nopriv_collect_feedback'、 'njengah_thankyou_ajax'）;

関数njengah_thankyou_ajax（）{

// セキュリティーチェック

check_ajax_referer（ 'thankyou'。$ _ POST ['order_id']、 'thankyou_nonce'）;

if（$ order = wc_get_order（$ _POST ['order_id']））{

$ note = $ order-> get_formatted_billing_full_name（）。 'お店は'だと思います。 $ _POST ['like']。 '。';

$ order-> add_order_note（$ note、0、true）;

}

die（）;

}

  1. これは、バックエンドでの結果です。

ノート

結論

これで、チェックアウト後に顧客をカスタムページにリダイレクトできるようになります。 また、テンプレートを上書きして、ありがとうページにさまざまな要素を追加する方法についても説明しました。

このページを編集するときは、保持率を高めるために非常に創造的である必要があります。

ただし、functions.phpファイルを編集するときは常に注意する必要があります。 間違えるとエラーが表示されます。

ページビルダープラグインを使用して、ありがとうページをカスタマイズすることもできます。 おそらく店主が商品を推薦するビデオを含めて、関連性を保つ必要があります。

これはあなたの顧客を引き付け、彼らはあなたの店からより多くの製品を購入するように動機づけられます。

このチュートリアルが問題の解決に役立つことを願っています。

同様の記事

  1. チェックアウト後のWooCommerceリダイレクト：カスタムサンキューページにリダイレクト
  2. 100以上のヒント、コツ、スニペットUltimate WooCommerce Hide Guide
  3. 商品画像を追加する方法WooCommerceチェックアウトページ
  4. WooCommerce画像プレースホルダーガイド
  5. WooCommerceで商品の重量を隠す方法
  6. ストアフロントテーマWooCommerceでタグを非表示にする方法
  7. クーポンコードプレースホルダーWooCommerceを変更する方法
  8. ストアフロントの並べ替えオプションを削除、名前変更、追加する方法
  9. WooCommerceで製品SKUを非表示にする方法
  10. ショップページからカテゴリを非表示にする方法WooCommerce
  11. WooCommerceでゼロの場合に価格を非表示にする方法
  12. 後続ゼロを非表示にする方法WooCommerce
  13. [アドレス]タブの[マイアカウント]ページを非表示にして名前を変更する方法WooCommerce
  14. WooCommerceの製品数を非表示にする方法
  15. WooCommerceカスタムチェックアウトメッセージを追加する方法
  16. WooCommerceで製品をエクスポートする方法
  17. WooCommerceの最大または最小注文数量を設定する方法
  18. SKU、カテゴリ、タグを非表示にする方法メタ製品ページWooCommerce
  19. CSSで最後の子を除くすべてを選択する方法»CSSは最後の子ではない例
  20. ストアフロントチェックアウトページをカスタマイズする方法