Как программно отредактировать страницу благодарности WooCommerce

Опубликовано: 2021-06-08

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

Почему вы должны настроить страницу благодарности WooCommerce?

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

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

Если кто-то видит вашу страницу благодарности, значит, он разместил заказ в вашем магазине. Это означает, что они доверяют вам (по крайней мере, настолько, чтобы покупать у вас). Как вы, наверное, знаете, гораздо проще продавать тому, кто уже купил у вас, чем новым клиентам. Даже если вашей главной целью может быть не продажа чего-либо, вы можете поработать над тем, чтобы превратить этого покупателя в постоянного клиента.

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

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

Как программно отредактировать страницу благодарности WooCommerce: 2 метода

Существует два основных способа программного редактирования страницы благодарности в WooCommerce :

  1. Использование хуков
  2. Перезапись файлов шаблонов

Кроме того, вы также можете комбинировать оба метода в зависимости от каждого конкретного требования.

Давайте подробнее рассмотрим оба способа.

ПРИМЕЧАНИЕ . Поскольку мы будем редактировать некоторые основные файлы, прежде чем начать, мы рекомендуем вам создать полную резервную копию вашего сайта и установить дочернюю тему. Если вы не знаете, как это сделать, ознакомьтесь с этим руководством, чтобы создать его, или используйте любой из этих плагинов.

1) Настройте страницу благодарности с помощью хуков

Чтобы запустить хуки WooCommerce, мы будем работать с файлом functions.php дочерней темы. Нам нужен этот файл, чтобы перезаписать файл из родительской темы.

Некоторые хуки, предоставляемые WooCommerce, работают на странице благодарности, например, woocommerce_before_thankyou и woocommerce_thankyou . Кроме того, вы можете редактировать заголовок и контент с помощью хуков-фильтров, таких как woocommerce_endpoint_order-received_title и woocommerce_thankyou_order_received_text .

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

 add_action('woocommerce_before_thankyou','QuadLayers_before_thankyou');
функция QuadLayers_before_thankyou(){
    эхо "ТЕСТ";
}

Перехватчики фильтров работают аналогичным образом, но они должны возвращать значение. Хук фильтра «woocommerce_before_thankyou» изменит заголовок страницы «Спасибо» следующим образом:

 add_filter('woocommerce_endpoint_order-received_title', 'QuadLayers_thank_you_title'); 
функция QuadLayers_thank_you_title($old_title){ 
     return 'Ты классный!'; 
}

2) Редактировать страницу благодарности, перезаписывая файлы шаблонов

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

Чтобы перезаписать файлы шаблонов, вам необходимо скопировать файлthankyou.php , расположенный в папке шаблонов плагинов WC, и вставить файл с тем же именем в папку WooCommerce вашей дочерней темы, включая подпапку оформления заказа, как показано ниже:

Перезаписать шаблон страницы благодарности woocommerce

Чтобы узнать больше о том, как настроить файлы шаблонов в WooCommerce, ознакомьтесь с этим руководством.

После этого вы сможете свободно редактировать файлthankyou.php вашей дочерней темы и перезаписывать файл по умолчанию.

Примеры скриптов для программного редактирования страницы благодарности WooCommerce

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

Вот как выглядит страница благодарности по умолчанию в WooCommerce:

Как настроить страницу благодарности в WooCommerce

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

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

Вставьте следующий код в файл functions.php вашей дочерней темы:

 add_filter('woocommerce_endpoint_order-received_title', 'QuadLayers_thank_you_title'); 
функция QuadLayers_thank_you_title($old_title){ 
     return 'Ты классный!'; 
}
add_filter('woocommerce_thankyou_order_received_text', 'QuadLayers_thank_you_details', 20, 2); 
функция QuadLayers_thank_you_details($thank_you_title, $order){ 
    $str= '<h3><b>О ' . $order->get_billing_first_name() . '</b>, большое спасибо за заказ!</h3>';
    $str.='<p>Мы свяжемся с вами в ближайшее время, чтобы доставить вашу покупку.</p>';
    $str.='<p>Оставайтесь с нами, чтобы получать последние объявления и подписывайтесь на наши профили в социальных сетях</p>>';
    $str.= '<div><div><a href="#twitter.com"><img src="https://upload.wikimedia.org/wikipedia/commons/c/ce/Twitter_Logo.png" / ></а></дел>'; 
    $str.='<div><a href="#facebook.com"><img src="https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg" /></а></дел>'; 
    $str.='<div><a href="#instagram.com"><img src="https://cdn2.iconfinder.com/data/icons/social-media-2285/512/1_Instagram_colored_svg_1-512. png" /></a></div></div>';
   $str.='<p>Здесь вся информация о вашем заказе. Ура!</p>';    
    вернуть $стр;
}

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

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

Включите пользовательский контент на страницу благодарности

2) Отображение информации о продукте на странице «Спасибо».

Еще одна интересная альтернатива — отображать другие продукты, чтобы покупатели могли покупать другие товары, которые им интересны. Чтобы отобразить определенные продукты, вы можете использовать шорткоды WooCommerce, подобные этому:

 add_action('woocommerce_thankyou', 'QuadLayers_thankyou_page', 10, 2);
функция QuadLayers_thankyou_page(){
   $sh = '<h4>Возможно, вы захотите проверить эти другие продукты. </h4>';
  $sh .='<div class="tx_account">'.do_shortcode('
 ').'</div>';
    эхо $ш;
}

Здесь мы используем шорткод продукта для отображения рекомендуемых продуктов, и результат такой:

Отображение информации о продукте на странице благодарности

3) Показать данные учетной записи на странице «Спасибо»

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

 add_action('woocommerce_thankyou', 'QuadLayers_thankyou_page', 10, 2);
