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

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

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

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

Настройка автофокуса поля происходит уже в знакомом нам хуке (если вы уже некоторое время читаете мой блог) 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 ), если вы работаете на тестовом сервере, либо почитать мои другие уроки про страницу оформления заказа.

Миша

В последние годы я долго не знал, что мне делать с сайтом misha.blog, ведь он практически не приносит никакого профита, но недавно я осознал, что моя миссия – способствовать распространению WordPress. Ведь WordPress – это лучший движок для разработки сайтов – как для тех, кто готов использовать заложенную структуру этой CMS, так и для тех, кто предпочитает headless решения.

Сам же я впервые познакомился с WordPress в 2009 году. Организатор WordCamp. Преподаватель в школах Epic Skills и LoftSchool.

Если вам нужна помощь с вашим сайтом или может даже разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда сделаем вам всё на лучшем уровне.

Оставить комментарий

Если вы хотите добавить код, не забудьте обернуть его в <pre lang="php"></pre>, если же код – меньше одной строчки, то можно и в <code></code>.