Как использовать хуки WooCommerce Checkout

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

Что такое хуки WooCommerce?

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

Крючки бывают двух видов:

• Хуки действий позволяют добавлять пользовательский код для выполнения определенных действий при возникновении события.
• Хуки- фильтры изменяют поведение существующей переменной или функции.

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

Крючки оплаты WooCommerce

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

Хуки WooCommerce работают точно так же, как нативные хуки WordPress. Итак, если вы знакомы с крючками WordPress, освоить крючки WooCommerce будет легко.

Прежде чем мы начнем

Прежде чем прыгать на крючки, мы рекомендуем вам создать дочернюю тему. Есть много инструментов, которые вы можете использовать. Вы можете ознакомиться с нашим списком лучших плагинов для дочерних тем для WordPress или нашим подробным руководством о том, как создать дочернюю тему с помощью плагина или вручную.

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

Как использовать хуки WooCommerce Checkout?

Как мы видели ранее, существуют обработчики действий WooCommerce и обработчики фильтров, и оба они имеют схожий синтаксис.

Это пример хука действия:

 add_action('woocommerce_after_checkout_billing_form','QuadLayers_callback_function');
функция QuadLayers_callback_function(){
    # добавьте сюда свой код
}

Где woocommerce_after_checkout_billing_form — это хук, а QuadLayers_callback_function — это функция, которую мы создаем для добавления наших пользовательских скриптов.

Хуки-фильтры, с другой стороны, работают таким же образом, но они должны получать и возвращать параметр в функции. Например:

 add_filter('woocommerce_breadcrumb_defaults','quadlayers_change_breadcrumb');
функция quadlayers_change_breadcrumb($content) {
$content .= "Четырехслойные";
вернуть $контент;
}

Список кассовых хуков для WooCommerce

Есть много крючков WooCommerce, которые вы можете использовать на странице оформления заказа. Вот некоторые из основных:

• woocommerce_before_checkout_form
• woocommerce_checkout_before_customer_details
• woocommerce_checkout_billing
• woocommerce_before_checkout_billing_form
• woocommerce_checkout_shipping
• woocommerce_before_order_notes
• woocommerce_after_order_notes
• woocommerce_checkout_after_order_review
• woocommerce_checkout_after_customer_details
• woocommerce_review_order_before_cart_contents
• woocommerce_review_order_before_shipping
• woocommerce_review_order_after_order_total
• woocommerce_checkout_order_review
• woocommerce_review_order_before_submit
• woocommerce_review_order_before_payment
• woocommerce_review_order_after_submit
• woocommerce_review_order_after_payment
• woocommerce_after_checkout_form

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

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

 add_action('woocommerce_after_checkout_billing_form','QuadLayers_callback_function');
функция QuadLayers_callback_function(){
echo 'вот текст содержимого или html';
}

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

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

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

Добавьте изображение к обзору заказа

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

 add_action('woocommerce_review_order_before_payment','example_callback');
функция example_callback() {
    echo '<img src="https://quadlayers.com/wp-content/uploads/2020/06/frame.png" width="200px" height="200px">';  
} 

Изменить хлебные крошки на странице оформления заказа

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

 add_filter('woocommerce_breadcrumb_defaults', 'quadlayers_change_breadcrumb');
функция 'quadlayers_change_breadcrumb' ($ по умолчанию) {
    $default['home'] = 'Магазин';
    вернуть $ по умолчанию;
}

Отображение значков доверия рядом с кнопкой «Разместить заказ»

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

 add_action('woocommerce_review_order_after_submit', 'quadlayers_trust_badges');
функция quadlayers_trust_badges() {
    echo '<div class="знаки доверия">
    <img src="https://www.pngitem.com/pimgs/m/19-197703_transparent-secure-checkout-png-best-trust-badges-for.png">
    </div><div class="trust-badge-message"><i>Я добавил указанные выше значки доверия с помощью крючка WooCommerce</i></div>';
} 

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

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

 add_filter('woocommerce_checkout_fields', 'quadlayers_labels_placeholders', 9999); 
функция quadlayers_labels_placeholders( $f ) { 	
	$f['billing']['billing_first_name']['label'] = 'Как вас зовут?';
	$f['order']['order_comments']['placeholder'] = 'Что у вас на уме?'; 
	вернуть $f; 
} 

Добавить настраиваемое поле оформления заказа

Наконец, вот более сложный пример. Мы покажем вам, как создать новое настраиваемое поле, позволяющее покупателям подписываться на вашу рассылку при оформлении заказа. Для этого мы будем использовать два хука: один для отображения поля для подписки, а другой для сохранения состояния кнопки в базе данных (независимо от того, проверена она или нет).

 add_action('woocommerce_after_order_notes', 'quadlayers_subscribe_checkout');
add_action('woocommerce_checkout_update_order_meta', 'quadlayers_save_function');

// вставляем чекбокс в кассу woocommerce 
функция quadlayers_subscribe_checkout($checkout) { 
	woocommerce_form_field («подписан», массив (
		'тип' => 'флажок',
		'класс' => массив('миша-поле форма-строка'),
		'label' => ' Подпишитесь на нашу рассылку.',
		), $checkout->get_value('подписан')); 
}
// сохранить значение поля
функция quadlayers_save_function( $order_id ){ 
	если( !пусто($_POST['метод контакта'] ))
		update_post_meta($order_id, 'метод контакта', sanitize_text_field($_POST['метод контакта'])); 
	if( !empty( $_POST['подписка'] ) && $_POST['подписка'] == 1 )
		update_post_meta($order_id, 'подписан', 1); 
}

Настройте страницу оформления заказа с помощью плагинов

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

• Checkout Manager для WooCommerce : с более чем 70 000 активных установок это один из самых популярных плагинов для оформления заказов для WooCommerce. Checkout Manager позволяет настраивать, добавлять, редактировать и удалять поля на странице оформления заказа. У него есть бесплатная версия и 3 премиальных плана, стоимость которых начинается от 20 долларов США.
• Прямая оплата для WooCommerce : с помощью этого бесплатного инструмента вы можете упростить процесс оформления заказа и повысить коэффициент конверсии. Вы можете сократить процесс покупки, перенаправляя своих клиентов со страницы продукта прямо на кассу. У Direct Checkout есть бесплатная версия и премиум-планы, стоимость которых начинается от 20 долларов США (единовременный платеж).

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

Вывод

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

Для получения дополнительных примеров и информации о том, как настроить страницу оформления заказа WooCommerce, ознакомьтесь с этим пошаговым руководством.

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