При создании интернет-магазина на WordPress, в большинстве случаев прибегают к одному из самых популярных плагинов для этих целей в репозитории — WooCommerce. Это гибкое, быстрое и относительное понятное решение для данной CMS. Однако, обычный пользователь не всегда может понять как настраиваются и редактируются некоторые страницы, создаваемые этим плагином автоматически.
В этой статье я расскажу о редактировании одной из таких страниц — CheckOut (Чекаут), а точнее о том, как убрать лишние поля, которые по умолчанию создает и просит заполнить пользователей WooCommerce на этой странице.
Общее
Считаю важным упомянуть, что для успешного прохождения процедуры комплайенс во многих банках и платежных системах, собираемая по умолчанию плагином WooCommerce информация, является обязательной и необходимой (ФИ покупателя, ФИ плательщика, платёжный и адрес доставки, данные о выставлении счета и так далее). В некоторых странах сбор указанной информации также необходим для формирования бухгалтерских отчетов и иных документов.
Но речь не идет о 100% банков и платежных систем, не везде и не всегда налоговики требуют собирать все эти данные, да и не всем магазинам нужен от клиента адрес доставки товара, поскольку товар может быть и электронным-скачиваемым (не физическим; например, презентация, шаблон сайта, музыкальный бит и так далее).
Отсюда вытекает, что мы можем облегчить жизнь клиентам нашего магазина и не заставлять проходить их 7 кругов ада на Чекауте при помощи 10-12 обязательных полей. Это еще и на конверсиях положительно скажется.
Как убрать лишние поля
Плагин
В очередной раз повторюсь, что для решения 99% задач на WordPress используются плагины. Так и в нашем сегодняшнем случае — чтобы убрать лишние поля на странице Чекаут наиболее простым и быстрым сопособом, мы можем вопспольвовать этим плагином:
Checkout Field Editor (Checkout Manager) for WooCommerce
Перед тем как писать эту статью (и видео по ней), я попробовал несколько разных решений и данное мне показалось наиболее удобным. К тому же, именно этот плагин полностью бесплатный, а среди рекомендуемых плагинов на просторах интернета я встречал и платные и частично платные.
Код
Использование плагина для наших целей не является единственной доступной опцией. Есть и второй вариант, который больше подходит для разработчиков, или тех, кто не очень любит обилие установленных плагинов в административной панели — настройка полей через код.
Давайте для начала посмотрим из чего состоит страница Чекаут и для этого вставим такой код в functions.php:
add_filter( 'woocommerce_checkout_fields' , 'wpbl_show_fields' );
function wpbl_show_fields( $array ) {
// Выводим список полей, но только если пользователь имеет права админа
if( current_user_can( 'manage_options' ) ){
echo '<pre>';
print_r( $array);
echo '</pre>';
}
return $array;
}
После вставки кода, увидим массив всех полей оформления заказа в WooCommerce с параметрами. Как вы можете видеть в массиве, эти поля отсортированы по группам: billing, shipping, account, order. А конкретный массив полей, например, для поля «Название компании» выглядит так:
[billing_company] => Array
(
[label] => Название компании
[class] => Array
(
[0] => form-row-wide
)
[autocomplete] => organization
[priority] => 30
[required] =>
)
Мы будем работать с woocommerce_checkout_fields, но если вам одновременно нужны разные поля для выставления счета и для доставки, лучше использовать зацепку woocommerce_default_address_fields, потому что она влияет как на поля доставки, так и на выставление счетов одновременно.
Делаем поля не обязательными
Следующий код сделает все поля не странице оформления заказа не обязательными (кроме поля для ввода телефона (об этом написано сразу после кода):
add_filter( 'woocommerce_default_address_fields' , 'wpbl_fileds_validation' );
function wpbl_fileds_validation( $array ) {
// Имя
unset( $array['first_name']['required']);
// Фамилия
unset( $array['last_name']['required']);
// Область / район
unset( $array['state']['required']);
// Почтовый индекс
unset( $array['postcode']['required']);
// Населённый пункт
unset( $array['city']['required']);
// 1-ая строка адреса
unset( $array['address_1']['required']);
// 2-ая строка адреса
unset( $array['address_2']['required']);
// Возвращаем обработанный массив return $array;
}
Поле для ввода телефона, к сожалению, не входит в массив полей адреса. Нужно использовать woocommerce_checkout_fields, чтобы сделать поле не обязательным:
add_filter( 'woocommerce_checkout_fields', 'wpbl_phone_field_validation' );
function wpbl_phone_field_validation( $array ) {
// Телефон
unset( $array['billing']['billing_phone']['required'] );
// Возвращаем обработанный массив
return $array;
}
Убираем лишние поля при оформлении заказа
Избавиться от лишних полей также не сложно. Достаточно использовать этот код:
add_filter( 'woocommerce_checkout_fields', 'wpbl_remove_some_fields', 9999 );
function wpbl_remove_some_fields( $array ) {
//unset( $array['billing']['billing_first_name'] ); // Имя
//unset( $array['billing']['billing_last_name'] ); // Фамилия
//unset( $array['billing']['billing_email'] ); // Email
//unset( $array['order']['order_comments'] ); // Примечание к заказу
unset( $array['billing']['billing_phone'] ); // Телефон
unset( $array['billing']['billing_company'] ); // Компания
unset( $array['billing']['billing_country'] ); // Страна
unset( $array['billing']['billing_address_1'] ); // 1-ая строка адреса
unset( $array['billing']['billing_address_2'] ); // 2-ая строка адреса
unset( $array['billing']['billing_city'] ); // Населённый пункт
unset( $array['billing']['billing_state'] ); // Область / район
unset( $array['billing']['billing_postcode'] ); // Почтовый индекс
// Возвращаем обработанный массив
return $array;
}
Приоритет 9999 для зацепки выставлен потому, что такого рода изменения нужно запускать как можно позже.
Сортировка полей внутри группы
В некоторых случаях нам может понадобиться изменить порядок полей Чекаута. Вы должны помнить, что поля разделены на группы, а их всего 4:
- billing – Адрес выставления счёта
- shipping – Адрес доставки
- account – Информация об аккаунте
- order – Детали заказа
Каждая из этих групп содержит поля и можно легко изменить их порядок с помощью специального параметра приоритета. В качестве примера давайте сделаем поле Email первым, а это всего пара строк кода:
add_filter( 'woocommerce_checkout_fields', 'wplb_email_first' );
function wplb_email_first( $array ) {
// Меняем приоритет
$array['billing']['billing_email']['priority'] = 4;
// Возвращаем обработанный массив
return $array;
}
В данном примере мы выставили priority = 4. Но почему так? Каждое поле имеет свой приоритет по умолчанию. Чтобы не ошибиться, пользуйтесь приложенной ниже таблицей. Согласно ей, например, чтобы сделать поле электронной почты первым, нужно использовать значение меньше 10.
Группа | Название | Приоритет |
---|---|---|
Billing | billing_first_name | 10 |
billing_last_name | 20 | |
billing_company | 30 | |
billing_country | 40 | |
billing_address_1 | 50 | |
billing_address_2 | 60 | |
billing_city | 70 | |
billing_state | 80 | |
billing_postcode | 90 | |
billing_phone | 100 | |
billing_email | 110 | |
Shipping | shipping_first_name | 10 |
shipping_last_name | 20 | |
shipping_company | 30 | |
shipping_country | 40 | |
shipping_address_1 | 50 | |
shipping_address_2 | 60 | |
shipping_city | 70 | |
shipping_state | 80 | |
shipping_postcode | 90 | |
Account | account_password | – |
Order | order_comments |
–
|
Но установка приоритетов — это еще не все, потому как используя только их, можно поломать верстку. Иными словами, недостаточно отсортировать массив полей. Необходимо применить соответствующие классы и к каждому полю.
Каждое поле оформления заказа имеет свой стиль (класс CSS), в зависимости от его положения, есть 3 основных класса:
- Первый: form-row-first – 50% в ширину;
- Второй: form-row-last – 50% в ширину;
- Третий: form-row-wide – 100% в ширину.
Давайте расставим правильные приоритеты и назначим плавильные CSS классы:
add_filter( 'woocommerce_checkout_fields', 'wplb_reorder', 9999 ); function wplb_reorder( $array ) { // Меняем приоритет $array['billing']['billing_email']['priority'] = 30; $array['billing']['billing_phone']['priority'] = 40; // Назначаем CSS классы $array['billing']['billing_email']['class'][0] = 'form-row-first'; $array['billing']['billing_phone']['class'][0] = 'form-row-last'; // Возвращаем обработанный массив return $array; }
Как результат — всё выглядит правильно и приятно.
Небольшая ремарка по сортировке полей
Указанный выше путь иногда может не сработать. Это стало понятно опытным путем. В этом случае вы можете использовать пример сортировки ниже:
add_filter( "woocommerce_checkout_fields ", "custom_override_checkout_fields", 1);
function custom_override_checkout_fields($fields) {
$fields['billing']['billing_first_name']['priority'] = 1;
$fields['billing']['billing_last_name']['priority'] = 2;
$fields['billing']['billing_company']['priority'] = 3;
$fields['billing']['billing_country']['priority'] = 4;
$fields['billing']['billing_state']['priority'] = 5;
$fields['billing']['billing_city']['priority'] = 6;
$fields['billing']['billing_address_1']['priority'] = 7;
$fields['billing']['billing_address_2']['priority'] = 8;
$fields['billing']['billing_postcode']['priority'] = 9;
$fields['billing']['billing_email']['priority'] = 10;
$fields['billing']['billing_phone']['priority'] = 11;
return $fields;
}
add_filter( 'woocommerce_default_address_fields', 'custom_override_default_locale_fields' );
function custom_override_default_locale_fields( $fields ) {
$fields['state']['priority'] = 5;
$fields['city']['priority'] = 6;
$fields['address_1']['priority'] = 7;
$fields['address_2']['priority'] = 8;
return $fields;
}
Теперь точно все.