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

公開: 2022-09-15

目次隠す

1. WooCommerce のお礼ページをカスタマイズする理由は?

2. WooCommerce のお礼ページをコードでカスタマイズする

2.1. リダイレクトを作成してサンキューページをカスタマイズする

2.2. フィルタを使用してサンキューページをカスタマイズする

2.2.1. お礼ページのタイトル変更

2.2.2. お礼ページのタイトルをパーソナライズする

2.2.3. 注文情報の前のテキストのカスタマイズ

2.3. WooCommerce テンプレートファイルを上書きしてサンキューページをカスタマイズする

2.4. フックを使用してバリエーション ID に基づいてカスタムのサンキューページにリダイレクトする方法は?

2.5。商品属性に基づいてお礼ページにテキストを印刷する

3.プラグインを使用して、製品ごとおよびサイト全体のカスタムサンキューページを設定する方法は?

4.結びの言葉

成功したサンキューページの最も重要な側面は、人々に確実に見てもらえるようにすることです。凝ったものや複雑なものは必要ありません。サイトの他の部分より目立つようにして、良い第一印象を与える必要があるだけです。

この記事の目的は、コードを使用して WooCommerce のお礼ページまたは注文受領ページをカスタマイズする方法に関する一般的なチュートリアルを提供することです。

WooCommerce のお礼ページをカスタマイズする理由

ありがとうページは、購入後に顧客と連絡を取り合う方法を提供します.

オンラインストアの注文確認ページやサンキューページの重要性を見落としているかもしれませんが、実際には販売プロセスの重要な部分です。

デフォルトの WooCommerce ありがとうページは退屈で、顧客にとって行き止まりです。顧客は次に何をすべきか混乱しています。

代わりに、カスタマイズすると、次のことができます。

オンボーディング手順、次のステップを追加…
クロスセルとアップセルによる関連製品の販売促進
クーポンを利用してリピート購入を促す
お客様に価値あるリソースを提供する
社会的証明、動画などで顧客を引き付けます。

それを踏まえて、コードを使用してカスタムのサンキューページを簡単に作成およびカスタマイズする方法を見てみましょう。親愛なる開発者の皆さん、ここに注目してください！

WooCommerce のお礼ページをコードでカスタマイズする

コードを使用してサンキューページまたは注文を受けたページをカスタマイズするには、次の 3 つの方法があります。

リダイレクトの作成
フィルタの使用
テンプレートファイルの上書き

また、参照用に別のタブで開いているファイルにコードを安全に追加する方法については、この投稿を続けてください。

3つの方法のそれぞれを詳しく見てみましょう。

リダイレクトを作成してサンキューページをカスタマイズする

新しいプラグインを作成するか、ファイル functions.php を開き、次のコードをファイルの最後に入力することで、リダイレクトを簡単に行うことができます。

add_action( 'template_redirect', 'sa_custom_redirect_after_purchase' );
関数 sa_custom_redirect_after_purchase() {
	グローバル $wp;
	if ( is_checkout() && !empty( $wp->query_vars['order-received'] ) ) {
		wp_redirect( 'https://demo.storeapps.org/woocommerce/thank-you/' );
		出口;
	}
}

こちらが注文後のカスタムサンキューページです。

リダイレクトは良いようですが、これには、注文概要表、請求と配送の詳細、および WooCommerce が現在提供しているその他の重要な情報などの重要な情報が欠けています。

フィルタを使用してサンキューページをカスタマイズする

お礼のページを作成する代わりに、ページのタイトルを変更したり、注文情報の前のテキストを変更したりすることができます。このような場合は、フィルタを使用できます。

お礼ページのタイトル変更

add_filter( 'the_title', 'sa_title_order_received', 10, 2 );
関数 sa_title_order_received( $title, $id ) {
	if ( function_exists( 'is_order_received_page' ) && is_order_received_page() && get_the_ID() === $id ) {
		$title = "ご注文ありがとうございます :)";
	}
	$タイトルを返します。
}

WooCommerce は、includes/wc-conditional-functions.php ファイルで関数is_order_received_page()を提供します。変更されたタイトルは次のように表示されます。

お礼ページのタイトルをパーソナライズする

これを行うと、顧客の名前をタイトルなどに含めることができます。

add_filter( 'the_title', 'sa_personalize_order_received_title', 10, 2 );
関数 sa_personalize_order_received_title( $title, $id ) {
	if ( is_order_received_page() && get_the_ID() === $id ) {
		グローバル $wp;

		// 注文を取得します。 次の行は、includes/shortcodes/class-wc-shortcode-checkout.php ファイルの order_received() にあります。
		$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'] ) );

		もし ( $order_id > 0 ) {
			$order = wc_get_order( $order_id );
			if ( ! $order || ! hash_equals( $order->get_order_key(), $order_key ) ) {
				$order = false;
			}
		}
		if ( $order instanceof WC_Order ) {
			$title = sprintf( "あなたは素晴らしいです、%s!", esc_html( $order->get_billing_first_name() ) );
		}
	}
	$タイトルを返します。
}

