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

Опубликовано: 2020-12-20

WooCommerce добавить поле даты в кассу Многим интернет-магазинам нужны настраиваемые поля на странице оформления заказа. Например, кондитерской может понадобиться поле даты доставки на странице оформления заказа.

Прелесть WooCommerce в том, что он позволяет добавлять настраиваемые поля на странице оформления заказа, например, после полей выставления счетов и доставки или перед кнопкой размещения заказа.

WooCommerce добавить поле даты в кассу

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

1. Добавление пользовательского поля даты на страницу оформления заказа WooCommerce

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

Чтобы добавить сюда настраиваемое поле, мы будем использовать действие woocommerce_after_checkout_billing_form . Добавьте следующий код в файл functions.php:

 add_action('woocommerce_after_checkout_billing_form', 'njengah_extra_fields_after_billing_address', 10, 1);

функция njengah_extra_fields_after_billing_address () {

            _e("Дата доставки: ", "add_extra_fields");

            ?>

            <br>

            <input type="text" name="add_delivery_date" class="add_delivery_date" placeholder="Дата доставки">

  <?php

}

Это результат: Поле даты доставки

Покупателям необходимо выбрать дату доставки заказа. Это означает, что нам нужно добавить календарь для этого поля. Кроме того, вы можете попробовать это с простым текстовым полем, чтобы упростить задачу.

Мы будем использовать средство выбора даты jQuery. Это означает, что нам нужно будет включить необходимые файлы JavaScript и CSS с помощью действия WordPress wp_enqueue_scripts.

 add_action('woocommerce_after_checkout_billing_form', 'display_extra_fields_after_billing_address', 10, 1);

функция display_extra_fields_after_billing_address () {

_e("Дата доставки: ", "add_extra_fields");

?>

<br>

<input type="text" name="add_delivery_date" class="add_delivery_date" placeholder="Дата доставки">

<скрипт>

jQuery (документ) .ready (функция ( $ ) {

$( ".add_delivery_date").datepicker( {

минДата: 0,

});

});

</скрипт>

<?php

}

add_action('wp_enqueue_scripts', 'enqueue_datepicker');

функция enqueue_datepicker() {

если (is_checkout()) {

// Загружаем скрипт выбора даты (предварительно зарегистрированный в WordPress).

wp_enqueue_script('jquery-ui-datepicker');

// Вам нужен стиль для выбора даты. Для простоты я сделал ссылку на размещенный в Google jQuery UI CSS.

wp_register_style('jquery-ui', '//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css');

wp_enqueue_style('jquery-ui');

}

}

Это результат: календарь на поле

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

Я прикрепил функцию display_extra_fields_after_billing_address() к действию WooCommerce. Во-первых, мы печатаем метку «Дата доставки» и добавляем одно текстовое поле ввода для средства выбора даты, которое можно использовать с помощью функции jquery datepicker( ).

После этого я прикрепил enqueue_datepicker() к действию WordPress. В этой функции я добавил средство выбора даты jQuery и его стиль, используя wp_enqueue_script() .

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

2. Отображение настраиваемого поля в уведомлениях по электронной почте

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

 add_action('woocommerce_checkout_update_order_meta', 'add_order_delivery_date_to_order', 10, 1);

функция add_order_delivery_date_to_order ( $order_id ) {

if ( isset( $_POST ['add_delivery_date'] ) && '' != $_POST ['add_delivery_date'] ) {

add_post_meta($order_id, '_delivery_date', sanitize_text_field($_POST ['add_delivery_date'] ));

}

}

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

Я прикрепил add_order_delivery_date_to_order() к действию WooCommerce. Он добавит дату доставки в метатаблицу поста. Он проверит, что клиент выбрал дату, прежде чем добавить ее в базу данных.

Если клиент выбирает дату, она сохраняется в таблице wp_postmeta с помощью функции WordPress add_post_meta() . Эта функция требует post_id , мета-ключ и мета-значение. В нашем случае мы использовали идентификатор заказа в качестве нашего post_id , мета-ключ будет _delivery_date , а мета-значение будет датой доставки, выбранной клиентом.

Я рекомендую вам очистить ваши переменные данные $_POST . Он удаляет из строки разрывы строк, символы табуляции и лишние пробелы.

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

 add_filter('woocommerce_email_order_meta_fields', 'add_delivery_date_to_emails', 10, 3);

функция add_delivery_date_to_emails ($fields, $sent_to_admin, $order) {

if( version_compare( get_option( 'woocommerce_version' ), '3.0.0', ">=" )) {

$order_id = $order->get_id();

} еще {

$order_id = $order->id;

}

$delivery_date = get_post_meta($order_id, '_delivery_date', true);

если ( '' != $доставка_дата ) {

$fields['Дата доставки'] = массив(

'label' => __('Дата доставки', 'add_extra_fields'),

'значение' => $delivery_date,

);

}

вернуть $поля;

}

