Когда вы устанавливаете WooCommerce, то по умолчанию там уже создана страница оформления заказа с набором полей, который подходит большинству пользователей. Но в зависимости конкретно от вашей специфики, ваш магазин может быть ориентирован на определенную целевую аудитория. Можно продавать автомобильные шины, а можно товары для детей, например. Поэтому при оформлении заказа вам, как владельцу или администратору интернет-магазина может потребоваться дополнительная информация от ваших покупателей.
Соответственно, в таком случае потребуется дополнительное поле, где помимо основной информации покупатели будут указывать, например, дату рождения или какие-либо дополнительные пожелания. В этой статье я покажу, как добавить такие дополнительные поля в чекаут. Сделать это можно двумя способами. Первый способ, при помощи редактирования файла functions.php путем добавления кода. Второй способ, при помощи плагина.
Добавление кастомных полей в чекаут при помощи кода
Для начала идем на сайт WooCommerce в раздел Documentation. Далее находим страницу с описанием полей в оформлении заказа.
Там есть вся информация по доступным полям и как их изменить. Ниже я расскажу, как добавить произвольное поле после примечания к заказу.
Копируете следующий кусок кода и вставляете его в файл functions.php вашей темы.
/**
* Add the field to the checkout
*/
add_action( 'woocommerce_after_order_notes', 'my_custom_checkout_field' );
function my_custom_checkout_field( $checkout ) {
echo '<div id="my_custom_checkout_field"><h2>' . __('My Field') . '</h2>';
woocommerce_form_field( 'my_field_name', array(
'type' => 'text',
'class' => array('my-field-class form-row-wide'),
'label' => __('Fill in this field'),
'placeholder' => __('Enter something'),
), $checkout->get_value( 'my_field_name' ));
echo '</div>';
}После этого, на странице оформления заказа появится новое поле, которое называется My Field. Его название, а также лейбл и плейсхолдер можно изменить в этом коде на свои собственные.
Для валидации поля и оповещении пользователя, чтобы он заполнил это поле, можно добавить следующий код:
/**
* Process the checkout
*/
add_action('woocommerce_checkout_process', 'my_custom_checkout_field_process');
function my_custom_checkout_field_process() {
// Check if set, if its not set add an error.
if ( ! $_POST['my_field_name'] )
wc_add_notice( __( 'Please enter something into this new shiny field.' ), 'error' );
}В результате чего будет появляться сообщение об ошибке следующего содержания “Please enter something into this new shiny field.”, если данное поле не заполнено.
Чтобы сохранить значение этого поля в заказ, добавляем следующий код:
/**
* Update the order meta with field value
*/
add_action( 'woocommerce_checkout_update_order_meta', 'my_custom_checkout_field_update_order_meta' );
function my_custom_checkout_field_update_order_meta( $order_id ) {
if ( ! empty( $_POST['my_field_name'] ) ) {
update_post_meta( $order_id, 'My Field', sanitize_text_field( $_POST['my_field_name'] ) );
}
}Теперь введенные данные в этом поле отображаются в заказе. А чтобы данные были доступны при редактировании заказа, добавляем следующий код:
/**
* Display field value on the order edit page
*/
add_action( 'woocommerce_admin_order_data_after_billing_address', 'my_custom_checkout_field_display_admin_order_meta', 10, 1 );
function my_custom_checkout_field_display_admin_order_meta($order){
echo '<p><strong>'.__('My Field').':</strong> ' . get_post_meta( $order->id, 'My Field', true ) . '</p>';
}Добавление полей в чекауте с помощью плагина
Первый способ хорош для тех, кто предпочитает минимизировать количество установленных плагинов и усовершенствует сайт при помощи кода. Для тех, кто не владеет знаниями кода и предпочитает внедрять новый функционал при помощи плагинов, подойдет соответствующий плагин. Плагинов для редактирования полей в оформлении заказов довольно много. Я предпочитаю пользоваться плагином, который называется Checkout Field Editor for WooCommerce. Устанавливаете его, и можно добавлять, удалять и редактировать поля для оформления заказа.
