Оформление полей заказчика

При заказе товара необходимо заполнить данные покупателя (имя, телефон, адрес доставки и т.д.). В стандартном варианте поля эти несколько «раздуты», много лишнего, требуется некоторое оформление. Можно использовать плагин 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;

— Обязательное/Необязательное поле (в данном примере — Необязательное)

Еще больше информации в статье Настройка полей оформления заказа с помощью экшенов и фильтров

Форма Доставка по адресу

В 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, тем раньше (выше) будет выводиться поле.

Тэги: woocommerce, заказ