Как отключить или изменить поле автофокуса на странице оформления заказа

Однажды работал с сайтом клиента и заметил, что на странице оформления заказа, сразу же при загрузке страницы, происходил странный стролл куда-то в центр. Секунду я не мог понять, почему так происходит, оказалось, что у него страница оформления заказа что-то типо лонгрида, а при загрузке происходит автофокус на первом поле формы 😁

И в этом супер-коротком уроке я покажу, как изменить поле автофокуса и как полностью его убрать.

Также рекомендую вам отдельный видеоурок про страницу оформления заказа.

Настройка автофокуса поля происходит уже в знакомом нам хуке (если вы уже некоторое время читаете мой блог) woocommerce_checkout_fields, при помощи этого хука вы можете изменять названия полей, удалять ненужные поля и так далее.

Итак, чтобы отключить автофокус с поля имени, вам понадобится этот код:

add_filter( 'woocommerce_checkout_fields', 'truemisha_change_autofocus', 25 );
 
function truemisha_change_autofocus( $fields ) {
 
	$fields[ 'billing' ][ 'billing_first_name' ][ 'autofocus' ] = false;
	return $fields;
 
}

Код можете вставить в functions.php вашей текущей темы, либо создать дочернюю или плагин.

Если же хотите изменить автофокус на другое поле, то вам достаточно поменять одну строчку из прошлого кода на две:

$fields[ 'billing' ][ 'billing_first_name' ][ 'autofocus' ] = false;
$fields[ 'billing' ][ 'billing_email' ][ 'autofocus' ] = true;

Если вы задаётесь вопросом, откуда узнать названия полей, то во-первых, вы можете распечатать массив полей через функцию print_r( $fields ), если вы работаете на тестовом сервере, либо почитать мои другие уроки про страницу оформления заказа.

Миша

Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.

Пишите, если нужна помощь с сайтом или разработка с нуля.