Сен
8

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

Author admin    Category Полезное     Tags

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

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

текст на странице оформления заказа в WooCommerce

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

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

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

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

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

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

Хак в 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», что отобразится перед формой оплаты.

Сообщения на странице оформления заказа в WooCommerce

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

YITH WooCommerce Cart Messages

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

Плагин YITH WooCommerce Cart Messages

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

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

Настройки YITH WooCommerce Cart Messages

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

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

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

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

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

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



Прокомментировать

Новые шаблоны и статьи

Рубрики

Популярные шаблоны

Мы помогаем детям


KosynokBannerNetwork