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

В зависимости от того, какой у вас интернет-магазин, вам может быть нужно отредактировать форму Оформления заказа.

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

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

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

Содержание:

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

• Фиксированный сбор
  • Фиксированный сбор для определенных товаров
• Процент от заказа

Как добавлять шорткоды на страницу Оформления заказа
Как редактировать страницу Оформления заказа с помощью CSS
Плагины

Чтобы сделать эти изменения, мы будем использовать хуки Вукоммерс и будем добавлять снипеты в файл functions.php.

Добавляйте снипеты в functions.php дочерней темы, или с помощью специального плагина.

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

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

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

Добавьте этот скрипт одним из способов, описанных выше:

add_action( 'woocommerce_after_order_notes', 'tb_subscribe_checkout' );
function tb_subscribe_checkout( $checkout ) {
woocommerce_form_field( 'subscriber', array(
'type' => 'checkbox',
//'required' => true,
'class' => array('custom-field form-row-wide'),
'label' => ' Подписаться на рассылку.'
), $checkout->get_value( 'subscriber' ) );
}

Этот снипет добавляет кастомный чекбокс после формы Детали, который предлагает посетителям подписаться на рассылку.

Скрипт присваивает посетителю роль Subscriber (Подписчик), и дальше вы можете сделать рассылку по ролям Пользователей.

Если вы хотите сделать этот чекбокс обязательным, то уберите комментарий в строке 5.

Чтобы изменить текст чекбокса, напишите свой текст в строке 7.

Таким же образом вы можете добавить другие типы полей, например, радио-кнопку:

Добавьте этот скрипт в functions.php одним из способов:

add_action('woocommerce_before_order_notes', 'tb_radio_checkout');
function tb_radio_checkout($checkout3){
woocommerce_form_field( 'feed', array(
'type' => 'radio',
//'required' => true,
'class' => array('custom-field form-row-wide'),
'label' => ' Как вы о нас узнали?',
'options' => array(
'Google' => 'Yandex / Google',
'Facebook' => 'Facebook',
'VKontakte' => 'VKontakte',
'Youtube' => 'YoutTube',
'Friend' => 'От друзей',
'Other' => 'Другое'
)
));
}

Чтобы сделать ответ на этот вопрос обязательным, уберите комментарий в строке 5.

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

Как сохранить значения кастомных полей в базу данных

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

Чтобы записать эту информацию в базу данных, нужно использовать хук 'woocommerce_checkout_update_order_meta'.

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

add_action( 'woocommerce_checkout_update_order_meta','tb_save_function' );
function tb_save_function( $order_id ){
if ( ! empty( $_POST['subscriber'] ) ) {
update_post_meta( $order_id, 'subscriber', sanitize_text_field( $_POST['subscriber'] ) );
}
if ( ! empty( $_POST['feed'] ) ) {
update_post_meta( $order_id, 'feed',sanitize_text_field( $_POST['feed'] ) );
}
}

Перед сохранением информации в базу данных скрипт с помощью условия if() проверяет, заполнены поля или нет.

После добавления этого скрипта вы можете извлечь сохраненные данные из базы данных с помощью функции global “$post”.

Этот скрипт выводит данные подписчика текущего заказа. Вы можете использовать эту информацию в админке списка заказов WooCommerce:

global $post;
$order = wc_get_order( $post->ID );
$c_meta = $order->get_meta('subscriber');

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

Как сделать обязательные поля необязательными

Ещё один способ сделать страницу Оформления заказа более удобной — сделать обязательные поля необязательными.

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

Чтобы сделать поле Адрес необязательным, добавьте этот снипет в functions.php:

add_filter( 'woocommerce_billing_fields', 'wc_address_field_optional');
function wc_address_field_optional( $fields ) {
$fields['billing']['billing_address_1']['required'] = false; 
return $fields; 
}

Как добавить собственный контент на странице Оформления заказа

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

Чтобы добавить картинки способов оплат перед кнопкой Подтвердить заказ, используйте этот снипет:

add_action('woocommerce_review_order_before_submit','tb_checkout_content');
function tb_checkout_content(){
echo '<img src="http://your-site.ru/path/to/your/image.png" />';
}

Замените путь к картинке на ваш в строке 3.

Кроме картинок вы можете добавить заголовок на странице Чекаут:

add_action(woocommerce_checkout_before_customer_details,'tb_checkout_header');
function tb_checkout_header(){
echo "<h2>Это Заголовок<h2>";
}

Замените текст заголовка в строке 3.

Или текст. Например, вы можете указать примерное время доставки товара, или добавить блок Частых Вопросов:

