Главная  »  WooCommerce  »  Как изменить страницу Оформления заказа WooCommerce

Как изменить страницу Оформления заказа WooCommerce

Страница Оформления заказа — одна из самых важных в процессе покупки товара.

На этой странице клиенты вводят личные данные, делают оплату, а вы закрываете сделку.

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

Хотя стандартная страница Оформления заказа в WooCommerce уже достаточно проработанная, вы можете сделать несколько изменений, чтобы увеличить конверсии в продажи.

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

Содержание:

Как добавить собственные поля на странице Оформления заказа WooCommerce
Как сохранить значения кастомных полей в базу данных
Как сделать обязательные поля необязательными
Как добавить собственный контент
Как добавить дополнительные платы при оформлении заказа

Как добавлять шорткоды на страницу Оформления заказа
Как редактировать страницу Оформления заказа с помощью CSS

Чтобы сделать эти изменения, мы будем использовать хуки Вукоммерс и будем добавлять снипеты в файл functions.php.

Добавляйте снипеты в functions.php дочерней темы, или с помощью специального плагина.

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

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

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

Добавьте этот скрипт одним из способов, описанных выше:

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

Скрипт присваивает посетителю роль Subscriber (Подписчик), и дальше вы можете сделать рассылку по ролям Пользователей.

Как добавить кастомное поле на страницу Оформления заказа WooCommerce
Кастомное поле (чекбокс)

Если вы хотите сделать этот чекбокс обязательным, то уберите комментарий в строке 5.

Чтобы изменить текст чекбокса, напишите свой текст в строке 7.

Таким же образом вы можете добавить другие типы полей, например, радио-кнопку:

Как добавить кастомное поле (радио кнопка) на страницу Оформления заказа WooCommerce
Кастомное поле (радио-кнопка)

Добавьте этот скрипт в functions.php одним из способов:

Чтобы сделать ответ на этот вопрос обязательным, уберите комментарий в строке 5.

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

Как сохранить значения кастомных полей в базу данных

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

Чтобы записать эту информацию в базу данных, нужно использовать хук 'woocommerce_checkout_update_order_meta'.

Чтобы записать информацию из двух полей в предыдущем разделе, добавьте этот снипет в functions.php:

Перед сохранением информации в базу данных скрипт с помощью условия if() проверяет, заполнены поля или нет.

После добавления этого скрипта вы можете извлечь сохраненные данные из базы данных с помощью функции global “$post”.

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

Это пример использования, вы можете адаптировать эти скрипты в соответствии с вашей задачей.

Как сделать обязательные поля необязательными

Ещё один способ сделать страницу Оформления заказа более удобной — сделать обязательные поля необязательными.

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

Чтобы сделать поле Адрес необязательным, добавьте этот снипет в functions.php:

Как добавить собственный контент на странице Оформления заказа

С помощью хуков WooCommerce вы можете добавить любой тип контента, например, картинки, заголовки, текст, и так далее, на страницу Чекаут.

Чтобы добавить картинки способов оплат перед кнопкой Подтвердить заказ, используйте этот снипет:

Замените путь к картинке на ваш в строке 3.

Значки доверия на странице Оформления заказа WooCommerce
Способы оплаты / Значки доверия

Кроме картинок вы можете добавить заголовок на странице Чекаут:

Замените текст заголовка в строке 3.

Кастомный заголовок на странице Оформления заказа
Кастомный заголовок

Или текст. Например, вы можете указать примерное время доставки товара, или добавить блок Частых Вопросов:

Замените текст на свой в строке 3.

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

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

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

Фиксированный сбор

Примером такого сбора может быть упаковка товара. Пусть упаковка стоит 15 рублей.

Добавьте этот скрипт в functions.php:

Замените название сбора и его стоимость в строке 5.

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

Фиксированный сбор для определенных товаров

Если вы хотите добавить фиксированный сбор только для определенных товаров, то используйте этот скрипт:

Замените название сбора и его стоимость в строке 7, и ID нужных товаров в строке 11.

Процент от заказа

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

В этом примере мы добавим комиссию в размере 3% к общей стоимости заказа (товары + доставка).

Добавьте этот скрипт в functions.php:

Замените процент в строке 5, и название сбора в строке 7.

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

Как добавлять шорткоды на страницу Оформления заказа

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

Если вставить шорткод напрямую в хук страницы WooCommerce, то это не будет работать. Чтобы шорткод заработал, его нужно вставлять так:

echo do_shortcode('[woocommerce_cart]');

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

Вы можете использовать любой шорткод.

Как добавить шорткод на страницу Оформления заказа
Корзина и Оформление заказа на одной странице

Как редактировать страницу Оформления заказа с помощью CSS

Еще одна вещь, которую вы можете сделать — добавить собственные стили, чтобы настроить внешний вид страницы.

Самый простой способ добавить стили — в редакторе Гутенберг с помощью блока Произвольный HTML.

Выберите этот блок на странице Чекаут, добавьте в него теги <style> и </style>, и напишите свой css между этими тегами. Нажмите Сохранить.

Если вы хотите добавить стили через functions.php, используйте этот снипет:

Добавьте свои стили в строке 4.

Если вы хотите подключить отдельный файл со стилями к странице Чекаут, то используйте этот скрипт:

Так вы можете записать все стили в отдельный файл (в этом примере — checkout-style.css), который будет храниться в папке дочерней темы на том же уровне, что и основной файл style.css.

Плагины

Лучший плагин, который мне удалось найти для редактирования страниц Оформления заказа — WooCommerce Checkout Manager.

Плагин WooCommerce Checkout Manager

Этот плагин может все, что написано в этой статье, и больше:

  • Убрать, добавить, или изменить последовательность полей
  • Добавить загрузку файлов
  • Отображать информацию из кастомных полей в е-мейлах
  • Добавить условные поля и условную логику

Это платный плагин, но продается с лайф-тайм лицензией, которая стоит 19$ за 1 сайт.

Читайте также:

  1. Как отключить уведомления WooCommerce
  2. Как отключить кнопку В корзину в WooCommerce
  3. Прямая ссылка на вариативный товар WooCommerce
  4. Как вывести цену товара WooCommerce в любом месте сайта

Оставляйте комментарии.

Ответить

Techbear