You are currently viewing WooCommerce. Создание кастомных полей в оформлении заказа

WooCommerce. Создание кастомных полей в оформлении заказа

Когда вы устанавливаете 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. Устанавливаете его, и можно добавлять, удалять и редактировать поля для оформления заказа.

Добавить комментарий