Как добавить дополнительное поле в форму оформления заказа WooCommerce

Опубликовано: 2020-09-21

Если вы используете магазин WooCommerce, то вы уже знаете о важности страницы оформления заказа. Однако бывают случаи, когда вам нужно добавить дополнительное поле в форму оформления заказа WooCommerce или другие настраиваемые поля оформления заказа на странице оформления заказа в соответствии с требованиями вашего проекта. Это может оказаться сложной задачей для некоторых владельцев магазинов WooCommerce, поэтому я решил создать краткое руководство о том, как добавить дополнительное поле в форму оформления заказа WooCommerce.

Страница оформления заказа WooCommerce

Как правило, страница оформления заказа — это термин электронной коммерции, который относится к странице, показываемой покупателю во время систематического процесса оформления заказа на последнем этапе перед совершением покупки. Есть несколько способов улучшить конверсию страницы оформления заказа, но один из способов — добавить дополнительное поле в форму оформления заказа WooCommerce, связанное с вашим конкретным продуктом, а также удалить все другие ненужные поля страницы оформления заказа.

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

Если на этой странице есть ошибки, ни один покупатель не сможет совершить покупку. Это сильно повлияет на производительность вашего магазина, так как вы не сможете совершать какие-либо продажи.

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

Добавить дополнительное поле в форму оформления заказа WooCommerce

Существует множество способов изменить страницу оформления заказа в ваших магазинах WooCommerce, например, с помощью стороннего плагина, расширений WooCommerce или пользовательской разработки.

Как я уже упоминал ранее, пользовательское поле оформления заказа WooCommerce важно для сбора дополнительных данных от покупателей до того, как они завершат заказ.

Бывают случаи, когда вам нужна дополнительная информация от ваших клиентов, и для этого вам нужно дополнительное поле.

Теперь, когда вы познакомились с основами, давайте углубимся в учебник. Чтобы добавить настраиваемое поле на страницу оформления заказа, мы будем использовать два подхода:

Использование плагина.
Создание пользовательского кода.

а) Шаги по добавлению дополнительного поля на страницу оформления заказа WooCommerce с помощью кода

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

Вот простые шаги, которые вам необходимо выполнить:

Войдите на свой сайт WordPress и получите доступ к панели инструментов в качестве пользователя-администратора.
В меню «Панель инструментов» нажмите « Меню внешнего вида» > «Меню редактора тем». Когда откроется страница Theme Editor , найдите файл функций темы, куда мы добавим функцию, которая добавит дополнительное поле на страницу оформления заказа в WooCommerce .
Добавьте следующий код в файл php :

 /**

* Добавить настраиваемое поле на страницу оформления заказа

*/

add_action('woocommerce_after_order_notes', 'custom_checkout_field');

функция custom_checkout_field($checkout)

{

эхо '<div id="custom_checkout_field"><h2>' . __('Новый заголовок') . '</h2>';

woocommerce_form_field('custom_field_name', массив(

'тип' => 'текст',

'класс' => массив (

'форма класса моего поля по всей строке'

),

'label' => __('Пользовательское дополнительное поле'),

'заполнитель' => __('Новое пользовательское поле') ,

),

$checkout->get_value('custom_field_name'));

эхо '</div>';

}

Чтобы увидеть результат , вам нужно обновить страницу оформления заказа, и вы должны увидеть это:
Однако важно отметить, что нам необходимо проверить данные пользовательского поля. для этого просто добавьте следующий код в файл functions.php :

 /**

* Процесс оформления заказа

*/

add_action('woocommerce_checkout_process', 'customized_checkout_field_process');

функция customized_checkout_field_process()

{

// Показать сообщение об ошибке, если поле не установлено.

if (!$_POST['customized_field_name']) wc_add_notice(__('Пожалуйста, введите значение!'), 'ошибка');

}

Если в пользовательском поле нет ввода, будет ошибка, и это будет результат : нет ввода в произвольное поле

Теперь, когда мы добавили настраиваемое поле проверки и проверили его, давайте теперь подтвердим, сохраняются ли данные, введенные в настраиваемое поле, или нет . Это можно сделать с помощью следующего кода, который будет добавлен в файл functions.php :

 /**

* Обновить значение, указанное в пользовательском поле

*/

add_action('woocommerce_checkout_update_order_meta', 'custom_checkout_field_update_order_meta');

функция custom_checkout_field_update_order_meta($order_id)

{

если (!пусто($_POST['customized_field_name'])) {

update_post_meta($order_id, 'Some Field',sanitize_text_field($_POST['customized_field_name']));

}

}

Как работает код.

Этот код работает в три простых шага. В первом фрагменте кода я создал настраиваемое поле с заголовком. Затем второй фрагмент предназначен для проверки наличия ввода в пользовательском поле.

Третий фрагмент кода используется для подтверждения того, что данные, введенные клиентом в настраиваемое поле, сохраняются или нет. Также важно отметить, что эти фрагменты кода должны быть добавлены в файл functions.php вашего магазина WooCommerce.

б) Шаги по добавлению дополнительного поля на страницу оформления заказа WooCommerce с помощью плагина

Это решение предназначено для пользователей WordPress, которые не знакомы с программированием. Это решение предполагает использование плагина WooCommerce Checkout Manager. Менеджер касс WooCommerce

Я дам вам подробное систематическое руководство, которое поможет вам скачать плагин и с его помощью добавить дополнительное поле на странице оформления заказа.

Вот шаги, которые вам необходимо выполнить:

Войдите на свой сайт WordPress и получите доступ к панели инструментов в качестве пользователя-администратора.
Затем мы собираемся установить плагин, который мы указали ранее. Если вы загрузили его по ссылке выше, просто перейдите в « Плагины» > «Добавить новый». После этого нажмите « Загрузить плагин », а затем найдите загруженный файл, как показано ниже:
Чтобы загрузить его прямо в панели администратора, просто перейдите в « Плагины» > «Добавить новый». После этого вам нужно будет выполнить поиск по ключевому слову для плагина «WooCommerce Checkout Manager». Вам необходимо установить и активировать его, как показано ниже:
Чтобы создать новые поля, перейдите на панель инструментов WordPress и нажмите WooCommerce > Настройки . Затем перейдите на вкладку «Оформить заказ» и нажмите на вкладку «Дополнительно» . Нажмите «Добавить новое поле», как показано ниже:
Появится новое окно, и вам нужно добавить соответствующие данные. Не забудьте сохранить все сделанные вами изменения:
Чтобы увидеть результат, обновите страницу оформления заказа, и вы увидите новое поле оформления заказа:

Вывод

В этом кратком руководстве я показал вам, как добавить новое поле на страницу оформления заказа. Я уверен, что теперь вы знаете, как добавить дополнительное поле, и это совсем не сложно. Я поделился двумя решениями. Один предполагает использование PHP-кода, который добавит дополнительное поле, а другой — плагин. У плагина есть и другие дополнительные функции, на которые вы также можете обратить внимание, и это решение для тех, кто не очень разбирается в технологиях. Однако вы можете изменить название полей в зависимости от ваших требований.