如何使用代码自定义 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 感谢页面将转换为强大的营销工具，如下所示：

更多插件功能：

• 四个现成的高转化感谢页面模板，可帮助您快速入门。
• 购买/付款后将用户重定向到附属链接、第三方链接或资源。
• 让您有机会根据您最喜欢的主题、插件和页面编辑器构建感谢页面，并按照您想要的方式设计页面。

试试现场演示

最后的话

希望本文能帮助您了解自定义自定义感谢页面的重要性，并很好地了解如何通过代码和插件来实现。

使用这个小页面可能是增加销售额的绝佳机会，无论它对我们来说看起来多么正常。