add_action( 'woocommerce_after_order_notes', 'wc_add_message' );
function wc_add_message () {
echo 'Обратите внимание, что доставка может занять до 5 дней.';
}

Замените текст на свой в строке 3.

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

Вы можете добавить дополнительный сбор в виде фиксированной платы, или определенный процент от заказа.

Фиксированный сбор

Примером такого сбора может быть упаковка товара. Пусть упаковка стоит 15 рублей.

Добавьте этот скрипт в functions.php:

add_action('woocommerce_cart_calculate_fees', function() {
if (is_admin() && !defined('DOING_AJAX')) {
return;
}
WC()->cart->add_fee(__('Упаковка', 'txtdomain'), 15);
});

Замените название сбора и его стоимость в строке 5.

Фиксированный сбор для определенных товаров

Если вы хотите добавить фиксированный сбор только для определенных товаров, то используйте этот скрипт:

add_action('woocommerce_cart_calculate_fees', 'add_fees_on_ids'); 
function add_fees_on_ids() { 
   if (is_admin() && !defined('DOING_AJAX')) {return;} 
   foreach( WC()->cart->get_cart() as $item_keys => $item ) { 
     if( in_array( $item['product_id'], fee_ids() )) { 
     WC()->cart->add_fee(__('Упаковка'), 15); 
     } 
   } 
} 
function fee_ids() { 
   return array( 123,255,385 ); 
}

Замените название сбора и его стоимость в строке 7, и ID нужных товаров в строке 11.

Процент от заказа

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

Например, вы можете добавить комиссию в размере 3% к общей стоимости заказа (товары + доставка).

Добавьте этот скрипт в functions.php:

add_action('woocommerce_cart_calculate_fees', function() {
if (is_admin() && !defined('DOING_AJAX')) {
return;
}
$percentage = 0.03;
$percentage_fee = (WC()->cart->get_cart_contents_total() + WC()->cart->get_shipping_total()) * $percentage;
 WC()->cart->add_fee(__('Налог', 'txtdomain'), $percentage_fee);
});

Замените процент в строке 5, и название сбора в строке 7.

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

В хуки страницы Оформления заказа можно добавлять не только контент, но и шорткоды.

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

echo do_shortcode('[woocommerce_cart]');

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

add_action('woocommerce_after_checkout_form','tb_checkout_shortcode');
function tb_checkout_shortcode(){
echo do_shortcode('[woocommerce_cart]'); }

Вы можете использовать любой шорткод.

• 3 Способа отключить Корзину в WooCommerce

Как редактировать страницу Оформления заказа с помощью CSS

Еще одна вещь, которую вы можете сделать — добавить собственные стили, чтобы настроить внешний вид страницы.

Самый простой способ добавить стили — в редакторе Гутенберг с помощью блока Произвольный HTML.

Выберите этот блок на странице Чекаут, добавьте в него теги <style> и </style>, и напишите свой css между этими тегами. Нажмите Сохранить.

Если вы хотите добавить стили через functions.php, используйте этот снипет:

add_action('wp_head','tb_custom_checkout_styles');
function tb_custom_checkout_styles(){
         if(is_checkout()==true){
                 echo '<style> body{background:#efefef!important;}<style>';
         }
}

Добавьте свои стили в строке 4.

Если вы хотите подключить отдельный файл со стилями к странице Чекаут, то используйте этот скрипт:

add_action( 'wp_enqueue_scripts', 'tb_enqueue_css' );
function tb_enqueue_css(){    
    wp_enqueue_style(  'checkout_style',
        get_stylesheet_directory_uri() . '/checkout-style.css'
    );
}

Так вы можете записать все стили в отдельный файл (в этом примере — checkout-style.css), который будет храниться в папке дочерней темы на том же уровне, что и основной файл style.css.

Плагины

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

Лучший платный плагин, который мне удалось найти для редактирования страниц Оформления заказа — WooCommerce Checkout Manager.

Этот плагин может все, что написано в этой статье, и больше:

• Убрать, добавить, или изменить последовательность полей
• Добавить загрузку файлов
• Отображать информацию из кастомных полей в е-мейлах
• Добавить условные поля и условную логику

Это платный плагин, он продается с лайф-тайм лицензией за 19$ на 1 сайт.

Если вы хотите еще больше оптимизировать страницу Оформления заказа, переходите в:

• Как изменить страницу Оформления заказа WooCommerce

Читайте также:

1. Как отключить уведомления WooCommerce
2. Как отключить кнопку В корзину в WooCommerce
3. Прямая ссылка на вариативный товар WooCommerce
4. Как вывести цену товара WooCommerce в любом месте сайта

Оставляйте комментарии.