これは次のようになります。

注文情報の前のテキストのカスタマイズ

注文情報の前に表示されるデフォルトのテキストは「ありがとうございます。ご注文は受信されました。"。

このテキストは、templates/checkout/thankyou.php ファイルから取得されます。 woocommerce_thankyou_order_received_text であるwoocommerce_thankyou_order_received_textで利用可能なフィルターを使用して、このテキストを変更できます。

add_filter( 'woocommerce_thankyou_order_received_text', 'sa_update_order_received_text', 10, 2 );
関数 sa_update_order_received_text( $text, $order ) {
	$text .= 'ご注文の領収書をメールでお送りしました。';
	$テキストを返します。
}

このコードには、「注文の領収書をメールで送信しました」というテキストが追加されます。既存のテキストに。

テキストを完全に上書きしたい場合は、 $text 変数を連結しないようにする必要があります。

 $text = '購入レシートをメールで送信しました。';

顧客がフォームをダウンロードする必要がある指示をここに追加したい場合は、それも行うことができます。

add_filter( 'woocommerce_thankyou_order_received_text', 'sa_change_order_received_text', 10, 2 );
関数 sa_change_order_received_text( $text, $order ) {
	$text = '購入レシートをメールで送信しました。 イベントに参加する前に、<a href="https://demo.storeapps.org/form.pdf">こちらのフォームにご記入ください。';
	$テキストを返します。
}

これは次のようになります。

WooCommerce テンプレートファイルを上書きしてサンキューページをカスタマイズする

WooCommerce は、woocommerce/templates/checkout/ フォルダーにあるthankyou.phpテンプレートファイルのサンキューページのコンテンツを表示します。

この方法を選択して WooCommerce のサンキューページをカスタマイズするには、PHP の知識が必要です。

独自のテンプレートを使用するには、thankyou.php ファイルを同様のフォルダー構造でテーマのフォルダーにコピーします。

たとえば、Storefront テーマを使用している場合は、thankyou.php を次の場所にコピーする必要があります。
wp-content/themes/storefront/woocommerce/checkout/フォルダー。「woocommerce」と「checkout」の 2 つのフォルダーを作成する必要があります。

同じテンプレートが独自のテーマに存在することを WooCommerce が検出すると、テーマに存在するテンプレートが優先されます。

例を見てみましょう。デフォルトのサンキューページでは、最初と注文の詳細に支払い方法が表示されます。

次回の購入のために顧客にクーポンコードを提供し、上部のセクションから支払い方法を削除したいと考えています。

以下は、thankyou.php テンプレートです。

<?php
if ( ! defined( 'ABSPATH' ) ) {
	出口;
}
?>
 
