2 эффективных способа настроить страницы оформления заказа WooCommerce

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

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

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

Давайте начнем!

• Знакомство со страницами оформления заказа WooCommerce
• Почему вы должны настраивать страницы оформления заказа WooCommerce
• Как вручную настроить страницы оформления заказа WooCommerce с помощью кода
• Редактируйте страницы оформления заказа WooCommerce с помощью плагинов

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

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

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

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

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

Почему вы должны настраивать страницы оформления заказа WooCommerce

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

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

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

В целом, эти идеи работают на одну цель: убить отказ от корзины.

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

А согласно исследованию института Baymard, среди причин отказа при оформлении заказа слишком долгий или сложный процесс оформления заказа занимает 27%.

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

Существуют различные способы улучшить взаимодействие с пользователем, например:

• Изменение шаблонов и дизайна кассы
• Добавление, удаление и изменение порядка полей
• Делаем обязательные поля необязательными
• Оптимизация заполнителей и меток
• Запуск бесплатной доставки
• Создание одностраничного оформления заказа

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

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

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

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

Редактировать поля оформления заказа

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

• woocommerce_checkout_fields
• woocommerce_billing_fields
• Woocommerce_shipping_fields
• woocommerce_checkout_before_order_review
• woocommerce_checkout_before_customer_details
• woocommerce_after_checkout_form

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

Изменить текст заполнителя

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

 _x('Примечания к вашему заказу, например, специальные примечания для доставки.', 'заполнитель', 'woocommerce')

Чтобы изменить его, добавьте этот фрагмент кода в файл functions.php:

 // Подключаем

add_filter('woocommerce_checkout_fields', 'custom_override_checkout_fields');

// Наша подцепленная функция - $fields проходит через фильтр!

функция custom_override_checkout_fields($fields) {

$fields['order']['order_comments']['placeholder'] = 'Мой новый заполнитель';

вернуть $поля;

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

1. Вставьте следующий код в файл function.php, чтобы начать редактирование страницы оформления заказа:

 <?php

/**

* Добавьте поле на страницу оформления заказа

*/

add_action('woocommerce_after_order_notes', 'customise_checkout_field');

функция customise_checkout_field($checkout)

{

эхо '<div><h2>' . __('Заголовок') . '</h2>';

woocommerce_form_field('customized_field_name', массив(

тип' => 'текст',

'класс' => массив (

'форма класса моего поля по всей строке'

),

'label' => __('Настроить дополнительное поле'),

'заполнитель' => __('Руководство') ,

'требуется' => правда,

), $checkout->get_value('customized_field_name'));

эхо '</div>';

}

После добавления этого кода на странице оформления заказа появится дополнительное поле:

2. Добавьте приведенный ниже код для проверки данных.

 <?php

/**

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

*/

add_action('woocommerce_checkout_process', 'customise_checkout_field_process');

функция customise_checkout_field_process()

{

// если поле установлено, если нет, то показать сообщение об ошибке.

if (!$_POST['customized_field_name']) wc_add_notice(__('Пожалуйста, введите значение.'), 'ошибка');

}

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

Это можно сделать с помощью следующего кода:

 <?php

/**

* Обновление значения поля

*/

add_action('woocommerce_checkout_update_order_meta', 'customise_checkout_field_update_order_meta');

функция customise_checkout_field_update_order_meta($order_id)

{

если (!пусто($_POST['customized_field_name'])) {

update_post_meta($order_id, 'Some Field', sanitize_text_field($_POST['customized_field_name']));

}

}

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

Используя приведенный ниже код:

 // Подключаем

add_filter('woocommerce_checkout_fields', 'custom_override_checkout_fields');

 

// Наша подцепленная функция - $fields проходит через фильтр!

функция custom_override_checkout_fields($fields) {

unset($fields['order']['order_comments']);

 

вернуть $поля;

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

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

 add_filter('woocommerce_billing_fields', 'wc_address_field_Optional');

функция wc_address_field_Optional($fields) {

$fields['billing']['billing_address_1']['required'] = false;

вернуть $поля;

}

Примечание. Учитывая, что любые ошибки, оставленные в файле function.php, могут привести к отключению вашего сайта, вы должны создать резервную копию своего сайта, прежде чем вносить какие-либо изменения. Мы рекомендуем безопасный способ, который подразумевает использование файла function.php вашей дочерней темы.

Редактируйте страницу оформления заказа WooCommerce с помощью плагинов

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

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

Этот бесплатный, но мощный плагин, разработанный Quadlayers, безусловно, тот, который вы не захотите оставлять на столе.

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

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

Итак, как оптимизировать страницу оформления заказа WooCommerce с помощью WooCommerce Checkout Manager?

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

WooCommerce Checkout Manager позволяет создавать настраиваемые поля на странице оформления заказа в разделах «Оплата», «Доставка» и «Дополнительные поля».

После установки и активации плагина в панели администратора выберите WooCommerce > Checkout > Billing.

1. Выберите «Добавить новое поле».
2. Заполните имя поля, метку и заполнитель.
3. Выберите типы полей.
4. Нажмите «Сохранить», чтобы обновить все изменения.
   

# 2 Удалить поля со страниц оформления заказа

Вы можете свободно удалять поля, переключая кнопку «Отключить».

# 3 Изменить положение кассового поля

Изменение порядка полей оформления заказа по умолчанию:

1. На поле, которое вы хотите переместить, нажмите кнопку с тремя вертикальными линиями.
2. Удерживая эту кнопку, перетащите поле в нужное место.
3. Нажмите «Сохранить изменения» внизу страницы.
   

Оптимизируйте страницу оформления заказа WooCommerce прямо сейчас!

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

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

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

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