WooCommerce: поместите корзину и кассу на одну страницу
Опубликовано: 2018-10-17Это ваше окончательное руководство — в комплекте с шорткодами, фрагментами и обходными путями — чтобы полностью пропустить страницу корзины и иметь на одной странице и таблицу корзины, и форму оформления заказа.
Но сначала... зачем тебе это? Что ж, если вы продаете товары с высокой стоимостью (т. е. в среднем вы продаете примерно один товар за заказ), если вы хотите сэкономить на дополнительном шаге (два шага конвертируют лучше, чем три: «Добавить в корзину» > «Страница корзины» > «Страница оформления заказа» — и это не высшая математика), если ваш собственный рабочий процесс и цели электронной коммерции требуют от вас одновременного управления корзиной и оформлением заказа, этот учебник для вас.
Существует сочетание шорткодов, настроек и фрагментов PHP, которые вы можете использовать, чтобы заставить это работать из коробки. И поверьте мне, это проще, чем вы думаете.
В то время как многие разработчики решают превратить процесс оформления заказа в «многоэтапный заказ » (хм, не знаю почему — чем больше шагов, тем выше вероятность того, что корзина будет брошена), здесь мы увидим прямо противоположное.
Так как они это делают?
Итак, вот полное, простое пошаговое руководство по размещению корзины и оформления заказа на одной странице . Попробуйте, проведите тестирование и отслеживание WooCommerce и посмотрите, станет ли он лучше конвертироваться.
Шаг 1. Добавьте шорткод корзины на страницу оформления заказа
Во-первых, вам нужно добавить шорткод «woocommerce_cart» на страницу оформления заказа. Таким образом, мы сообщаем WooCommerce, что хотим, чтобы таблица корзины находилась сверху, а форма оформления заказа — под ней .
Обновление: 19 октября 2018 г. В первой версии этого руководства я предложил добавить шорткод [woocommerce_cart] над шорткодом «woocommerce_checkout» на странице оформления заказа (скриншот). К сожалению, это создает ошибку на странице «Спасибо» после размещения заказа. На самом деле там отображается сообщение «пустая корзина», так как содержимое страницы «Оформить заказ» (включая шорткод корзины) также отображается на странице «Спасибо» (не знаю, почему!). Поэтому нам нужно найти способ загрузить шорткод [woocommerce_cart] на странице оформления заказа, НО не на странице благодарности. Вот исправление, и да, это аккуратный фрагмент PHP.
Фрагмент кода PHP: Отображение таблицы корзины над формой оформления заказа на странице оформления заказа WooCommerce
/**
* @snippet Display Cart @ Checkout Page Only - WooCommerce
* @how-to Get CustomizeWoo.com FREE
* @author Rodolfo Melogli
* @compatible WooCommerce 3.5.7
* @donate $9 https://businessbloomer.com/bloomer-armada/
*/
add_action( 'woocommerce_before_checkout_form', 'bbloomer_cart_on_checkout_page_only', 5 );
function bbloomer_cart_on_checkout_page_only() {
if ( is_wc_endpoint_url( 'order-received' ) ) return;
echo do_shortcode('[woocommerce_cart]');
}
С этим небольшим изменением ваша новая страница оформления заказа будет выглядеть так, как показано на следующем снимке экрана. Обратите внимание: если вы знакомы с макетом страницы корзины, вы, возможно, помните раздел «Дополнительные материалы корзины» (т. е. « Итоги корзины », где отображаются промежуточные итоги, доставка и итоги)… ну, это автоматически скрывается только потому, что вы повторно используя два шорткода на одной странице. Разве это не прекрасно?
Шаг 2. Удаление страницы корзины в настройках WooCommerce (обновлено для Woo 3.7+)
Вероятно, одной смены шорткода достаточно, чтобы получить то, что вам нужно (Корзина и Оформление заказа на одной странице). Тем не менее, несколько настроек необходимы, если вы действительно хотите сделать это правильно.
На самом деле, если Checkout пуст (я имею в виду, что корзина пуста на странице Checkout), WooCommerce перенаправит пользователей на страницу корзины и отобразит сообщение о пустой корзине («Вернуться в магазин»).
Теперь наша цель — полностью избавиться от страницы корзины, чтобы пользователи никогда ее не видели.
Обновление: 21 августа 2019 г. До WooCommerce 3.7 можно было установить страницу «Оформить заказ» как страницы «Корзина» и «Оформить заказ». Это больше невозможно, поэтому просто следуйте новым инструкциям.
По этой причине вам нужно отключить страницу корзины (в WooCommerce > Настройки > Дополнительно) — просто нажмите на маленький «x» и «Сохранить изменения». Вот обновленный скриншот с WooCommerce 3.7:
Шаг 3: Удалить страницу корзины @ Страницы WordPress
Скриншот здесь не нужен.
Теперь, когда страница «Корзина» больше не нужна, пришло время удалить ее со страниц WordPress . Перенаправления уже на месте, и ваша таблица корзины уже находится на странице оформления заказа, так что вам не о чем беспокоиться.
Идите вперед и поместите страницу корзины в корзину!
Шаг 4 (бонус): перенаправление пустой кассы
Тогда есть небольшой обходной путь на случай, если вы не хотите показывать пустую страницу Checkout, если пользователи обращаются к ней напрямую или когда таблица корзины пуста.
Например, вы можете перенаправить пустые корзины на главную страницу или, может быть, на страницу магазина (или, что еще лучше, на последний просмотренный товар), чтобы покупатели могли снова начать делать покупки.
Вот небольшой фрагмент для вас — небольшой бонус — чтобы вы могли, например, перенаправить пустую страницу оформления заказа на домашнюю страницу . Попробуйте!
Фрагмент кода PHP: перенаправить пустую корзину @ WooCommerce Checkout с помощью корзины
/**
* @snippet Redirect Empty Cart/Checkout - WooCommerce
* @how-to Get CustomizeWoo.com FREE
* @sourcecode https://businessbloomer.com/?p=80321
* @author Rodolfo Melogli
* @compatible WooCommerce 3.5.7
* @donate $9 https://businessbloomer.com/bloomer-armada/
*/
add_action( 'template_redirect', 'bbloomer_redirect_empty_cart_checkout_to_home' );
function bbloomer_redirect_empty_cart_checkout_to_home() {
if ( is_cart() && is_checkout() && 0 == WC()->cart->get_cart_contents_count() && ! is_wc_endpoint_url( 'order-pay' ) && ! is_wc_endpoint_url( 'order-received' ) ) {
wp_safe_redirect( home_url() );
exit;
}
}