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

В прошлых статьях мы рассказали о том, как добавить поля к уже существующим на странице оформления заказа (оплаты и доставки), но что если понадобится добавить какое-то свое поле? В сегодняшней статье мы покажем, как добавить новое поле на страницу оформления заказа в WooCommerce.

Для этого нам понадобится добавить следующий код в файл functions.php вашей темы или в плагин для сайта WordPress:

/**
 * Добавляем поле на страницу оформления заказа
 */
add_action( 'woocommerce_after_order_notes', 'my_custom_checkout_field' );

function my_custom_checkout_field( $checkout ) {

    echo '<div id="my_custom_checkout_field"><h2>' . __('Мое поле') . '</h2>';

    woocommerce_form_field( 'my_field_name', array(
        'type'          => 'text',
        'class'         => array('my-field-class form-row-wide'),
        'label'         => __('Заполните это поле'),
        'placeholder'   => __('Введите здесь требуемый текст'),
        ), $checkout->get_value( 'my_field_name' ));

    echo '</div>';

}

Вот что мы получим в результате:

Далее, нам необходимо будет проверить это поле в момент отправки формы заказа пользователем. В качестве примера мы сделаем его обязательным:

/**
 * Выполнение формы заказа
 */
add_action('woocommerce_checkout_process', 'my_custom_checkout_field_process');

function my_custom_checkout_field_process() {
    // Проверяем, заполнено ли поле, если же нет, добавляем ошибку.
    if ( ! $_POST['my_field_name'] )
        wc_add_notice( __( 'Пожалуйста, введите требуемый текст в наше новое замечательное поле.' ), 'error' );
}

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

И, наконец, сохраняем новое поле в произвольное поле заказа, используя следующий код:

/**
 * Обновляем метаданные заказа со значением поля
 */
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'] ) );
    }
}

Вот и все. Теперь поле будет сохраняться в заказе.

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

/**
 * Выводим значение поля на странице редактирования заказа
 */
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>'.__('Мое поле').':</strong> ' . get_post_meta( $order->id, 'My Field', true ) . '</p>';
}

А вот таким будет результат:

Делаем поле ввода телефона не обязательным

<?php

add_filter( 'woocommerce_billing_fields', 'wc_npr_filter_phone', 10, 1 );

function wc_npr_filter_phone( $address_fields ) {
    $address_fields['billing_phone']['required'] = false;
    return $address_fields;
}

?>

Добавляем произвольное поле в письма

Для того, чтобы добавить значение собственного нового поля в письма WooCommerce (письмо выполненного заказа), можно использовать следующий сниппет:

/**
* Добавляем поле в письма заказа
**/
add_filter('woocommerce_email_order_meta_keys', 'my_custom_checkout_field_order_meta_keys');

function my_custom_checkout_field_order_meta_keys( $keys ) {
$keys[‘My Field 1?] = ‘_my_field_1;
$keys[‘My Field 2?] = ‘_my_field_2?;
return $keys;
}

Вот и все. Мы надеемся, что эта статья помогла вам научиться добавлять собственные произвольные поля на страницу оформления заказа.

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

По всем вопросам и отзывам просьба писать в комментарии ниже.

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