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

Опубликовано: 2020-08-15

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

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

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

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

  • Создать одностраничную кассу
  • Измените стиль и дизайн оформления заказа с помощью CSS
  • Добавление, удаление или изменение порядка полей оформления заказа
  • Включить контент
  • Сделать поле обязательным или необязательным
  • Добавьте условные поля и создайте условную логику
  • Добавьте дополнительные сборы за доставку, упаковку и т. д.
  • И много других

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

Отредактируйте страницу оформления заказа WooCommerce: 2 метода

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

  1. С плагином
  2. Программно (кодирование)

Давайте подробнее рассмотрим каждый вариант.

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

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

Этот плагин существует на рынке уже пару лет и имеет более 90 000 активных загрузок. У него есть бесплатная версия с базовыми, но мощными функциями, которые вы можете скачать здесь, и 3 премиальных плана с более расширенными функциями, стоимость которых начинается от 19 долларов США (единовременный платеж). Давайте посмотрим, что может сделать этот инструмент.

настроить страницу оформления заказа WooCommerce - главная страница WooCommerce Checkout Manager

Менеджер касс WooCommerce

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

Инструмент позволяет добавлять или скрывать такие поля, как имя и фамилия, название компании, страна, город, почтовый индекс, адрес, номер телефона, электронная почта и другие. Для этого на панели инструментов WordPress выберите WooCommerce > Checkout , а затем вкладку Billing, Shipping или Additional. Там вы увидите список всех полей, которые вы хотите отобразить или скрыть. настроить страницу оформления заказа woocommerce — плагин менеджера оформления заказа

Создайте настраиваемое поле для загружаемого файла

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

Добавьте комиссию к кассе

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

  • Экспресс-доставка
  • Специальное обращение
  • Дополнительная плата за доставку в определенные страны или места
  • Сборы, связанные с кредитными картами или платежными шлюзами

Несмотря на то, что WooCommerce предлагает некоторые варианты добавления этих дополнительных сборов, Checkout Manager предоставляет вам больше контроля и гибкости. Чтобы добавить комиссию с помощью Checkout Manager, перейдите в WooCommerce > Checkout > Billing .

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

Затем перейдите на вкладку « Параметры », и мы добавим две метки: « Да » и «Нет ». Когда покупатель выберет экспресс-доставку, мы добавим дополнительную плату в размере 10 долларов США.

Добавить комиссию при оформлении заказа — Опции Сохраните изменения и все! Теперь, когда пользователь выбирает вариант экспресс-доставки при оформлении заказа, в его корзину будет добавлена ​​дополнительная плата в размере 10 долларов США.

Создание условных полей

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

  1. На панели инструментов WordPress перейдите в WooCommerce > Checkout > Billing и нажмите Add New Field.
  2. Выберите тип поля, которое вы хотите создать, и заполните метку, заполнитель/тип и описание. Это будет зависеть от типа условного выражения, которое вы создаете.
  3. После этого отметьте условный флажок справа. Выберите родительское поле и значение, которое родительское поле должно принимать для отображения условного поля.
  4. Нажмите Сохранить , и все готово!

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

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

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

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

2) Редактировать страницу оформления заказа программно (кодирование)

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

  1. Добавьте настраиваемые поля на страницу оформления заказа WooCommerce.
  2. Сохранение пользовательских полей в базу данных
  3. Сделать обязательное поле необязательным
  4. Добавьте контент на страницу оформления заказа
  5. Используйте шорткоды на странице оформления заказа WooCommerce
  6. Стилизуйте страницу оформления заказа с помощью пользовательского CSS

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

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

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

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

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

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

 // Поле ввода радио
add_action('woocommerce_before_order_notes', 'quadlayers_radio_checkout');
функция quadlayers_radio_checkout($checkout3){
woocommerce_form_field («канал», массив (
'тип' => 'радио',
//'требуется' => верно,
'класс' => массив ('форма пользовательского поля для всей строки'),
'label' => ' Как вы нас нашли?.',
'опции' => массив(
'Гугл' => 'Гугл',
'Друг' => 'Друг',
'Фейсбук' => 'Фейсбук',
'Ютуб' => 'Ютуб',
«Другое» => «Другое»
)
));
}

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

2.2) Сохранение значений настраиваемых полей в базу данных

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

Для этого вам нужно использовать 'woocommerce_checkout_update_order_meta' . Чтобы обновить два настраиваемых поля, которые вы добавили на шаге 2.1, скопируйте и вставьте следующий код в файл funcitons.php дочерней темы:

 add_action('woocommerce_checkout_update_order_meta','quadlayers_save_function');
функция quadlayers_save_function( $order_id ){
если ( ! пусто ($_POST['подписчик'] )) {
update_post_meta($order_id, 'подписчик', sanitize_text_field($_POST['подписчик']) );
}
если ( ! пусто ($_POST['канал'] )) {
update_post_meta($order_id, 'канал',sanitize_text_field($_POST['канал'] ));
}
}

Этот скрипт проверяет, пусто ли пользовательское поле или нет, с помощью условия if() перед сохранением его в базе данных. После добавления этого скрипта вы можете получить сохраненные данные из базы данных, используя global “$post” . В следующем скрипте мы получаем метаданные подписчика текущего заказа. Вы можете использовать это в бэкенде списка заказов WooCommerce.

 глобальный $пост;
$order = wc_get_order($post->ID);
$c_meta = $order->get_meta('подписчик');

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

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

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

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

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

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

Условные поля

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

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

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

