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

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

Как редактировать поля на странице Оформления заказа 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 (Подписчик), и дальше вы можете сделать рассылку по ролям Пользователей.

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

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

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

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

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

Добавьте этот скрипт в 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.

Значки доверия на странице Оформления заказа WooCommerce
Способы оплаты / Значки доверия

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

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 ); 
}

Замените название сбора и его стоимость в строке 6, и 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]'); }

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

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

Как редактировать страницу Оформления заказа с помощью 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.

Плагин WooCommerce Checkout Manager

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

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

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

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

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

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

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

Один комментарий

Ответить

Ваш адрес email не будет опубликован.

  1. «Фиксированный сбор для определенных товаров»
    Чудно, как сделать тоже самое для полей?
    Как выводить поля на email?

Techbear

Сайт для тех, кто хочет использовать Вордпресс по максимуму, но не хочет разбираться в коде.

WordPress   WooCommerce   Membership   Elementor   ACF

Обновления блога

Techbear