При заказе товара необходимо заполнить данные покупателя (имя, телефон, адрес доставки и т.д.). В стандартном варианте поля эти несколько «раздуты», много лишнего, требуется некоторое оформление. Можно использовать плагин Saphali Woocommerce Russian, у него удобно реализовано оформление полей заказчика, но можно вполне обойтись без него.
Отключаем ненужные поля
Включаем в файле functions.php
unset – удалить поле, если поле нужно, то комментируем строку //
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );
function custom_override_checkout_fields( $fields ) {
//unset($fields['billing']['billing_first_name']); //Имя
unset($fields['billing']['billing_last_name']); //Фамилия
unset($fields['billing']['billing_company']); //Название компании
//unset($fields['billing']['billing_address_1']); //Адрес
unset($fields['billing']['billing_address_2']); //Подъезд этаж и т.п.
//unset($fields['billing']['billing_city']); //Населенный пункт
//unset($fields['billing']['billing_postcode']); //Почтовый индекс
unset($fields['billing']['billing_country']); //Страна
//unset($fields['billing']['billing_state']); //Область/Регион
//unset($fields['billing']['billing_phone']); //Телефон
//unset($fields['order']['order_comments']); //Примечания к заказу
//unset($fields['billing']['billing_email']); //Емейл
return $fields;
}Настраиваем параметры поля
Можно изменить стандартные лэйбл (текст перед полем), placeholder, стиль поля, обязательное/необязательное и пр.
// Настройка полей
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );
function custom_override_checkout_fields( $fields ) {
//unset($fields['billing']['billing_first_name']); //Имя
$fields['billing']['billing_first_name']['placeholder'] = 'Ваше имя';
$fields['billing']['billing_first_name']['label'] = '';
unset($fields['billing']['billing_last_name']); //Фамилия
//unset($fields['billing']['billing_email']); //Емейл
$fields['billing']['billing_email']['placeholder'] = 'E-mail';
$fields['billing']['billing_email']['label'] = '';
$fields['billing']['billing_email']['class'] = array('form-row-last');
//unset($fields['billing']['billing_phone']); //Телефон
$fields['billing']['billing_phone']['placeholder'] = 'Ваш телефон';
$fields['billing']['billing_phone']['label'] = '';
unset($fields['billing']['billing_company']); //Название компании
//unset($fields['billing']['billing_address_1']); //Адрес
$fields['billing']['billing_address_1']['placeholder'] = 'Адрес доставки';
$fields['billing']['billing_address_1']['label'] = '';
unset($fields['billing']['billing_address_2']); //Подъезд этаж и т.п.
//unset($fields['billing']['billing_city']); //Населенный пункт
$fields['billing']['billing_city']['placeholder'] = 'Населенный пункт';
$fields['billing']['billing_city']['label'] = '';
//unset($fields['billing']['billing_postcode']); //Почтовый индекс
$fields['billing']['billing_postcode']['placeholder'] = 'Индекс';
$fields['billing']['billing_postcode']['label'] = '';
unset($fields['billing']['billing_country']); //Страна
//unset($fields['billing']['billing_state']); //Область/Регион
$fields['billing']['billing_state']['placeholder'] = 'Область/Регион';
$fields['billing']['billing_state']['label'] = '';
//unset($fields['order']['order_comments']); //Примечания к заказу
return $fields;
}Пояснения:
$fields['billing']['billing_email']['placeholder'] = 'E-mail';— Добавляем/Изменяем/Убираем Placeholder
$fields['billing']['billing_email']['label'] = '';— Добавляем/Изменяем/Убираем (в данном примере — Убираем) текст перед полем
$fields['billing']['billing_email']['class'] = array('form-row-last');— Добавляем/Изменяем/Убираем класс блока с полем (form-row-first, form-row-last, form-row-wide (во всю ширину))
$fields['billing']['billing_last_name']['required'] = false;— Обязательное/Необязательное поле (в данном примере — Необязательное)
Еще больше информации в статье Настройка полей оформления заказа с помощью экшенов и фильтров
У данного функционала есть один изъян. Если не заполнить поля и нажать кнопку Оформить — появится всплывающее сообщение, что поле является обязательным, но названия поля не будет отображатся.
Решение: происходит это из-за того, что мы отключаем название в label. Чтобы это устранить не нужно отключать лэйблы, а просто задать им стиль .woocommerce-billing-fields label {display: none;}
Изменение placeholder для адреса
Приведенным выше способом placeholder и приоритет у адреса оплаты/доставки не меняется, нужно использовать другую функцию:
add_filter('woocommerce_default_address_fields', 'wc_override_address_fields');
function wc_override_address_fields( $fields ) {
$fields['address_1']['placeholder'] = 'Адрес доставки (улица, номер дома и квартира)';
$fields['address_1']['priority'] = 100;
return $fields;
}Форма Доставка по адресу
В WC существует дополнительная форма, при нажатии чекбокса Доставка по другому адресу?.
Чтобы влиять на поля этой формы — надо заменить в строках выше billing на shipping, в каждой строке встречается по 2 раза.
Если даже сделать поля доставки обязательными и на сайте их не заполнить — заказ совершается. Это неправильно. Можно сделать валидацию для этих полей:
//Добавляем валидацию полям
add_action('woocommerce_checkout_process', 'my_custom_checkout_field_process');
function my_custom_checkout_field_process() {
if ( ! $_POST['shipping_address_1'] ) wc_add_notice( __( 'Заполните адрес доставки' ), 'error' );
if ( ! $_POST['shipping_city'] ) wc_add_notice( __( 'Заполните город доставки' ), 'error' );
}Изменить порядок полей
Грубый способ, но работает! Нужно в шаблоне checkout/form-billing.php заменить код
<?php foreach ($checkout->checkout_fields['billing'] as $key => $field) : ?>
<?php woocommerce_form_field( $key, $field, $checkout->get_value( $key ) ); ?>
<?php endforeach; ?>на
<?php
// нужно удалить лишние поля и расставить в необходимом порядке
$mybillingfields=array(
"billing_first_name",
"billing_last_name",
"billing_company",
"billing_address_1",
"billing_address_2",
"billing_city",
"billing_state",
"billing_postcode",
"billing_country",
"billing_email",
"billing_phone",
);
foreach ($mybillingfields as $key) : ?>
<?php woocommerce_form_field( $key, $checkout->checkout_fields['billing'][$key], $checkout->get_value( $key ) ); ?>
<?php endforeach; ?>Еще один современный способ изменения последовательности полей — с помощью CSS свойств flex. Добавляем следующие CSS свойства:
.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.woocommerce form .form-row-first, .woocommerce form .form-row-last {width: 47%;}
.woocommerce form .form-row-wide {width: 100%;}
#shipping_postcode_field {order: 10;}
#shipping_state_field {order: 20;}
#shipping_city_field {order: 30;}
#shipping_address_1_field {order: 40;}
#shipping_address_2_field {order: 50;}Так вот, чем ниже индекс order, тем раньше (выше) будет выводиться поле.
Теперь приоритеты полей стало делать еще проще. У полей появился параметр [‘priority’]
Пример выставления приоритетов:
//unset($fields['billing']['billing_email']); //Емейл
$fields['billing']['billing_email']['placeholder'] = 'E-mail';
$fields['billing']['billing_email']['class'] = array('form-row-last');
$fields["billing"]["billing_email"]["priority"] = 12;
//unset($fields['billing']['billing_phone']); //Телефон
$fields['billing']['billing_phone']['placeholder'] = 'Ваш телефон';
$fields['billing']['billing_phone']['class'] = array('form-row-first');
$fields["billing"]["billing_phone"]['priority'] = 11;Отключить стили select (Страна)
// Отключить стили select (Страна)
function woo_dequeue_select2() {
if ( class_exists( 'woocommerce' ) ) {
wp_dequeue_style( 'select2' );
wp_deregister_style( 'select2' );
wp_dequeue_script( 'selectWoo');
wp_deregister_script('selectWoo');
}
}
add_action( 'wp_enqueue_scripts', 'woo_dequeue_select2', 100 );Maxlength и Minlength
Maxlength добавляется также как другие атрибуты полей WC:
$fields['billing']['billing_first_name']['maxlength'] = 50;И работает нативно, больше этого количества в поле просто не удастся ввести.
А вот minlength таким образом не добавляется. Чтобы его добавить можно применить такой код:
$fields['billing']['billing_company']['custom_attributes']['minlength'] = 15;Но даже при добавлении этого атрибута, не будет никакой проверки поля. Чтобы сделать проверку на количество символов нужно использовать следующую функцию:
add_action( 'woocommerce_checkout_process', 'bbloomer_checkout_fields_custom_validation' );
function bbloomer_checkout_fields_custom_validation() {
if ( isset( $_POST['billing_company'] ) && ! empty( $_POST['billing_company'] ) ) {
if ( strlen( $_POST['billing_company'] ) < 15 ) {
wc_add_notice( 'Наименование компании должно содержать не менее 15 символов.', 'error' );
}
}
}
