/ Плагины / Настройка полей заказчика

Настройка полей заказчика

HIT

30.06.2016

6556

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

Поделиться в соц. сетях:

  • Похожие записи
  • Комментарии
  • Вложения
Разные шаблоны для разных категорий товаров

Разные шаблоны для разных категорий товаров

Учимся создавать разные шаблоны товаров для разных категорий. Данная технология пригодится в оформлении принципиально разных по подаче товаров. Также на основе этого можно создавать посадочные страницы категорий, создавая им любое Читать далее »

Купить в 1 клик

Купить в 1 клик

Добавляем в интернет-магазин кнопку «Купить в 1 клик». Рассмотрим различные плагины по данному направлению. WooCommerce Direct Checkout Плагин с 20 000 скачиваниями, по сути только меняет назначение кнопки «В корзину», Читать далее »

Обзор плагинов по созданию скидок

Обзор плагинов по созданию скидок

Рассмотрим различные плагины по созданию функционала скидок. Рассматриваться будут плагины которые предоставляют возможность комплексного формирования скидок на состав корзины. Практически все плагины в обзоре могут в бесплатной версии предоставить простой Читать далее »

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

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

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