Как настроить редирект WooCommerce после оформления заказа

Опубликовано: 2021-05-11

Настройте перенаправление WooCommerce после оформления заказа Вы хотите перенаправить клиентов на пользовательскую страницу благодарности? Когда клиенты завершают свои заказы в WooCommerce, они перенаправляются на страницу «Заказ получен» . Эта страница играет невероятно важную роль. В этом посте я покажу вам, как шаг за шагом настроить перенаправление WooCommerce после оформления заказа и настроить страницу получения заказа.

Однако на самом деле страница не доставляется. Вы можете перенаправить их на пользовательскую страницу благодарности .

Настройка страницы благодарности создает уникальный опыт покупок для ваших клиентов. Вот почему важно иметь красиво оформленную страницу благодарности, адаптированную для вашего конкретного продукта.

Это также имеет большое значение для того, чтобы сделать ваш магазин уникальным по сравнению с вашими конкурентами. Вы также можете включить послепродажное обслуживание и управлять информацией о поддержке на этой странице.

Это важно, если вы хотите, чтобы ваш интернет-магазин генерировал больше продаж и увеличивал трафик!

К концу этого краткого руководства вы сможете программно перенаправлять клиентов на пользовательскую страницу. Мы также поделимся некоторыми фрагментами кода для создания новой страницы благодарности и перезаписи существующей страницы.

Основная цель этого руководства — помочь разработчикам понять, как очень легко настраивать страницы с помощью фрагментов кода или путем перезаписи шаблонов WooCommerce.

Что нужно для перенаправления пользователей на пользовательскую страницу благодарности?

Прежде чем продолжить, вы также должны создать дочернюю тему. Это гарантирует, что ваши изменения не будут потеряны во время обновления.

Важно отметить, что в этом руководстве мы будем использовать пользовательские фрагменты кода PHP. Мы объяснили все шаги, которые вам нужно выполнить, что облегчит вам работу.

В этом руководстве также предполагается, что у вас есть работающая установка WordPress, а поверх нее добавлен WooCommerce.

Давайте посмотрим, как вы можете этого добиться.

1. Перенаправление клиентов на пользовательскую страницу благодарности

В этом разделе мы будем использовать пользовательский фрагмент кода PHP для перенаправления пользователей на страницу приветствия после того, как они завершили покупку.

Приветственные страницы — это отличный способ повысить продажи продукта, включить рефералов или рассказать клиентам о вашем продукте. Вы также можете включить скидки или купоны на этой странице, чтобы привлечь новых и постоянных клиентов.

а) Шаги по перенаправлению клиентов после оформления заказа в WooCommerce

Вот шаги, которые необходимо выполнить, чтобы перенаправить пользователей на пользовательскую страницу:

Войдите на свой сайт WordPress и получите доступ к панели инструментов в качестве пользователя-администратора.
В меню «Панель инструментов» нажмите « Меню внешнего вида» > «Меню редактора тем». Когда откроется страница Theme Editor, найдите файл функций темы, в который мы добавим функцию, которая будет перенаправлять клиентов после оформления заказа.
Добавьте следующий код в файл 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-адрес соответствующей страницы, чтобы этот код работал.

Ваша пользовательская страница должна быть красиво оформлена, чтобы улучшить взаимодействие с пользователем на вашем сайте.

б) Перезапись шаблонов WooCommerce для настройки страницы благодарности WooCommerce

Вы можете легко настроить пользовательскую страницу благодарности, перезаписав шаблоны WooCommerce. Вам нужно использовать хук перенаправления шаблона и функцию обратного вызова с URL-адресом перенаправления.

Вот простые шаги, которые вам необходимо выполнить:

Во-первых, нужно проверить, находится ли пользователь на странице оформления заказа, странице заказа или странице получения заказа, прежде чем мы создадим пользовательскую страницу перенаправления. Мы будем использовать функцию template_redirect(). После этого добавьте хук действия template_redirect, как показано ниже:

 add_action('template_redirect', 'your_callback_function');

Следующим шагом является создание функции обратного вызова, на которую вы ссылались в хуке перенаправления шаблона выше. Однако важно отметить, что имя в функции обратного вызова и хуке должно совпадать.
Чтобы добавить страницу, на которую вы хотите перенаправить пользователя после успешной проверки, нам нужно использовать функцию wp_redirect() в функции обратного вызова. Мы рекомендуем добавить выход после функции wp_redirect. Это поможет избежать проблем с переадресацией.
Чтобы вставить код, нажмите « Меню внешнего вида» > «Меню редактора тем». Когда откроется страница Theme Editor , найдите файл функций темы, в который мы добавим функцию.
Сохраните изменения или обновите файл functions.php темы или плагина.

Это все, что вам нужно сделать. Теперь вы успешно создали перенаправление на предпочитаемую вами страницу после того, как пользователь завершит покупку.

2. Настройка страницы благодарности WooCommerce с помощью фильтров

Вместо того, чтобы создавать пользовательскую страницу благодарности, вы можете настроить существующую страницу. Чтобы добиться этого, мы будем фильтровать и перехватывать действия.

Хуки действий позволяют вставлять пользовательский код в различные точки. Хуки-фильтры, с другой стороны, позволяют вам манипулировать и возвращать переменную, которую она передает.

В этом разделе мы будем использовать фильтры для изменения заголовка, персонализации заголовка и изменения текста перед информацией о заказе.

Мы также покажем вам, как вы можете собрать дополнительную информацию от ваших клиентов, создав форму опроса. Мы также покажем вам, как вы можете отправить и обработать запрос AJAX для формы.

а) Изменение заголовка страницы благодарности

WooCommerce предоставляет функцию is_order_received_page() в файле include/wc-conditional-functions.php. Мы будем использовать эту функцию, чтобы изменить заголовок страницы

Вот шаги, которые вам необходимо выполнить:

Войдите на свой сайт WordPress и получите доступ к панели инструментов в качестве пользователя-администратора.
В меню «Панель инструментов» нажмите « Меню внешнего вида» > «Меню редактора тем». Когда откроется страница редактора тем, найдите файл функций темы, в который мы добавим функцию, которая изменит заголовок страницы благодарности.
Добавьте следующий код в файл php :

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

function njengah_thank_you_title( $old_title ){

return 'You\'re awesome!';

}

Это результат:

б) Персонализируйте название

Вы можете улучшить заголовок страницы «Спасибо». Вы можете добавить такие детали, как имя клиента или что-то еще.

Чтобы достичь этого, вот шаги, которые вам нужно выполнить:

Войдите на свой сайт 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_{ДЕЙСТВИЕ}

add_action('wp_ajax_nopriv_collect_feedback', 'njengah_thankyou_ajax');

функция njengah_thankyou_ajax(){

// проверка безопасности

check_ajax_referer('спасибо'.$_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. Если вы допустили ошибку, будет отображаться ошибка.

Вы также можете использовать плагин конструктора страниц, чтобы настроить страницу благодарности. Вы должны сделать его релевантным, возможно, включая видео, в котором владелец магазина рекомендует продукт.

Это привлечет ваших клиентов, и они будут мотивированы покупать больше товаров в вашем магазине.

Мы надеемся, что это руководство помогло решить вашу проблему.