如何使用代碼自定義 WooCommerce 感謝頁面

成功的感謝頁面最重要的方面是確保人們看到它。 你不需要任何花哨或複雜的東西。 它只需要通過從網站的其他部分中脫穎而出來給人留下良好的第一印象。

本文的目的是為您提供有關如何使用代碼自定義 WooCommerce 感謝頁面或訂單接收頁面的一般教程。

為什麼要自定義 WooCommerce 感謝頁面？

感謝頁面為您提供了一種在客戶購買後與他們保持聯繫的方式。

您可能會忽略在線商店中訂單確認或感謝頁面的重要性，但它實際上是銷售流程的關鍵部分。

默認的 WooCommerce 感謝頁面很無聊，對客戶來說是死胡同。 客戶對接下來會發生什麼感到困惑。

相反，如果您自定義它，您可以：

• 添加入職說明、後續步驟……
• 通過交叉銷售和追加銷售推廣相關產品
• 使用優惠券鼓勵重複購買
• 為客戶提供有價值的資源
• 通過社交證明、視頻等吸引客戶。

鑑於此，讓我們看看如何使用代碼輕鬆創建和自定義自定義感謝頁面。 親愛的開發者，所有的目光都在這裡！

使用代碼自定義 WooCommerce 感謝頁面

使用代碼自定義感謝頁面或收到訂單頁面的三種方法：

1. 創建重定向
2. 使用過濾器
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_pa​​ge') && is_order_received_pa​​ge() && 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_pa​​ge() && get_the_ID() === $id ) {
		全球 $wp;

		// 獲取訂單。 以下行存在於包含/短代碼/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 ) ) {
				$訂單=假；
			}
		}
		if ( $order instanceof WC_Order ) {
			$title = sprintf( "你真棒，%s！", esc_html( $order->get_billing_first_name() ) );
		}
	}
	返回$標題；
}

這將如下所示：

自定義訂單信息前的文本

訂單信息前顯示的默認文本是“謝謝。 您的訂單已收到。”。

此文本來自文件 templates/checkout/thankyou.php。 您可以使用 WooCommerce 中可用的過濾器更改此文本，即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 顯示來自thankyou.php模板文件的感謝頁面的內容，該模板文件位於 woocommerce/templates/checkout/ 文件夾中。

如果您想選擇此方法來自定義 WooCommerce 感謝頁面，您將需要一些 PHP 知識。

您可以通過將thankyou.php 文件複製到您的主題文件夾中的類似文件夾結構來使用您自己的模板。

例如，如果您使用的是 Storefront 主題，則應將您的thankyou.php 複製到：
wp-content/themes/storefront/woocommerce/checkout/文件夾。 您需要創建兩個文件夾，“woocommerce”和“checkout”。

當 WooCommerce 發現您自己的主題中存在相同的模板時，優先考慮您的主題中存在的模板。

讓我們舉個例子。 在默認的感謝頁面上，付款方式顯示在開頭和訂單詳細信息中。

我們希望為客戶下次購買提供優惠券代碼，並從頂部刪除付款方式。

下面是thankyou.php 模板：

<?php
如果（！定義（'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--error 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( 'My account', '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 文件中定義。

感謝頁面是四個不同模板文件的集合：

1. 模板/結帳/thankyou.php
2. 模板/訂單/訂單詳細信息.php
3. 模板/訂單/訂單詳情-item.php
4. 模板/訂單/訂單詳情-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 感謝頁面將轉換為強大的營銷工具，如下所示：

更多插件功能：

• 四個現成的高轉化感謝頁面模板，可幫助您快速入門。
• 購買/付款後將用戶重定向到附屬鏈接、第三方鏈接或資源。
• 讓您有機會根據您最喜歡的主題、插件和頁面編輯器構建感謝頁面，並按照您想要的方式設計頁面。

試試現場演示

最後的話

希望本文能幫助您了解自定義自定義感謝頁面的重要性，並很好地了解如何通過代碼和插件來實現。

使用這個小頁面可能是增加銷售額的絕佳機會，無論它對我們來說看起來多麼正常。