Сен
7
8

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

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. Условия наличия в корзине определенного товара или категорий может помочь реализовать интересные задачи.

рейтинг Оцените статью:
Ужасная статьяНичего интересногоТак себеНормальноХорошоКлассный постВ закладки!
(голосов - 4, средний балл: 4,50 из 7)
Загрузка...

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

комментариев 8 к статье “Текст на странице заказа и в корзине WooCommerce”

  • DanVi   10.09.2015

    TOD спасибо за полезную информацию. Не подскажите, где (в каком файле) править размер поля «имя», «фамилия», «телефон», «e-mail» на странице «Оформить заказ»? А то кривовато смотрится.

  • Tod   10.09.2015

    DanVi, нужно править файлы переводов через Poedit или ставить плагин Loco Translate.

  • DanVi   11.09.2015

    Tod, мне не перевести нужно, а РАЗМЕРЫ полей изменить и местами поменять.

  • Tod   11.09.2015

    DanVi, с этим, к сожалению, не сталкивался, нужно гуглить.

  • Василий   13.01.2016

    Здравствуйте!
    Нужно убрать со страницы оформления заказа внизу слово СВОЙСТВА,
    подскажите пожалуйста в каком файле находится это слово именно для этой страницы?
    Пробовал выводить всю копию сайта на комп, и искать через NOTEPAD всё-равно не получается, если можете подскажите пожалуйста.

  • Tod   14.01.2016

    Василий, могу лишь посоветовать программу WinGrep для быстрого поиска текста в файлах. К тому же в шаблоне не будет слова «Свойства», а оригинальная фраза. Лучше в таких случаях искать по стилям, прописанным в class рядом с нужным вам текстом.

  • Наталья   17.07.2016

    Здравствуйте. После того, как клиент оформил заказ появляется сообщение, что оформление заказ невозможно, так как корзина пуста. Как изменить этот текст на «Спасибо за ваш заказ»?

  • Tod   17.07.2016

    Наталья, мне кажется, этот текст свидетельствует о том, что что-то в магазине работает неправильно. Сообщение ведь просто так не выводится. Хотя, может, действительно глюк. Я когда-то переводил парочку текстовых надписей в WooCommerce с помощью функции gettext — посмотрите, возможно, поможет.

Оставить комментарий


Блог Wordpress Inside поможет вам научиться работать в вордпресс, закрепить и расширить имеющиеся знания. Плагины и шаблоны, разные хаки и функции wp, оптимизация и безопасность системы – все это и намного больше вы сможете найти на страницах нашего проекта!

Если хотите быстро и оперативно получать последние новости и статьи, то рекомендуем подписаться на обновления блога:

Последние посты
Лучшее в категории
Облако тегов
Скажи свое мнение!

В чем основные плюсы Wordpress?

Посмотреть результаты

Загрузка ... Загрузка ...
Друзья проекта
Последние новости