Techbear
Сайт для тех, кто хочет использовать Вордпресс по максимуму, но не хочет разбираться в коде.
В зависимости от того, какой у вас интернет-магазин, вам может быть нужно отредактировать форму Оформления заказа.
Например, если вы продаете цифровые товары, то вам может быть нужно убрать поля с адресом доставки. Если у вас мембершип-сайт, то вам нужно минимум полей только с личной информацией подписчиков.
Или наоборот, вам может быть нужно добавить некоторые поля, например, чтобы что-то спросить у ваших посетителей.
В этой статье вы узнаете, как редактировать поля на странице Оформления заказа вручную или с помощью плагина. Вы сможете удалить ненужные поля, добавить нужные поля или собственный контент, например, изображения со способами оплаты.
Содержание:
Как добавить собственные поля на странице Оформления заказа WooCommerce
Как сохранить значения кастомных полей в базу данных
Как сделать обязательные поля необязательными
Как добавить собственный контент
Как добавить дополнительные платы при оформлении заказа
Как добавлять шорткоды на страницу Оформления заказа
Как редактировать страницу Оформления заказа с помощью CSS
Плагины
Чтобы сделать эти изменения, вы будете добавлять снипеты в файл functions.php.
Добавляйте снипеты в functions.php дочерней темы, или с помощью специального плагина.
Не добавляйте снипет напрямую в functions.php текущей темы, потому что при следующем обновлении темы этот файл будет заменен на оригинальный.
Первое, что можно сделать — добавить кастомные поля в нужные места форм на странице оформления заказа.
Добавьте этот скрипт одним из способов, описанных выше:
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 );
}
Замените название сбора и его стоимость в строке 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]'); }
Вы можете использовать любой шорткод.
Еще одна вещь, которую вы можете сделать — добавить собственные стили, чтобы настроить внешний вид страницы.
Самый простой способ добавить стили — в редакторе Гутенберг с помощью блока Произвольный 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 сайт.
Если вы хотите еще больше оптимизировать страницу Оформления заказа, переходите в:
Читайте также:
Оставляйте комментарии.
Сайт для тех, кто хочет использовать Вордпресс по максимуму, но не хочет разбираться в коде.
«Фиксированный сбор для определенных товаров»
Чудно, как сделать тоже самое для полей?
Как выводить поля на email?