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

1. Редактирование полей через код

Если вы хотите кастомизировать поля оформления заказа вручную, WooCommerce предоставляет фильтр woocommerce_checkout_fields, который позволяет добавлять, изменять или удалять поля.

Пример кода для редактирования полей:

1. Откройте файл functions.php вашей темы
2. Добавьте следующий код для изменения полей:

// Изменение полей оформления заказа
add_filter( 'woocommerce_checkout_fields', 'customize_checkout_fields' );

function customize_checkout_fields( $fields ) {

    // Изменение метки поля "Телефон"
    $fields['billing']['billing_phone']['label'] = 'Мобильный телефон';

    // Сделать поле "Телефон" необязательным
    $fields['billing']['billing_phone']['required'] = false;

    // Удаление поля "Компания" из формы
    unset( $fields['billing']['billing_company'] );

    // Добавление нового поля "ИНН"
    $fields['billing']['billing_inn'] = array(
        'type'        => 'text',
        'label'       => 'ИНН',
        'placeholder' => 'Введите ваш ИНН',
        'required'    => true,
        'class'       => array( 'form-row-wide' ),
        'priority'    => 25,
    );

    return $fields;
}

Объяснение:

• ? Изменение метки поля: Вы изменяете текст метки поля "Телефон" на "Мобильный телефон"
• ? Сделать поле необязательным: Поле "Телефон" становится необязательным для заполнения
• ? Удаление поля: Поле "Компания" будет удалено из формы
• ? Добавление нового поля: Создаётся новое поле "ИНН", которое будет отображаться в форме

2. Изменение порядка полей

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

Пример кода для изменения порядка полей:

// Изменение порядка полей
add_filter( 'woocommerce_checkout_fields', 'reorder_checkout_fields' );

function reorder_checkout_fields( $fields ) {
    // Изменение порядка поля "Email"
    $fields['billing']['billing_email']['priority'] = 10;

    // Изменение порядка поля "Телефон"
    $fields['billing']['billing_phone']['priority'] = 20;

    return $fields;
}

В этом примере поле "Email" будет выводиться перед полем "Телефон".

3. Использование плагинов для редактирования полей оформления заказа

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

Популярные плагины для редактирования полей:

1. Checkout Field Editor for WooCommerce (by ThemeHigh)
   • > Позволяет добавлять, редактировать, удалять и изменять порядок полей через интерфейс
   • > Можно управлять обязательностью полей, настраивать их для разных типов заказов
2. WooCommerce Checkout Manager
   • > Интуитивный интерфейс для управления полями
   • > Поддерживает текстовые поля, выпадающие списки, чекбоксы и др.

Шаги для использования Checkout Field Editor for WooCommerce:

1. Установите и активируйте плагин через Плагины > Добавить новый
2. Перейдите в WooCommerce > Checkout Form
3. Вы увидите список всех полей, которые можно редактировать
4. Чтобы изменить поле:
   • Нажмите Edit напротив нужного поля
   • Измените метку, обязательность и порядок поля
5. Чтобы добавить новое поле:
   • Нажмите на кнопку Add Field и выберите тип поля
6. После всех изменений нажмите Сохранить

4. Добавление пользовательских полей (Custom Fields)

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

Пример кода для добавления пользовательского поля:

// Добавление нового поля в форму оформления заказа
add_filter( 'woocommerce_checkout_fields', 'add_custom_checkout_field' );

function add_custom_checkout_field( $fields ) {
    $fields['billing']['billing_custom_field'] = array(
        'type'        => 'text',
        'label'       => 'Ваш комментарий',
        'placeholder' => 'Введите комментарий к заказу',
        'required'    => false,
        'class'       => array( 'form-row-wide' ),
        'priority'    => 35,
    );
    return $fields;
}

Это добавит текстовое поле "Ваш комментарий" в форму оформления заказа.

5. Удаление полей оформления заказа

Вы можете удалить ненужные поля из формы оформления заказа, такие как поле "Компания" или поле "Телефон", если они не нужны вашему магазину.

Пример кода для удаления полей:

// Удаление поля "Компания" и "Телефон" из формы
add_filter( 'woocommerce_checkout_fields', 'remove_checkout_fields' );

function remove_checkout_fields( $fields ) {
    unset( $fields['billing']['billing_company'] ); // Удаляем поле "Компания"
    unset( $fields['billing']['billing_phone'] );   // Удаляем поле "Телефон"
    return $fields;
}

6. Сохранение и отображение пользовательских полей в заказах

Если вы добавили пользовательские поля, вы также можете сохранить их данные в заказе и отобразить их в админке WooCommerce.

Пример кода для сохранения данных:

// Сохраняем данные пользовательского поля в заказе
add_action( 'woocommerce_checkout_update_order_meta', 'save_custom_checkout_field' );

function save_custom_checkout_field( $order_id ) {
    if ( ! empty( $_POST['billing_custom_field'] ) ) {
        update_post_meta( $order_id, 'billing_custom_field', sanitize_text_field( $_POST['billing_custom_field'] ) );
    }
}

Пример кода для отображения данных в админке:

// Отображаем данные пользовательского поля в админке заказа
add_action( 'woocommerce_admin_order_data_after_billing_address', 'display_custom_checkout_field_in_admin', 10, 1 );

function display_custom_checkout_field_in_admin( $order ) {
    $custom_field = get_post_meta( $order->get_id(), 'billing_custom_field', true );
    if ( $custom_field ) {
        echo '
Комментарий: ' . $custom_field . '
';
    }
}

Теперь вы сможете увидеть введённое клиентом значение в админке на странице заказа.

7. Валидация пользовательских полей

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

Пример кода для валидации пользовательского поля:

// Добавляем валидацию для пользовательского поля
add_action( 'woocommerce_checkout_process', 'validate_custom_checkout_field' );

function validate_custom_checkout_field() {
    if ( isset( $_POST['billing_custom_field'] ) && empty( $_POST['billing_custom_field'] ) ) {
        wc_add_notice( __( 'Пожалуйста, заполните поле комментария.' ), 'error' );
    }
}

Этот код проверяет, что поле "Комментарий" заполнено, и выводит ошибку, если оно пустое.

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