Различные интернет-магазины на основе WooCommerce могут иметь свои атрибуты или какие-то важные моменты типа указания заказа в виде подарка, которые должны отображаться на cтранице оформления заказа. Кроме того, на ней часто много неиспользуимых полей вроде адреса фирмы или области, если торговля осуществляется в пределах одного региона.
Здесь мы рассмотрим, как убирать и добавлять поля в форме на странице оформления заказа и некоторые сопутствующие моменты.
- Заменяем текст Billing detail на нужный
- Убираем поля из оформления заказа
- Преобразуем label в placeholder
- Добавляем свои поля в форму оформления заказа
- Сохранение дополнительных полей
- Добавляем поля в форму письма администратору и пользователю о новом заказе
- Добавление чекбокса о согласии на обработку данных
- Настройка вывода текста соглашения о персональных данных
Заменяем текст Billing detail на нужный
В верху форма оформления заказа имеет заголовок, который в английской версии записан, как Billing detail, или по-русски "Детали платежа". Нам же, например, нужно заменить эту строку на "Данные заказчика". Для этого мы можем использовать хук-фильтр gettext.
В коде ниже показано, как это сделать с помощью строки на нужном вам языке и с помощью строки для перевода.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | function wc_billing_field_strings( $translated_text, $text, $domain ) { //echo "<pre> translated=". $translated_text." text=". $text ." domain=".$domain ."</pre>"; //translated=Платіжні дані text=Billing details domain=woocommerce switch ( $text ) { case 'Billing details' : $translated_text = 'Данные заказчика'; break; case 'Additional information' : $translated_text = __( 'Your message', 'woocommerce' ); break; } return $translated_text; } add_filter( 'gettext', 'wc_billing_field_strings', 10,3); |
В самом верху функции закомментированы строки с атрибутами. Их имеет смысл раскомментировать, если вы не знаете, какой текст вам нужен, а затем совсем убрать из кода.
Поскольку перевод этих строк выполняется плагином Woocommerce, то вы сможете найти файл перевода в папке wp-content/languages/plugins с названием woocommerce-ru.po для русской версии сайта или woocommerce-uk.po для украинской. Его нужно будет обновить и добавить туда ваш вариант перевода.
Убираем поля из оформления заказа
Страница оформления заказа обычно перенасыщена полями ввода. Не все они бывают нужны.
Для того чтобы убрать какое-либо поле, нужно использовать функцию unset( $fields[ 'billing' ][ 'field_name' ] ). Для конкретного поля нужно знать его имя, поэтому в начале функции есть вывод всего массива внутри тегов <pre></pre>. Они закомментированы, но вы можете раскомментировать эти строки и посмотреть на данные.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | add_filter( 'woocommerce_checkout_fields', 'mytheme_woocheckout_remove_fields', 20 ); function mytheme_woocheckout_remove_fields( $fields ) { //выводим весь массив полей $fields, если нужно //echo '<pre>'; //print_r($fields); //echo '</pre>'; // возможные поля для удаления unset( $fields[ 'billing' ][ 'billing_company' ] ); // компания unset( $fields[ 'billing' ][ 'billing_country' ] ); // страна unset( $fields[ 'billing' ][ 'billing_address_1' ] ); // адрес 1 unset( $fields[ 'billing' ][ 'billing_address_2' ] ); // адрес 2 unset( $fields[ 'billing' ][ 'billing_city' ] ); // город unset( $fields[ 'billing' ][ 'billing_state' ] ); // регион, штат unset( $fields[ 'billing' ][ 'billing_postcode' ] ); // почтовый индекс unset( $fields[ 'order' ][ 'order_comments' ] ); // заметки к заказу return $fields; } |
На самом деле вы можете убрать и другие поля, например, имя, фамилия, телефон или email:
| 1 2 3 4 | unset( $fields[ 'billing' ][ 'billing_first_name' ] ); // имя unset( $fields[ 'billing' ][ 'billing_last_name' ] ); // фамилия unset( $fields[ 'billing' ][ 'billing_phone' ] ); // телефон unset( $fields[ 'billing' ][ 'billing_email' ] ); // емайл |
Однако, эти поля важны в любом заказе. Поэтому их оставляем. Здесь просто приведены их названия для Woocommerce в массиве всех полей.
Например, нам нужно отказаться только от поля с названием страны, т.к. у нас доставка только в пределах Украины. Еще уберем второй адрес и название компании, т.к. в основном заказывают у нас обычные люди, т.е. "физические лица".
Сейчас наша функция будет выглядеть таким образом:
| 1 2 3 4 5 6 7 8 9 10 | add_filter( 'woocommerce_checkout_fields', 'my_woocheckout_remove_fields', 20 ); function my_woocheckout_remove_fields( $fields ) { unset( $fields[ 'billing' ][ 'billing_company' ] ); // компания unset( $fields[ 'billing' ][ 'billing_country' ] ); // страна unset( $fields[ 'billing' ][ 'billing_address_2' ] ); // адрес 2 return $fields; } |
Преобразуем label в placeholder
На странице оформления заказа (checkout) обычно мы видим поля и над ними label с описанием, что нужно ввести. Для той же цели предназначен и атрибут placeholder, поэтому возникает желание убрать label и перенести текст из них внутрь поля. Для этой цели можно использовать следующий код:
| 1 2 3 4 5 6 7 8 9 10 11 | add_filter( 'woocommerce_checkout_fields', 'mytheme_labels_inside_checkout_fields', 50 ); function mytheme_labels_inside_checkout_fields( $fields ) { foreach ( $fields as $section => $section_fields ) { foreach ( $section_fields as $section_field => $section_field_settings ) { $fields[$section][$section_field]['placeholder'] = $fields[$section][$section_field]['label']; $fields[$section][$section_field]['label'] = ''; } } return $fields; } |
Результат будет выглядеть примерно так (в зависимости от стилей темы):
Больше данных о полях на странице оформления заказа - в официальной документации.
Добавляем свои поля в форму оформления заказа
Допустим, нам не только нужно удалять поля, но и добавить свои. Для этого мы можем воспользоваться хуком-фильтром woocommerce_billing_fields и вставить такой код:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | add_filter( 'woocommerce_billing_fields', 'mytheme_add_custom_billing_field', 25 ); function mytheme_add_custom_billing_field( $fields ) { // массив данных нового поля $sale_field = array( 'billing_salemethod' => array( 'type' => 'radio', // text, textarea, select, radio, checkbox, password 'required' => true, // обязательное поле 'class' => array( 'form-row' ,'salemethod' ), // массив классов поля 'label' => 'Купівля чи прокат', // текст метки для поля 'label_class' => 'label-inline', // класс метки 'options' => array( // опции тольк для select и radio 'Купівля' => 'Купівля', // 'значение'=>'заголовок' 'Прокат' => 'Прокат' ) ) ); $size_field = array( 'billing_size' => array( 'type' => 'text', 'required' => true, 'label' => 'Розмір костюма', ) ); $date_field = array( 'billing_date' => array( 'type' => 'date', 'required' => true, 'label' => 'Дата свята', ) ); // вставляем поля в уже существующий массив $fields = array_slice( $fields, 0, 0, true ) + $sale_field + $size_field + $date_field + array_slice( $fields, 0, NULL, true ); return $fields; } |
Данные для полей можно найти в описании функции woocommerce_form_field().
В этом коде мы добавляем поле типа radio, text и date. Выглядеть теперь наша форма будет так:
В случае такого метода добавления полей они у нас будут появляться не только на странице оформления заказа, но и в личном кабинете, в секции адресов. Чтобы избежать этого, достаточно добавить проверку условия с помощью функции is_checkout()
| 1 2 3 | if( ! is_checkout() ) { return $fields; } |
Сохранение дополнительных полей
Добавленные вами поля нужно еще отобразить в заказе. А для этого их нужно сохранить. Поэтому после добавления полей в форму оформления заказа, мы их сохраняем с помощью такого кода:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | function mytheme_save_billing_extra_fields( $order_id ){ // Сохраняем billing_salemethod if( !empty( $_POST['billing_salemethod'] ) ){ update_post_meta( $order_id, 'billing_salemethod', sanitize_text_field( $_POST['billing_salemethod'] ) ); } // Сохраняем billing_size if( !empty( $_POST['billing_size'] ) ){ update_post_meta( $order_id, 'billing_size', sanitize_text_field( $_POST['billing_size'] ) ); } // Сохраняем billing_size if( !empty( $_POST['billing_date'] ) ){ update_post_meta( $order_id,'billing_date', date("d.m.Y", strtotime($_POST['billing_date']) )); } } add_action( 'woocommerce_checkout_update_order_meta', 'mytheme_save_billing_extra_fields' ); |
В результате сохранение будет в виде дополнительных пользовательских полей под основными полями заказа. Перейдя в редактирование заказа, мы получим такой примерно такой внешний вид в нижней части страницы:
Поскольку мы сохраняли дату, то ее в функции нужно преобразовать в формат дд.мм.гггг, т.к. без этого мы получим дату вида гггг-мм-дд, что не очень удобно для восприятия.
Для того чтобы названия добавленных нами полей визуально не были редактируемыми + содержали название в том же виде, что и в форме, заполняемой пользователем, можно добавить файл admin.css, который будет регулировать внешнее отображение наших полей в админке.
| 1 2 3 | add_action( 'admin_enqueue_scripts', function(){ wp_enqueue_style( 'theme-admin', get_stylesheet_directory_uri() . '/admin.css','', '1.0.2' ); }); |
Затем в этом файле admin.css прописываем такие стили:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | input[value="billing_size"], input[value="billing_salemethod"], input[value="billing_date"]{ display: none; } td:has(input[value="billing_size"], input[value="billing_salemethod"], input[value="billing_date"]) >.submit { display: none; } td:has(input[value="billing_size"], input[value="billing_salemethod"], input[value="billing_date"])::before { margin: 10px 0 0 10px; display: inline-block; font-size: 15px; color: #222; } td:has(input[value="billing_date"])::before { content: 'Дата свята'; } td:has(input[value="billing_size"])::before { content: 'Розмір'; } td:has(input[value="billing_salemethod"])::before{ content: 'Купівля чи прокат '; } |
Здесь для стилизации мы использовали возможности псевдокласса :has.
Результат работы с CSS:
Если у вас есть checkbox в полях, то при выделении он вернет значение 1, соответственно в функции сохранения значения этого поля нужно проверять это значение:
| 1 2 3 4 5 6 7 8 9 10 | // Функция сохранения checkbox function mytheme_save_fields( $order_id ){ // Сохраняем checkbox if( !empty( $_POST['subscribe'] ) && $_POST['subscribe'] == 1 ){ update_post_meta( $order_id, 'subscribe', 1 ); } } add_action( 'woocommerce_checkout_update_order_meta', 'mytheme_save_fields' ); |
Не обязательно это выносить в отдельную функцию. Вы можете добавить этот код в общую функцию для сохранения дополнительных полей в форме оформления заказа.
Данные о добавлении/изменении полей при оформлении заказа вы также можете найти в официальной документации Woocommerce.
Добавляем поля в форму письма администратору и пользователю о новом заказе
Пока добавленные поля отображаются у нас только в админке сайта в самом заказе. Но вашему клиенту наверняка захочется получить еще информацию о добавлениях и в письме о новом заказе.
Поэтому мы используем тут хук , чтобы добавить таблицу с данными в тело письма.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | add_action( 'woocommerce_email_order_meta', 'kazka_add_email_order_meta', 10, 3 ); function kazka_add_email_order_meta( $order, $sent_to_admin, $plain_text ){ // получаем данные доп.полей $billing_date = $order->get_meta( 'billing_date' ); $billing_size = $order->get_meta( 'billing_size' ); $billing_salemethod = $order->get_meta( 'billing_salemethod' ); // выходим из функции, если такие роля не заполнены if( empty( $billing_date) || empty( $billing_size) || empty( $billing_salemethod)) { return; } // формируем таблицу для письма $table = '<h2 style="color: #1c7db4">Додаткові дані</h2> <table class="td" cellspacing="0" cellpadding="6" border="1" style="color: #636363; border: 1px solid #e5e5e5; vertical-align: middle; width: 100%; font-family: Roboto, Arial, sans-serif; margin: 15px 0;" width="100%">'; $table .= '<tr class="order_item"> <td class="td" style="color: #636363; border: 1px solid #e5e5e5; padding: 12px;">Дата свята</td><td class="td" style="color: #636363; border: 1px solid #e5e5e5; padding: 12px;">'. esc_html( $billing_date).'</td></tr>'; $table .= '<tr class="order_item"> <td class="td" style="color: #636363; border: 1px solid #e5e5e5; padding: 12px;">Розмір</td><td class="td" style="color: #636363; border: 1px solid #e5e5e5; padding: 12px;">'. esc_html( $billing_size).'</td></tr>'; $table .= '<tr class="order_item"> <td class="td" style="color: #636363; border: 1px solid #e5e5e5; padding: 12px;">Купівля/Прокат</td><td class="td" style="color: #636363; border: 1px solid #e5e5e5; padding: 12px;">'. esc_html( $billing_salemethod).'</td></tr>'; $table .= '</table>'; echo $table; } |
В результате получим такое письмо (на мобильном телефоне.
Добавление чекбокса о согласии на обработку данных
Сейчас почти во всех странах есть закон об использовании персональных данных. Чтобы его соблюсти, вы можете добавить соответствующий текст и <input type="checkbox"> при оформлении заказа в вашем интернет-магазине.
Код нужно вставить в файл functions.php:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | add_action('woocommerce_review_order_before_submit', 'mytheme_privacy_checkbox', 25); function mytheme_privacy_checkbox() { woocommerce_form_field('privacy_policy_checkbox', array( 'type' => 'checkbox', 'class' => array('form-row'), 'label_class' => array('woocommerce-form-privacy-label'), 'input_class' => array('woocommerce-form-input-privacy'), 'required' => true, 'label' => '<span class="input-text">Я даю согласие на обработку моих <a href="/confidentional-policy" target="_blank">персональных данных</a></span>', )); } // Валидация add_action('woocommerce_checkout_process', 'mytheme_billing_message', 25); function mytheme_billing_message() { if (empty($_POST['privacy_policy_checkbox'])) { wc_add_notice('Нужно дать согласие на обработку ваших <strong>персональных данных.</strong>', 'error'); } } |
Настройка вывода текста соглашения о персональных данных
Если вы сначала настраивали сайт на одном языке, а потом перешли на другой, текст соглашения о персональных данных у вас останется на первом языке. И вы не найдете его в настройках WooCommerce, зато найдете в настройках вашей темы в разделе WooCommerce. Именно в настройках темы вам нужно этот текст изменить.
Изменяйте его и сохраняйте эти изменения - они отобразятся на странице оформления заказа.