Другой способ отредактировать страницу оформления заказа WooCommerce — добавить некоторый контент. Обладая глубоким знанием хуков оформления заказа WC, вы можете легко вставлять любой контент, такой как изображения, заголовки, текст и т. Д., Куда хотите. Например, вы можете использовать этот скрипт, чтобы добавить изображение значка доверия перед кнопкой « Разместить заказ » на странице оформления заказа:

 add_action('woocommerce_review_order_before_submit','quadlayers_checkout_content');
функция quadlayers_checkout_content(){
echo '<img src="https://www.heresylab.com/wp-content/uploads/2019/01/paypal-1.png" />;
}

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

 add_action (woocommerce_checkout_before_customer_details
,'quadlayers_checkout_header');
функция quadlayers_checkout_header(){
echo "<h2>Это настраиваемый заголовок<h2>
";
}

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

 add_action('woocommerce_after_order_notes', 'wc_add_message');
функция wc_add_message () {
echo 'Пожалуйста, помните, что доставка может занять до 5 рабочих дней.';
}

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

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

  • Фиксированный
  • Процент

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

Добавить фиксированную плату

Типичным примером фиксированной платы является экспресс-доставка. Предположим, вы хотите включить фиксированную плату в размере 10 долларов США за экспресс-доставку.

Просто используйте приведенный ниже скрипт и отредактируйте текст имени поля. В этом примере мы назовем « Дополнительную плату », и она добавит к заказу 10 долларов.

 add_action ( 'woocommerce_cart_calculate_fees' , функция () {
 если ( is_admin () && ! определено ( 'DOING_AJAX' )) {
 возврат ;
 }
 WC ()- > cart- > add_fee ( __ ( 'Дополнительная плата' , 'txtdomain' ), 10 );
 });

Имейте в виду, что этот код автоматически добавит фиксированную плату в размере 10 долларов США к общей сумме заказа клиента во время оформления заказа.

Добавьте процентную комиссию

Другой вариант — взимать комиссию в процентах. Это может быть полезно, если есть дополнительные налоги или вы хотите добавить дополнительную плату за определенные сборы платежных шлюзов. Допустим, мы хотим добавить комиссию в размере 3 % к общей стоимости заказа (товары + доставка).

 add_action ( 'woocommerce_cart_calculate_fees' , функция () {
 если ( is_admin () && ! определено ( 'DOING_AJAX' )) {
 возврат ;
 }
 $процент = 0,03 ;
 $percentage_fee = ( WC ()-> корзину -> get_cart_contents_total () + WC ()-> корзину -> get_shipping_total ()) * $percentage ;
 WC ()-> корзину -> add_fee ( __ ( 'Налог' , 'txtdomain' ), $percentage_fee );
 });

Этот скрипт добавит комиссию в размере 3% к общей сумме заказа покупателя во время оформления заказа.

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

2.6) Используйте шорткоды на странице оформления заказа WooCommerce.

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

 эхо do_shortcode('[ woocommerce_cart ]');

Таким образом, используя хук так же, как в предыдущих примерах, вы можете получить что-то вроде этого:

 add_action('woocommerce_after_checkout_form','quadlayers_checkout_shortcode');
функция quadlayers_checkout_shortcode(){
эхо do_shortcode('[ woocommerce_cart ]'); }

Этот скрипт принесет

 [ woocommerce_cart ]

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

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

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

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

 add_action('wp_head','quadlayers_checkout_style');

функция quadlayers_checkout_style(){
         если(is_checkout()==true){

                 echo '<style> body{background:#dfdfff!important;}<style>';
         }
}

Кроме того, вы можете взять этот сценарий за основу и добавить свои собственные правила CSS внутри тега HTML, чтобы придать ему идеальный внешний вид для вашего сайта. Это быстрый способ применить CSS к странице оформления заказа. Очень удобно добавлять небольшие кусочки CSS. Но если вам нужны более обширные сценарии стилей, вы должны поставить стиль CSS в очередь способом WordPress, используя встроенный хук wp_enqueue_style() следующим образом:

 add_action('wp_enqueue_scripts', 'quadlayers_enqueue_css');

функция quadlayers_enqueue_css(){    
    wp_enqueue_style('checkout_style',
        get_stylesheet_directory_uri() . '/checkout-style.css'
    );
}

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

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

Бонус: кассовые крючки

Существует множество хуков оформления заказа, которые вы можете использовать для редактирования страницы оформления заказа в WooCommerce. Вот некоторые из основных:

  • woocommerce_before_checkout_form
  • woocommerce_checkout_before_customer_details
  • woocommerce_checkout_billing
  • woocommerce_before_checkout_billing_form
  • woocommerce_checkout_shipping
  • woocommerce_before_order_notes
  • woocommerce_checkout_after_order_review
  • woocommerce_checkout_after_customer_details
  • woocommerce_review_order_before_cart_contents
  • woocommerce_review_order_before_shipping
  • woocommerce_review_order_after_order_total
  • woocommerce_checkout_order_review
  • woocommerce_review_order_before_submit
  • woocommerce_review_order_before_payment
  • woocommerce_review_order_after_submit
  • woocommerce_after_checkout_form

Для получения дополнительной информации о хуках и о том, как они работают, ознакомьтесь со следующими руководствами:

  • Как использовать хуки оформления заказа WooCommerce
  • Как использовать хуки WooCommerce — Полное руководство

Наконец, полный список хуков, которые вы можете использовать, можно найти на этой странице документации.

Вывод

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

  • С плагином
  • Программно (через кодирование)

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

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

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

Наконец, если вы хотите узнать о различных вариантах редактирования страницы магазина в своем магазине, мы рекомендуем вам ознакомиться с этим пошаговым руководством .

У вас есть вопросы или вы хотите поделиться с нами настройками оформления заказа, которые вы применили к своему сайту? Дайте нам знать в комментариях ниже! Мы будем рады услышать от вас!