Текст на странице заказа и в корзине WooCommerce

Работаю сейчас над одним WordPress магазином и достаточно активно изучаю плагин WooCommerce. В данном модуле очень много разных нюансов и дополнений, например, Mix/Max заказ, бесплатная доставка или Ajax обновление корзины. Время от времени буду рассказывать о них в постах блога, дабы и вам было полезно почитать, и самому не забыть.

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

Но как добавить данный текст перед формой? Редактировать PHP файлы плагина WooCommerce решение не совсем корректное. Тут есть 3 подхода:

• Обычное добавление текста на страницу.
• Сниппет в Functions.
• Через плагин.

Текст на самой странице оформления заказа

Учитывая то, что физически форма оформления заказа находится на обычной WordPress странице, то вы можете просто добавить туда нужный текст. Размещаете его перед шорткодом [woocommerce_checkout].

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

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

Хак в functions.php

В плагине достаточно много разных хуков и функций, позволяющих вносить правки в работу модуля без редактирования кода, например хак для меню личного кабинета WooCommerce. Еще одно решение задачи с добавлением текста на страницу оформления заказа было найдено на github. Я использовал следующий код, добавив его в файл functions.php:

add_action( 'woocommerce_before_checkout_form', 'skyverge_add_checkout_content', 12 );
function skyverge_add_checkout_content() {
	echo '<p style="text-align: justify;"><em>Заполните форму ниже, поля <abbr class="required">*</abbr> обязательные.</p>';
}

Хак выводит элемент контента после всех уведомлений (о логине, купонах). Как только пользователь отправит вам заказ, данное сообщение будет скрыто. По сути, оно отображается только на этапе захода на страницу до совершения покупки.

По ссылке выше на github на самом деле есть сразу несколько «приемчиков». Функции:

add_action( 'woocommerce_before_checkout_form', 'skyverge_add_checkout_success', 9 );
function skyverge_add_checkout_success() {
	wc_print_notice( __( 'A success message with high priority.', 'woocommerce' ), 'success' );
}
 
 
add_action( 'woocommerce_before_checkout_form', 'skyverge_add_checkout_notice', 11 );
function skyverge_add_checkout_notice() {
	wc_print_notice( __( 'A notice message instead.', 'woocommerce' ), 'notice' );
}
 
 
add_action( 'woocommerce_review_order_before_payment', 'skyverge_before_paying_notice' );
function skyverge_before_paying_notice() {
	wc_print_notice( __( 'An error message.', 'woocommerce' ), 'error' );
}

..добавят на страницу оформления заказа WooCommerce три сообщения:

1. Элемент с «успешным действием», который будет располагаться перед другими сообщениями. Текст элемента — «A success message with high priority».
2. Информационное сообщение «A notice message instead», что выводится после всех других сообщений.
3. Элемент предупреждение с текстом «An error message», что отобразится перед формой оплаты.

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

YITH WooCommerce Cart Messages

Еще один способ добавление сообщения на страницу оформления заказа — использование специального плагина YITH Cart Messages от тех же разработчиков, что придумали решение для PDF счетов в Woocommerce. На момент написания статьи поддерживались версии вордпресс от 3.5.1 до 4.1.7 (я тестировал на 4.2.4). Модуль имеет более 8 тысяч загрузок и наивысшую оценку.

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

1. Установить модуль, скачав отсюда или сделал это через админку.
2. Зайти в раздел YITH Plugins — выбрать меню Cart Messages. Там требует задать страницы на которых будет отображаться сообщение.
3. Далее нужно добавить само сообщение, указав все настройки. Это делается в разделе WooCommerce — Yith Cart Messages.

В поле Message Type вы можеет выбрать 3 типа сообщения:

• Simple message — простой текст для отображения.
• «Products in cart» message — создается сообщение, если в WooCommerce корзине есть указанный товар.
• «Categories in cart» message — появляется, если в корзине есть заказы из выбранной категории.

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

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

Итого. Чтобы добавить текст на страницу оформления заказа в WooCommerce я лично использовал второй вариант с хаком через functions.php. Если требуется отображение простой фразы, то этого решения более чем достаточно. Для более сложных ситуаций можно применить плагин YITH WooCommerce Cart Messages. Условия наличия в корзине определенного товара или категорий позволяют реализовывать интересные задачи.

Понравился пост? Подпишись на обновления блога по RSS, Email или twitter!

Оцените статью:

(голосов - 7, средний балл: 5,57 из 7)

Загрузка...

Категории: WooCommerce; Возможности; Плагины; Хаки и секреты;
Теги: интернет-магазин, корзина WooCommerce, полезные плагины, сниппеты, электронная коммерция.