结帐后如何设置 WooCommerce 重定向

已发表: 2021-05-11

您想将客户重定向到自定义感谢页面吗？当客户在 WooCommerce 中完成订单时，他们会被重定向到Order Received 页面。此页面具有非常重要的作用。在这篇文章中，我将向您展示如何在结帐后设置 WooCommerce 重定向，逐步自定义接收订单页面。

但是，该页面并没有真正交付。您可能希望将它们重定向到自定义的感谢页面。

自定义感谢页面可为您的客户创造独特的购物体验。这就是为什么为您的特定产品定制一个设计精美的感谢页面很重要。

与竞争对手相比，这也有助于使您的商店与众不同。您还可以在此页面上包含售后服务和管理支持详细信息。

如果您希望您的在线商店产生更多销售额并增加流量，这一点至关重要！

在本简短教程结束时，您将能够以编程方式将客户重定向到自定义页面。我们还将分享一些代码片段，用于创建新的感谢页面并覆盖现有页面。

本教程的主要目的是帮助开发人员了解如何使用代码片段或覆盖 WooCommerce 模板轻松自定义页面。

将用户重定向到自定义感谢页面需要什么？

在继续之前，您还应该创建一个子主题。这将确保您的更改在更新期间不会丢失。

请务必注意，我们将在本教程中使用自定义 PHP 代码片段。我们已经解释了您需要遵循的所有步骤，这将使您的工作更轻松。

本教程还假设您安装了一个正常工作的 WordPress，并在此基础上添加了 WooCommerce。

让我们看看如何实现这一目标。

1. 将客户重定向到自定义感谢页面

在本节中，我们将使用自定义 PHP 代码片段在用户完成购买后将其重定向到欢迎页面。

欢迎页面是追加销售产品、包括推荐或让客户了解您的产品的好方法。您还可以在此页面上包含折扣或优惠券以吸引新的忠实客户。

a) 在 WooCommerce 中结帐后重定向客户的步骤

您需要按照以下步骤将用户重定向到自定义页面：

登录您的 WordPress 站点并以管理员用户身份访问仪表板。
从仪表板菜单中，单击外观菜单 > 主题编辑器菜单。当主题编辑器页面打开时，查找主题函数文件，我们将在其中添加将在结帐后重定向客户的函数。
将以下代码添加到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-&amp;gt;has_status( 'failed' ) ) {

 wp_safe_redirect( $url );

exit;

 }

}

这是结果：

代码如何运作

用户完成购买后，代码片段将客户重定向到自定义页面。

它检查用户是否已完成购买，并将他们重定向到 URL。请记住替换相应页面的 URL 以使此代码正常工作。

您的自定义页面应该设计精美，以改善您网站上的用户体验。

b) 覆盖 WooCommerce 模板以设置 WooCommerce 感谢页面

您可以通过覆盖 WooCommerce 模板轻松设置自定义感谢页面。您需要使用模板重定向挂钩和带有重定向 URL 的回调函数。

以下是您需要遵循的简单步骤：

首先是在我们创建自定义重定向页面之前检查用户是否在结帐页面、订单页面或订单接收页面。我们将使用 template_redirect() 函数。之后，添加 template_redirect 动作钩子，如下所示：

 add_action('template_redirect', 'your_callback_function');

下一步是创建您在上面的模板重定向挂钩中引用的回调函数。但是，重要的是要注意回调函数中的名称和钩子应该匹配。
要添加成功结帐后希望用户重定向的页面，我们需要在回调函数中使用 wp_redirect() 函数。我们建议在 wp_redirect 函数之后添加一个出口。这将有助于避免重定向问题。
要插入代码，请单击外观菜单 > 主题编辑器菜单。当主题编辑器页面打开时，查找主题函数文件，我们将在其中添加函数。
保存更改或更新您的主题 functions.php 或插件文件。

这就是你需要做的。在用户完成购买后，您现在已经成功创建了指向您首选页面的重定向。

2. 使用过滤器自定义 WooCommerce 感谢页面

您可以自定义现有页面，而不是创建自定义感谢页面。为了实现这一点，我们将成为过滤器和动作钩子。

动作挂钩允许您在各个点插入自定义代码。另一方面，过滤器钩子允许您操作并返回它传递的变量。

在本节中，我们将使用过滤器来更改标题、个性化标题以及更改订单信息前的文本。

我们还将向您展示如何通过创建调查表从客户那里收集更多信息。我们还将向您展示如何发送和处理表单的 AJAX 请求。

a) 更改感谢页面标题

WooCommerce 在 includes/wc-conditional-functions.php 文件中提供了函数 is_order_received_page() 。我们将使用这个函数来改变页面标题

以下是您需要遵循的步骤：

登录您的 WordPress 站点并以管理员用户身份访问仪表板。
从仪表板菜单中，单击外观菜单 > 主题编辑器菜单。当主题编辑器页面打开时，查找主题函数文件，我们将在其中添加将更改感谢页面标题的函数。
将以下代码添加到php文件中：