функция QuadLayers_thankyou_page(){
   $sh = "<h2>Ваша учетная запись</h2>";
   $sh .='<div class="tx_account">'.do_shortcode(' [ woocommerce_my_account ] ').'</div>'; эхо $ш; }

После вставки этого в файл functions.php ваша страница благодарности должна выглядеть так:

Показать данные учетной записи на странице благодарности

4) Давать купоны, когда покупки превышают определенную общую стоимость

Настройка страницы благодарности может стать отличным способом превратить случайного покупателя в постоянного покупателя. Купоны на скидку для будущих покупок — отличный способ добиться этого.

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

 add_action('woocommerce_thankyou', 'QuadLayers_thankyou_order', 10, 2); 
функция QuadLayers_thankyou_order($order_id){
    $order = wc_get_order($order_id);
    всего = 0;
    foreach ($order->get_items() as $item_key => $item):
        $item_data=$item->get_data();       
        $item_total=intval($item_data['всего']);
        $общий+=$item_total;        
    конец для каждого;
    если ($ всего> 100):
        echo "<p>Сумма вашего заказа превышает диапазон 100$, поэтому вы получаете специальный купон на следующий заказ.</p><p> Не волнуйтесь, он будет активен, пока вы не решите вернуться !</p><p> Используйте следующий купон <code>[RTC_discount]</code>в следующем заказе, чтобы получить специальную скидку 33%</p>";
    конец;
}

В этом примере мы выбрали 100 долларов, но убедитесь, что вы изменили значение в строке 8 — if($total>100): — на то, что имеет смысл для вашего бизнеса.

Предоставление купонов на указанную общую стоимость покупки

5) Удалите и отредактируйте детали заказа на странице «Спасибо».

Теперь давайте рассмотрим более сложный пример и внесем некоторые изменения в файл шаблона WooCommerce thankyou.php . Если вы не знакомы с редактированием файлов шаблонов, вы можете ознакомиться с этим руководством.

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

В то же время мы переместили список деталей заказа наверх и отредактировали метки.

Для этого создайте файл thankyou.php в дочерней теме, как описано в предыдущем разделе, и вставьте в него следующий код:

 <?php определен('ABSPATH') || выйти;?>
<div class="woocommerce-заказ">
<?php if ($order): do_action('woocommerce_before_thankyou', $order->get_id()); ?> <?php if ($order->has_status('failed') ) : ?>
 <p class="woocommerce-notice woocommerce-notice--error woocommerce-thankyou-order-failed"><?php esc_html_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= "кнопка оплаты"><?php esc_html_e('Оплатить', 'woocommerce'); ?></a><?php if (is_user_logged_in()): ?><a href="<?php echo esc_url(wc_get_page_permalink('myaccount')); ?>" class="button pay"><?php esc_html_e('Мой аккаунт', 'woocommerce'); ?></a><?php endif; ?></p>
<?php еще : ?>
<p class="woocommerce-notice woocommerce-notice--success woocommerce-thankyou-order-received"><?php echo apply_filters( 'woocommerce_thankyou_order_received_text', esc_html__( 'Спасибо. Ваш заказ получен.', 'woocommerce' ), $ заказ ); ></p>
<?php do_action('woocommerce_thankyou', $order->get_id()); ?>
<ul class="woocommerce-order-overview woocommerce-thankyou-order-details order_details">
<li class="woocommerce-order-overview__order order"><?php esc_html_e( 'Идентификатор номера заказа:', 'woocommerce' ); ><strong><?php echo $order->get_order_number(); // phpcs:игнорировать WordPress.Security.EscapeOutput.OutputNotEscaped ?></strong></li>
<li class="woocommerce-order-overview__date date"><?php esc_html_e('Дата:', 'woocommerce'); ?><strong><?php echo wc_format_datetime($order->get_date_created()); ></сильный></li>
</ul>
<?php конец; ?>
<?php else : ?><p class="woocommerce-notice woocommerce-notice--success woocommerce-thankyou-order-received"><?php echo apply_filters( 'woocommerce_thankyou_order_received_text', esc_html__( 'Спасибо. Ваш заказ был получено.', 'woocommerce'), ноль);>
</p><?php endif; ?>
</div>

Если все прошло хорошо, вы должны увидеть что-то вроде этого:

Удалить и изменить детали заказа на странице благодарности

Вывод

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

В этом руководстве мы рассмотрели два способа программного редактирования страницы благодарности WooCommerce:

  • С крючками
  • Перезапись файлов шаблонов

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

К настоящему времени вы должны быть в состоянии настроить свою страницу благодарности и:

  • Добавьте пользовательский контент, например ссылки на социальные сети.
  • Показать продукты
  • Показать данные учетной записи
  • Предоставляйте скидки, когда клиент достигает определенного минимума расходов
  • Удалить и изменить детали заказа

Наконец, обратите внимание, что те же хуки, определенные в файлах шаблонов WooCommerce, можно использовать в файле functions.php дочерней темы. Поэтому, если вы удалите хуки из файла шаблона, они перестанут работать на вашем сайте.

Дополнительные руководства по настройке вашего магазина см. по адресу:

  • Как настроить страницу магазина в WooCommerce
  • Редактировать страницу продукта WooCommerce программно
  • Как настроить страницу моей учетной записи WooCommerce

Вы настроили свою страницу благодарности? Какой метод вы использовали? Дайте нам знать в комментариях ниже!