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

Опубликовано: 2020-10-29

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

Витрина магазина Настроить страницу оформления заказа

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

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

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

Настройка полей оформления заказа

На странице оформления заказа у клиентов запрашиваются:

Платежные реквизиты
Имя
Фамилия
Название компании
Страна
Адрес
Город/Город
Округ
Почтовый индекс / Почтовый индекс
Телефон
Адрес электронной почты
Примечания к заказу

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

 <body class="woocommerce-checkout">

<div класс="woocommerce">

<form class="woocommerce-checkout">

<div id="customer_details" class="col2-set">

<div class="woocommerce-биллинг-поля">

<p class="form-row">

<div class="woocommerce-shipping-fields">

<p class="form-row">

<div class="woocommerce-дополнительные поля">

<div id="order_review" class="woocommerce-checkout-review-order">

<table class="woocommerce-checkout-review-order-table">

<div ID="платеж">

<ul class="wc_payment_methods методы оплаты">

<div class="form-row размещение-заказ">

Шаги по изменению цвета фона и макета полей ввода текста и приданию им закругленных углов

Вот простые шаги, которые вам необходимо выполнить:

Войдите на свой сайт WordPress и получите доступ к панели инструментов в качестве пользователя-администратора.
В меню «Панель инструментов» нажмите « Меню внешнего вида» > «Настроить» .
Перейдите вниз к « Дополнительные CSS » на левой боковой панели.
Добавьте CSS

 ввод[тип="текст"] {

радиус границы: 10px !важно;

цвет фона: цвет морской волны !важно;

}

Это результат:
Чтобы изменить расположение полей, добавьте следующий код CSS:

 /****************ПРОВЕРИТЬ***************/

форма .woocommerce .form-row {

ширина: 100% !важно;

}

.woocommerce-checkout #payment div.payment_box input.input-text, .woocommerce-checkout #payment div.payment_box textarea {

ширина: 100% !важно;

отступ: 8px;

}

.woocommerce #payment .form-row select, .woocommerce-page #payment .form-row select {

ширина: 100%;

высота: 30 пикселей;

}

.woocommerce .col2-set .col-1, .woocommerce-page .col2-set .col-1, .woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2 {

плыть налево;

ширина: 100%;

}

.custom-checkout h3 {

цвет фона: #165f1c; /****ИЗМЕНИТЕ ЦВЕТ, КОТОРЫЙ ВЫ ХОТИТЕ ИСПОЛЬЗОВАТЬ ДЛЯ ФОНА ЗАГОЛОВКА ****/

ширина: 45%;

выравнивание текста: по центру;

отступ: 10 пикселей;

радиус границы: 5px;

поле сверху: 50px;

цвет: #FFF;

поплавок: справа;

}

Форма .woocommerce .form-row input.input-text, форма .woocommerce .form-row textarea {

набивка: .6180469716em;

цвет фона: #f2f2f2;

цвет: #43454b;

контур: 0;

граница: 0;

-webkit-внешний вид: нет;

радиус границы: 2px;

box-sizing: граница-коробка;

вес шрифта: 400;

граница: сплошная 2px #e4e4e4;

}

#wc_checkout_add_ons {

ширина: 45%;

поплавок: справа;

выравнивание текста: по центру;

}

Экран @media и (минимальная ширина: 980 пикселей) {

.woocommerce-shipping-fields h3, .woocommerce-billing-fields h3 {ширина: 100%;}

.woocommerce .col2-set, .woocommerce-page .col2-set {

ширина: 45%;

плыть налево;

}

.woocommerce-checkout-review-order{

ширина: 45%;

поплавок: справа;

}

}

Экран @media и (максимальная ширина: 979 пикселей) {

.custom-checkout h3 {

ширина: 100%;

}

}

Это результат:

Шаги по удалению поля проверки

Вот шаги, которые вам необходимо выполнить:

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

 /**

Удалить все возможные поля

**/

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

// Платежные поля

unset($fields['billing']['billing_company'] );

unset( $fields['billing']['billing_email'] );

unset($fields['billing']['billing_phone'] );

unset( $fields['billing']['billing_state'] );

unset( $fields['billing']['billing_first_name'] );

unset( $fields['billing']['billing_last_name'] );

unset($fields['billing']['billing_address_1'] );

unset($fields['billing']['billing_address_2'] );

unset($fields['billing']['billing_city'] );

unset( $fields['billing']['billing_postcode'] );
// Поля доставки

unset($fields['shipping']['shipping_company'] );

unset($fields['shipping']['shipping_phone'] );

unset($fields['shipping']['shipping_state'] );

unset( $fields['shipping']['shipping_first_name'] );

unset( $fields['shipping']['shipping_last_name'] );

unset($fields['shipping']['shipping_address_1'] );

unset($fields['shipping']['shipping_address_2'] );

unset($fields['shipping']['shipping_city'] );

unset($fields['shipping']['shipping_postcode'] );

// Поля заказа

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

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

}

add_filter('woocommerce_checkout_fields', 'wc_remove_checkout_fields');

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

Шаги, чтобы сделать обязательное поле необязательным

В этом примере я отредактирую поле «Телефон для выставления счетов». Вот шаги, которые вам необходимо выполнить:

Войдите на свой сайт WordPress и получите доступ к панели инструментов в качестве пользователя-администратора.
В меню «Панель инструментов» нажмите « Меню внешнего вида» > «Меню редактора тем». Когда страница Theme Editor открыта, найдите файл функций темы, чтобы сделать обязательное поле необязательным.
Добавьте следующий код в функцию. php- файл

 add_filter('woocommerce_billing_fields', 'wc_unrequire_wc_phone_field');

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

$fields['billing_phone']['required'] = false;

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

}

Это результат:

Шаги по изменению меток полей ввода и заполнителей

Вот простые шаги, которые вам необходимо выполнить:

Войдите на свой сайт WordPress и получите доступ к панели инструментов в качестве пользователя-администратора.
В меню «Панель инструментов» нажмите « Меню внешнего вида» > «Меню редактора тем». Когда страница редактора темы открыта, найдите файл функций темы, чтобы изменить метки полей ввода и заполнители.
Добавьте следующий код в файл php

 add_filter('woocommerce_checkout_fields', 'custom_override_checkout_fields');

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

{

unset($fields['billing']['billing_address_2']);

$fields['billing']['billing_company']['placeholder'] = 'Название компании';

$fields['billing']['billing_company']['label'] = 'Название компании';

$fields['billing']['billing_first_name']['placeholder'] = 'Имя';

$fields['shipping']['shipping_first_name']['placeholder'] = 'Имя';

$fields['shipping']['shipping_last_name']['placeholder'] = 'Фамилия';

$fields['shipping']['shipping_company']['placeholder'] = 'Название компании';

$fields['billing']['billing_last_name']['placeholder'] = 'Фамилия';

$fields['billing']['billing_email']['placeholder'] = 'Адрес электронной почты';

$fields['billing']['billing_phone']['placeholder'] = 'Телефон';

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

}

Это будет результат:

Вывод

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

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

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