add_filter( 'woocommerce_endpoint_order-received_title', 'njengah_thank_you_title' );

function njengah_thank_you_title( $old_title ){

return 'You\'re awesome!';

}

这是结果：

b) 个性化标题

您可以增强“谢谢”页面标题。您可以添加详细信息，例如客户姓名或其他任何内容。

为此，您需要遵循以下步骤：

登录您的 WordPress 站点并以管理员用户身份访问仪表板。
从仪表板菜单中，单击外观菜单 > 主题编辑器菜单。打开主题编辑器页面后，查找主题功能文件，我们将在其中添加个性化感谢页面标题的功能。
将以下代码添加到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() &amp;amp;&amp;amp; 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&amp;nbsp; = apply_filters( 'woocommerce_thankyou_order_id', absint( $wp-&amp;gt;query_vars['order-received'] ) );

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

if ( $order_id &amp;gt; 0 ) {

$order = wc_get_order( $order_id );

if ( $order-&amp;gt;get_order_key() != $order_key ) {

$order = false;

}

}

if ( isset ( $order ) ) {

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

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

}

}

return $title;

}

这是结果：

c) 更改订单信息前的文本

默认情况下，订单信息前的文本是“谢谢。您的订单已收到。” 文本显示在感谢页面上。它来自文件templates/checkout/thankyou.php。

WooCommerce 中有一些过滤器可让您更改此文本：woocommerce_thankyou_order_received_text。

要更改它，您需要执行以下步骤：

登录您的 WordPress 站点并以管理员用户身份访问仪表板。
从仪表板菜单中，单击外观菜单 > 主题编辑器菜单。打开主题编辑器页面后，查找主题功能文件，我们将在其中添加个性化感谢页面标题的功能。
将以下代码添加到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;

}

请记住，您可以在此处添加自己的文本。这是结果：
或者，如果您希望客户下载表格，则可以添加说明。您可以为他们提供一个自定义链接，他们可以在其中下载他们的产品。为此，请在 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 &amp;lt;a href="http://example.com/some-form.pdf"&amp;gt;this form&amp;lt;/a&amp;gt; before attending the event';

return $new_str;

}

这是结果：

3. 收集更多细节

可以从用户那里收集附加信息。例如，您可以要求他们对您的用户体验进行评分。

如果你想实现这一点，你需要创建一个表单。您还需要发送和处理 AJAX 请求，以便在后端注册它。

让我们看一下您需要遵循的步骤：

登录您的 WordPress 站点并以管理员用户身份访问仪表板。
从仪表板菜单中，单击外观菜单 > 主题编辑器菜单。打开主题编辑器页面后，查找主题函数文件/

3. 首先，我们要添加一个表格。如果您希望它出现在标题之后，您需要使用 woocommerce_thankyou_order_received_text 挂钩。

添加以下代码片段以添加调查表：

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>';

}

下一步是发送 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;";

}

这是结果：
之后，我们需要通过将以下代码添加到同一文件中来处理 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');

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

$note = $order->get_formatted_billing_full_name() 。 ' 认为商店是' . $_POST['喜欢'] 。 '.';

$order->add_order_note($note, 0, true);

}

死（）;

}

这是后端的结果：

结论

到目前为止，您应该能够在结帐后将客户重定向到自定义页面。我们还分享了如何覆盖模板以在感谢页面上添加不同的元素。

在编辑此页面以提高保留率时，您需要非常有创意。

但是，在编辑 functions.php 文件时应始终小心。如果您犯了错误，将显示错误。

您还可以使用页面构建器插件来自定义感谢页面。您应该保持相关性，可能包括店主推荐产品的视频。

这将吸引您的客户，他们将有动力从您的商店购买更多产品。

我们希望本教程有助于解决您的问题。

类似文章

WooCommerce 结帐后重定向：重定向到自定义感谢页面
100 多个提示、技巧和片段终极 WooCommerce 隐藏指南
如何添加产品图片 WooCommerce 结帐页面
WooCommerce 图像占位符指南
如何在 WooCommerce 中隐藏产品的重量
如何在店面主题 WooCommerce 中隐藏标签
如何更改优惠券代码占位符 WooCommerce
如何删除、重命名和添加店面排序选项
如何在 WooCommerce 中隐藏产品 SKU
如何从商店页面 WooCommerce 隐藏类别
如果在 WooCommerce 中为零，如何隐藏价格
如何隐藏尾随零 WooCommerce
如何隐藏和重命名地址选项卡我的帐户页面 WooCommerce
如何隐藏 WooCommerce 产品数量
如何添加 WooCommerce 自定义结帐消息
如何在 WooCommerce 中导出产品
如何设置 WooCommerce 最大或最小订单数量
如何隐藏 SKU、类别、标签元产品页面 WooCommerce
如何在 CSS 中选择除最后一个子元素之外的所有元素 » CSS 不是最后一个子元素示例
如何自定义店面结帐页面