Как изменить сообщения об ошибках WooCommerce Checkout

Опубликовано: 2021-12-21

Вы ищете способы обновить уведомления об ошибках при оформлении заказа? Мы вас прикрыли. В этом руководстве мы покажем вам различные способы изменения сообщений об ошибках оформления заказа WooCommerce.

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

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

Зачем менять сообщения об ошибках при оформлении заказа?

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

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

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

изменить сообщения об ошибках проверки woocommerce - сообщения об ошибках проверки

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

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

Как изменить сообщения об ошибках WooCommerce Checkout

Существует два способа редактирования сообщений об ошибках оформления заказа WooCommerce :

С плагинами
Программно

Давайте рассмотрим оба метода, чтобы вы могли выбрать правильный в соответствии с вашими навыками и потребностями.

1) Настройте сообщения об ошибках оформления заказа с помощью плагинов.

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

Бесплатная версия поставляется с базовыми функциями, а премиум-версия стоит от 39 долларов США в год и открывает более расширенные возможности настройки.

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

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

2) Редактировать сообщения об ошибках оформления заказа программно.

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

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

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

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

 add_action('woocommerce_after_checkout_validation', 'quadlayers', 9999, 2);
 четыре слоя функций ($поля, $ошибки){
 // на случай ошибок валидации
 если( !пусто($errors->get_error_codes() )) {

 // опустить все существующие сообщения об ошибках
 foreach($errors->get_error_codes() как $code) {
 $ ошибки-> удалить ( $ код );
 }
 // отображаем пользовательское одиночное сообщение об ошибке
 $errors->add('validation', 'Ваше пользовательское сообщение идет сюда!!!' );
 }
 }

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

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

сообщение об ошибке woocommerce

Теперь проверьте интерфейс, добавьте любой товар в корзину и перейдите на страницу оформления заказа. Если вы попытаетесь совершить покупку, не заполнив обязательные поля, вы увидите такую ошибку:

изменить сообщения об ошибках проверки woocommerce - пользовательское сообщение об ошибке проверки

Таким образом, вы можете изменить сообщения об ошибках оформления заказа WooCommerce с помощью небольшого кода.

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

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

Как добавить пользовательское сообщение для оформления заказа

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

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

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

шорткоды кассы

Если вы хотите отобразить пользовательское сообщение до и после полей оформления заказа, вы можете использовать блок абзаца. Для этой демонстрации мы добавим один блок абзаца до и еще один после шорткода оформления заказа. Мы просто назовем их «До контента» и «После контента».

перед контентом и после коротких кодов контента

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

до содержания

сообщение после поля

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

Как изменить положение сообщения об ошибке

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

Сначала войдите в панель администратора WordPress и выберите «Внешний вид» > «Настроить» .

настройщик вордпресс

Откройте настройщик и перейдите в раздел « Дополнительные CSS ».

дополнительная опция css

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

Просто скопируйте этот фрагмент и вставьте его в мастер.

 форма.checkout {
 -ms-flex-wrap: обернуть;
 flex-wrap: обернуть;
 }

 .woocommerce-NoticeGroup-checkout {
 -вебкит-бокс-флекс: 1;
 -ms-flex: 1 1 100%;
 гибкий: 1 1 100%;
 максимальная ширина: 100%;
 ширина: 100%;
 нижняя граница: 40px;
 верхняя граница: 20px;
 }

 .woocommerce-NoticeGroup-checkout ul.woocommerce-ошибка {
 положение: родственник;
 верх:авто;
 внизу: авто;
 слева:авто;
 справа:авто;
 отступ справа: 30px;
 z-индекс: авто;
 курсор: по умолчанию;
 -ms-преобразование: нет;
 преобразование: нет;
 -webkit-transform: нет;
 анимация: нет;
 -webkit-анимация: нет;
 }

 .woocommerce-NoticeGroup-checkout ul.woocommerce-ошибка: после {
 содержание: нет;
 }

 .woocommerce-NoticeGroup-checkout ul.woocommerce-error.hidden-notice {
 анимация: нет;
 -webkit-анимация: нет;
 }

В этом случае мы даем сообщению поля в 40 пикселей внизу, 20 пикселей вверху, 30 пикселей отступа справа и 100% ширины. Настройте эти значения в соответствии с вашими предпочтениями и не забудьте сохранить изменения.

публиковать изменения css

Бонус: как скрыть ошибки WooCommerce

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

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

Чтобы скрыть ошибки, мы настраиваем файл wp-config.php . Во-первых, мы рекомендуем загрузить копию файла wp-config.php на ваш локальный компьютер, чтобы иметь резервную копию, которую вы можете восстановить при необходимости.

Есть несколько способов получить доступ к основным файлам WordPress. Для этой демонстрации мы будем использовать специальный плагин под названием File Manager. Сначала на панели инструментов перейдите в « Плагины»> «Добавить новый» и найдите «Диспетчер файлов». Найдя плагин, установите его и активируйте на своем сайте.

перенаправить страницу wordpress - установить файловый менеджер wp

После активации вы увидите конфигурацию плагина с левой стороны. Найдите файл wp-config.php .

изменить сообщения об ошибках проверки woocommerce - редактирование wp-config.php

Щелкните файл правой кнопкой мыши и выберите параметр « Редактор кода ».

изменить сообщения об ошибках проверки woocommerce - редактор кода

В середине файла вы увидите одну из следующих строк:

 определить('WP_DEBUG', правда);

или

 определить('WP_DEBUG', ложь);

изменить сообщения об ошибках проверки woocommerce - строка отладки wp

Как только вы найдете его, замените эту строку следующим кодом и сохраните файл:

 ini_set('display_errors','Выкл');
 ini_set('error_reporting', E_ALL);
 определить('WP_DEBUG', ложь);
 определить('WP_DEBUG_DISPLAY', ложь);

Код отключит все сообщения об ошибках.

изменить сообщения об ошибках проверки woocommerce - обновить файл wp-config.php

Вот и все! С этого момента в вашем магазине не будет отображаться никаких сообщений об ошибках.

Больше способов настроить кассу

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

Добавьте настраиваемые поля для оформления заказа

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

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

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

 // поле флажка
add_action('woocommerce_after_order_notes', 'quadlayers_subscribe_checkout');

функция quadlayers_subscribe_checkout($checkout) {
woocommerce_form_field('подписчик', массив(
'тип' => 'флажок',
//'требуется' => верно,
'класс' => массив ('форма пользовательского поля для всей строки'),
'label' => 'Подпишитесь на нашу рассылку.'
), $checkout->get_value('подписчик'));
}

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

Сделать поля необязательными

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

Например, если вы продаете виртуальные продукты, вы можете сделать поле « Адрес » в разделе « Оплата » необязательным, вставив следующий код в файл functions.php вашей дочерней темы.

 add_filter('woocommerce_billing_fields', 'wc_address_field_Optional');
функция wc_address_field_Optional($fields) {
$fields['billing']['billing_address_1']['required'] = false; 
вернуть $поля; 
}

Для получения дополнительной информации ознакомьтесь с нашим руководством по настройке оформления заказа WooCommerce.

Вывод

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

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

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

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

Другие интересные статьи смотрите в этих постах:

Как изменить текст «Перейти к оформлению заказа»
Лучшие плагины для оформления заказов WooCommerce
Как создать прямые ссылки для оформления заказа в WooCommerce