/ Сайтостроение / Плагины / Оформление полей заказчика

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

HIT

30.06.2016

3348

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

— Добавляем/Изменяем/Убираем класс блока с полем

$fields['billing']['billing_last_name']['required'] = false;

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

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

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

Решение: происходит это из-за того, что мы отключаем название в label. Чтобы это устранить не нужно отключать лэйблы, а просто задать им стиль .woocommerce-billing-fields label {display: none;}

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

В 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

Сообщения woocommerce

Сообщения woocommerce — система сопроводительной информации при использовании интернет-магазина. В системе есть 3 типа сообщений: информационные (notice), успешные действия (success), ошибки/предупреждения (error) Стандартные сообщения Это перечень стандартных сообщений разделенных по Читать далее »

Хуки для woocommerce

Хуки для woocommerce

Здесь собраны наиболее востребованные хуки woocommerce, которые могут пригодится при настройке любого интернет-магазина. С другими полезными хуками можно ознакомиться здесь Необходимые части кода вставляем в файл functions (лучше использовать отдельный Читать далее »

/
Upgrade WC

Upgrade WC

Очередная серия улучшений (upgrade) плагина WC. Буду добавлять по мере изучения новые решения. Поиск по SKU (артикулу) Из коробки WC не ищет по артикулам (SKU). Но достаточно установить плагин Search Читать далее »

/

Добавить комментарий

Пока нет комментариев. Будь первым!

Оформление полей заказчика
Иерархия по бренду
Рекомендации для васИерархия по брендуOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.