3. Отображение настраиваемого поля на странице благодарности WooCommerce

Чтобы отобразить настраиваемое поле на странице «Полученный заказ WooCommerce», мы будем использовать фильтр WooCommerce woocommerce_order_details_after_order_table . Добавьте следующий код в файл functions.php:

 add_filter('woocommerce_order_details_after_order_table', 'add_delivery_date_to_order_received_page', 10, 1);

функция add_delivery_date_to_order_received_page ($order) {

if( version_compare( get_option( 'woocommerce_version' ), '3.0.0', ">=" )) {

$order_id = $order->get_id();

} еще {

$order_id = $order->id;

}

$delivery_date = get_post_meta($order_id, '_delivery_date', true);

если ( '' != $доставка_дата ) {

эхо '<p><strong>' . __('Дата доставки', 'добавить_дополнительные_поля') . ':</strong> ' . $доставка_дата;

}

}

Это результат: дата доставки на странице благодарности

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

Я прикрепил add_delivery_date_to_order_received_page() к фильтру WooCommerce. Параметр этой функции используется для получения идентификатора заказа. Идентификатор заказа необходим для получения выбранной даты доставки из таблицы wp_postmeta .

Это результат:

Полный фрагмент кода

Если у вас возникли проблемы с выполнением руководства, вот полный фрагмент кода. Вставьте его в файл functions.php:

 /*

Название плагина: Добавить поля на странице оформления заказа WooCommerce.

Описание: Простой демонстрационный плагин о том, как добавить дополнительные поля на страницу оформления заказа WooCommerce.

*/

add_action('woocommerce_after_checkout_billing_form', 'display_extra_fields_after_billing_address', 10, 1);

функция display_extra_fields_after_billing_address () {

_e("Дата доставки: ", "add_extra_fields");

?>

<br>

<input type="text" name="add_delivery_date" class="add_delivery_date" placeholder="Дата доставки">

<скрипт>

jQuery (документ) .ready (функция ($) {

$(".add_delivery_date").datepicker({

минДата: 0,

});

});

</скрипт>

<?php

}

add_action('wp_enqueue_scripts', 'enqueue_datepicker');

функция enqueue_datepicker() {

если (is_checkout()) {

// Загружаем скрипт выбора даты (предварительно зарегистрированный в WordPress).

wp_enqueue_script('jquery-ui-datepicker');

// Вам нужен стиль для выбора даты. Для простоты я сделал ссылку на размещенный в Google jQuery UI CSS.

wp_register_style('jquery-ui', '//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css');

wp_enqueue_style('jquery-ui');

}

}

add_action('woocommerce_checkout_update_order_meta', 'add_order_delivery_date_to_order', 10, 1);

функция add_order_delivery_date_to_order ( $order_id ) {

if ( isset( $_POST ['add_delivery_date'] ) && '' != $_POST ['add_delivery_date'] ) {

add_post_meta($order_id, '_delivery_date', sanitize_text_field($_POST ['add_delivery_date'] ));

}

}

add_filter('woocommerce_email_order_meta_fields', 'add_delivery_date_to_emails', 10, 3);

функция add_delivery_date_to_emails ($fields, $sent_to_admin, $order) {

if( version_compare( get_option( 'woocommerce_version' ), '3.0.0', ">=" )) {

$order_id = $order->get_id();

} еще {

$order_id = $order->id;

}

$delivery_date = get_post_meta($order_id, '_delivery_date', true);

если ( '' != $доставка_дата ) {

$fields['Дата доставки'] = массив(

'label' => __('Дата доставки', 'add_extra_fields'),

'значение' => $delivery_date,

);

}

вернуть $поля;

}

add_filter('woocommerce_order_details_after_order_table', 'add_delivery_date_to_order_received_page', 10, 1);

функция add_delivery_date_to_order_received_page ($order) {

if( version_compare( get_option( 'woocommerce_version' ), '3.0.0', ">=" )) {

$order_id = $order->get_id();

} еще {

$order_id = $order->id;

}

$delivery_date = get_post_meta($order_id, '_delivery_date', true);

если ( '' != $доставка_дата ) {

эхо '<p><strong>' . __('Дата доставки', 'добавить_дополнительные_поля') . ':</strong> ' . $доставка_дата;

}

}

Вот и все!

Вывод

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

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

WooCommerce добавить поле даты в кассу

1. Добавление пользовательского поля даты на страницу оформления заказа WooCommerce

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

2. Отображение настраиваемого поля в уведомлениях по электронной почте

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

3. Отображение настраиваемого поля на странице благодарности WooCommerce

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

Полный фрагмент кода

Вывод

Похожие статьи