Зміна полів в оформлені замовлення на WooCommerce

Часто клієнти просять реалізувати поля оформлення замовлень на сайті на базі WordPress + WooCommerce під них. І це справді слушна ідея, адже WooCommerce пропонує дуже погані поля, а виключити можна лише деякі з них. Тобто ми маємо некрасиву і незручну сторінку оформлення замовлення. З точки зору покращення конверсій такі поля слід оптимізовувати і ось одне із ріщень:

Рішення такої проблеми у простому коді який слід додати у файл function.php вашої теми:

<?php /* не додавати в файл function.php */
add_filter( 'woocommerce_checkout_fields', 'easy_edit_checkout', 25 );
 
function easy_edit_checkout ( $fields ) {
 
	// Перейменовуємо поле ім'я
	$fields[ 'billing' ][ 'billing_first_name' ][ 'label' ] = 'ПІБ';
	// додаємо плейсхолдер для поля ім'я
	$fields[ 'billing' ][ 'billing_first_name' ][ 'placeholder' ] = 'Ваші ініціали';
	// удаляем поле фамилии
	unset( $fields[ 'billing' ][ 'billing_last_name' ] ); // фамилия
	// розтягуємо поле на всю ширину. Стандартне іде на 50%
	$fields[ 'billing' ][ 'billing_first_name' ][ 'class' ][ 0 ] = 'form-row-wide';
 
	return $fields;
 
}
  • $fields, це масив всіх полів, які використовуються на сторінці оформлення замовлення, ви легко можете вивести його за допомогою print_r() і подивитися ключі масивів.
  • У кожного поля є елементи масиву label і placeholder, змінюючи які, ви можете відповідно змінити назву будь-якого поля і додати будь-який плейсхолдер.