<div class="woocommerce-order">
 
	<?php if ( $order ) : ?>

		<?php if ( $order->has_status( 'failed' ) ) : ?>

			<p class="woocommerce-notice woocommerce-notice--error woocommerce-thankyou-order-failed"><?php _e( '元の銀行/加盟店が取引を拒否したため、残念ながら注文を処理できません。購入を試みてください', 'woocommerce' ); ?></p>
 
			<p class="woocommerce-notice woocommerce-notice--エラー woocommerce-thankyou-order-failed-actions">
				<a href="<?php echo esc_url( $order->get_checkout_payment_url() ); ?>" class="button pay"><?php _e( 'Pay', 'woocommerce' ) ?>
				<?php if ( is_user_logged_in() ) : ?>
					<a href="<?php echo esc_url( wc_get_page_permalink( 'myaccount' ) ); ?>" class="button pay"><?php _e( '私のアカウント', 'woocommerce' ); ?>
				<?php endif; ?>
			</p>

		<?php その他: ?>
 
			<p class="woocommerce-notice woocommerce-notice--success woocommerce-thankyou-order-received"><?php echo apply_filters( 'woocommerce_thankyou_order_received_text', __( 'ありがとうございます。注文を受け取りました。このトランザクションの注文受付.', 'woocommerce' ), $order ); ?></p>
 
			<ul class="woocommerce-order-overview woocommerce-thankyou-order-details order_details">
 				<li class="woocommerce-order-overview__order order">
					<?php _e( '取引ID:', 'woocommerce' ); ?>
					<strong><?php echo $order->get_order_number(); ?></strong>
				</li>
 
				<li class="woocommerce-order-overview__date date">
					<?php _e( '日付:', 'woocommerce' ); ?>
					<strong><?php echo date_i18n( get_option( 'date_format' ), $order->get_date_created() ); ?></strong>
				</li>
 
				<li class="woocommerce-order-overview__total total">
					<?php _e( '合計:', 'woocommerce' ); ?>
					<strong><?php echo $order->get_formatted_order_total(); ?></strong>
				</li>
			</ul>

		<?php endif; ?>

		<p>初めてのご注文、おめでとうございます。 次回のご注文で 15% の割引が適用されます。 割引を利用するには、クーポン コード <strong>WELCOME15</strong> を使用してください。</p>

		<?php do_action( 'woocommerce_thankyou_' . $order->get_payment_method(), $order->get_id() ); ?>
		<?php do_action( 'woocommerce_thankyou', $order->get_id() ); ?>
 
	<?php その他: ?>
 
		<p class="woocommerce-notice woocommerce-notice--success woocommerce-thankyou-order-received"><?php echo apply_filters( 'woocommerce_thankyou_order_received_text', __( 'ありがとうございます。注文を受け取りました。', 'woocommerce' ）、 ヌル ）; ?></p>
 
	<?php endif; ?>
 
</div>

注文の詳細テーブルと顧客の詳細 (ログイン時) に表示されるデータを変更したい場合があります。

それらは別のファイルから来ています。 WooCommerce は、 woocommerce_thankyou hookに添付されている関数woocommerce_order_details_table()を使用します。

関数 woocommerce_order_details_table() は includes/wc-template-functions.php ファイルで定義されています。

お礼ページは、4 つの異なるテンプレートファイルのコレクションです。

テンプレート/チェックアウト/thankyou.php
templates/order/order-details.php
templates/order/order-details-item.php
templates/order/order-details-customer.php

どのデータがどのテンプレートから来ているかがわかったら、適切なテンプレートをテーマのフォルダーにコピーするだけです。

それでは、製品バリエーションの WooCommerce サンキューページをカスタマイズする方法を見てみましょう。

フックを使用してバリエーション ID に基づいてカスタムのサンキューページにリダイレクトする方法は?

add_action( 'woocommerce_thankyou', 'sa_redirect_product_attribute_based', 10, 1 ); 
関数 sa_redirect_product_attribute_based( $order_id ) {
	$order = wc_get_order( $order_id );
	if ( $order instanceof WC_Order ) {
		foreach( $order->get_items() as $item ) {
			// 任意のバリエーション ID をここに追加します
			if ( !empty( $item[ 'variation_id' ] ) && 446 == $item[ 'variation_id' ] ) {
				// 以下を、顧客に送信する URL に変更します
				wp_redirect( 'https://demo.storeapps.org/custom-thank-you/' );
			}
		}
	}
}

商品属性に基づいてお礼ページにテキストを印刷する

上記の例を拡張すると、バリエーション ID に基づいて、WooCommerce のサンキューページに任意のカスタムテキストを表示することもできます。そのコードは次のとおりです。

add_action( 'woocommerce_thankyou', 'sa_show_custom_text_by_variation_id', 10, 1 ); 
関数 sa_show_custom_text_by_variation_id( $order_id ) {
	$order = wc_get_order( $order_id );
	if ( $order instanceof WC_Order ) {
		foreach( $order->get_items() as $item ) {
			// この下に任意のバリエーション ID を追加します。 私の属性は色、サイズです
			if ( !empty( $item[ 'variation_id' ] ) && 446 == $item[ 'variation_id' ] ) {
				echo '<p>T シャツを別のサイズに交換したい場合は、お気軽にお問い合わせください。</p>';
			}
		}
	}
}

コードを追加すると、サンキューページは次のようになります。

ここには非常に多くのコードスニペットがあります。コーディングに興味がなく、簡単な解決策が必要な場合は、以下を読んで強力なプラグインを見つけてください。

プラグインを使用して、製品ごとおよびサイト全体にカスタムのサンキューページを設定する方法は?

お礼ページのカスタマイズには多くの要素が含まれます。そう思えるほど簡単ではありません。コードスニペットを追加するときに小さな間違いを犯すと、すべてがうまくいかなくなります。

したがって、販売とマーケティングにもっと集中し、コーディングの手間を省きたい場合は、WooCommerce プラグインのカスタムサンキューページを使用することをお勧めします。

サイト全体だけでなく、製品ごとにカスタムサンキューページを設定するのに役立ちます. 製品バリエーションのサポートはまもなく追加されます。

このプラグインで最適化されたサンキューページでは、アップセル(スマートオファーを使用)、電子メールリストの作成、オファーの宣伝、フィードバックの収集、ビデオメッセージの表示、クーポンなどを行うことができます。

デフォルトの WooCommerce ありがとうページは、次のような強力なマーケティングツールに変換されます。

その他のプラグイン機能:

コンバージョン率の高い 4 つの既成のサンキューページテンプレートを使用して、素晴らしいスタートを切ることができます。
購入/支払い後にユーザーをアフィリエイトリンク、サードパーティリンク、またはリソースにリダイレクトします。
お気に入りのテーマ、プラグイン、ページエディターに従ってサンキューページを作成し、希望どおりにページをデザインする機会を提供します。

ライブデモを試す

最後の言葉

この記事が、カスタムのサンキューページをカスタマイズすることの重要性と、コードとプラグインを使用してそれを行う方法をよく理解するのに役立つことを願っています.

この小さなページの使用は、私たちにとってそれがどれほど普通のことであるかに関係なく、売り上げを伸ばす絶好の機会になる可能性があります.