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

Опубликовано: 2022-09-15
Содержание скрыть
1. Зачем настраивать страницу благодарности WooCommerce?
2. Настройте страницу благодарности WooCommerce с кодом
2.1. Настройка страницы благодарности путем создания редиректа
2.2. Настройка страницы благодарности с помощью фильтров
2.2.1. Изменение заголовка страницы благодарности
2.2.2. Персонализация заголовка страницы благодарности
2.2.3. Настройка текста перед информацией о заказе
2.3. Настройка страницы благодарности путем перезаписи файлов шаблонов WooCommerce
2.4. Как перенаправить на пользовательскую страницу благодарности на основе идентификатора варианта с помощью хука?
2.5. Печатать текст на странице благодарности на основе атрибута продукта
3. Как настроить собственную страницу благодарности для каждого продукта и для всего сайта с помощью плагина?
4. Заключительные слова

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

Цель этой статьи — предоставить вам общее руководство о том, как настроить страницу благодарности 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['полученный заказ'] )) {
		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_page' ) && is_order_received_page() && get_the_ID() === $id ) {
		$title = "Спасибо за заказ :)";
	}
	вернуть $название;
}

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

спасибо название страницы

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

Вы можете сделать это, чтобы включить имя клиента в заголовок или что-то еще.

add_filter('the_title', 'sa_personalize_order_received_title', 10, 2 );
функция sa_personalize_order_received_title ($ title, $ id) {
	если ( is_order_received_page() && get_the_ID() === $id ) {
		глобальный $wp;

		// Получить заказ. Следующие строки присутствуют в order_received() в файле include/shortcodes/class-wc-shortcode-checkout.php.
		$order_id = apply_filters('woocommerce_thankyou_order_id', absint($wp->query_vars['полученный заказ']));
		$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 )) {
				$ заказ = ложь;
			}
		}
		если ( $ заказ экземпляра 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/.

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

Вы можете использовать свой собственный шаблон, скопировав файлthankyou.php в папку вашей темы с похожей структурой папок.

Например, если вы используете тему Storefront, ваш файл Thankyou.php должен быть скопирован по адресу:
wp-content/themes/storefront/woocommerce/checkout/ folder. Вам нужно будет создать две папки: «woocommerce» и «checkout».

Когда WooCommerce обнаруживает, что тот же шаблон присутствует в вашей собственной теме, приоритет отдается шаблону, присутствующему в вашей теме.

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

детали оплаты и заказа на странице благодарности

Мы хотим предоставить код купона покупателю для его следующей покупки и удалить способ оплаты из верхней части.

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

Ниже приведен шаблон Thankyou.php:

<?php
если ( ! определено ('ABSPATH') ) {
	выход;
}
?>
 
<div class="woocommerce-заказ">
 
	<?php если ( $order ) : ?>

		<?php if ($order->has_status('сбой') ) : ?>

			<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 если ( is_user_logged_in() ) : ?>
					<a href="<?php echo esc_url(wc_get_page_permalink('myaccount')); ?>" class="button pay"><?php _e('Мой аккаунт', 'woocommerce'); ?>
				<?php конец; ?>
			</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('Идентификатор транзакции:', 'woocommerce'); ?>
					<strong><?php echo $order->get_order_number(); ?></сильный>
				</li>
 
				<li class="woocommerce-order-overview__date date">
					<?php _e('Дата:', 'woocommerce'); ?>
					<strong><?php echo date_i18n(get_option('date_format'), $order->get_date_created()); ?></сильный>
				</li>
 
				<li class="woocommerce-order-overview__total total">
					<?php _e('Всего:', 'woocommerce'); ?>
					<strong><?php echo $order->get_formatted_order_total(); ?></сильный>
				</li>
			</ul>

		<?php конец; ?>

		<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 конец; ?>
 
</div>

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

Они идут из другого файла. WooCommerce использует функцию woocommerce_order_details_table() , прикрепленную к woocommerce_thankyou hook .

Функция woocommerce_order_details_table() определена в файле include/wc-template-functions.php.

Страница благодарности представляет собой набор из четырех разных файлов шаблонов:

  1. шаблоны/оформить заказ/thankyou.php
  2. шаблоны/заказ/заказ-details.php
  3. шаблоны/заказ/заказ-детали-item.php
  4. шаблоны/заказ/заказ-детали-customer.php

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

Теперь давайте посмотрим, как настроить страницу благодарности WooCommerce для варианта продукта.

Как перенаправить на пользовательскую страницу благодарности на основе идентификатора варианта с помощью хука?

add_action('woocommerce_thankyou', 'sa_redirect_product_attribute_based', 10, 1); 
функция sa_redirect_product_attribute_based($order_id) {
	$order = wc_get_order($order_id);
	если ( $ заказ экземпляра WC_Order ) {
		foreach($order->get_items() as $item) {
			// Добавьте любой идентификатор варианта, который вы хотите, ниже здесь
			if ( !empty( $item[ 'variation_id' ] ) && 446 == $item[ 'variation_id' ] ) {
				// измените ниже на URL-адрес, на который вы хотите отправить своего клиента
				wp_redirect('https://demo.storeapps.org/custom-thank-you/');
			}
		}
	}
}

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

Расширяя приведенный выше пример, вы также можете отображать любой пользовательский текст на странице благодарности 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);
	если ( $ заказ экземпляра WC_Order ) {
		foreach($order->get_items() as $item) {
			// Добавьте сюда любой идентификатор варианта, который вы хотите. Мои атрибуты: Цвет, Размер
			if ( !empty( $item[ 'variation_id' ] ) && 446 == $item[ 'variation_id' ] ) {
				echo '<p>Не стесняйтесь обращаться к нам, если вы хотите обменять футболку на другой размер.</p>';
			}
		}
	}
}

Когда вы добавите код, страница благодарности будет выглядеть так:

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

Здесь довольно много фрагментов кода. Если вы не занимаетесь кодированием и хотите простое решение, прочитайте ниже, чтобы открыть для себя мощный плагин.

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

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

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

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

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

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

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

Дополнительные возможности плагина :

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

Попробуйте живую демонстрацию

Заключительные слова

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

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