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

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

HIT

30.06.2016

2863

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

Для вывода (например) на главной странице сайта элементов WC. Последние продукты Полезно для использования на главной странице. Определяет, сколько товаров показывать на странице и количество сколько столбцов. Код: array( 'post_type' Читать далее »

/
Групповой товар Woocommerce

Групповой товар Woocommerce

Групповой товар в Woocommerce это объединение в одной карточке нескольких товаров. Причем зайдя в карточку можно приобрести каждый товар по отдельности это по сути не правильно. Зачем нужен такой вид Читать далее »

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

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

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