💻 Корзина и Оформление заказа на одной странице в Woocommerce

#WordPress #Woocommerce #Woo #ПлагиныWordPress #сайты
⁉ Задача. Необходимо было совместить страницы Корзины и Оформления заказа. По сути на странице нужно вывести три основных блока: Таблица товаров (как в корзине), Детали заказа (телефон, адрес) и Заказ (оплата, цена и т.д.). Самая большая проблема заключалась в том, что по макету на странице две колонки — слева таблица товаров и под ней Детали заказа, а справа — блок Заказ. Но в шаблонах Woocommerce Таблица с товарами это одна форма, а Детали заказа с блоком Заказ — другая. И вынести Детали заказа из своей формы и вставить куда хочешь — не получится.
✅ Решение. Проблема совмещения корзины и оформления заказа состоит в том, что это две формы, и часто требуется по макету сайта сделать так, что элементы нужно вынести из своей формы нужно вынести из своей формы нужно куда-то вынести. Например, как в моем случае, детали заказа вставить под таблицу из формы корзины, а блок заказ должен быть напротив таблицы с товарами. Разметку и стили оговаривать не будем, т.к. может быть различной. В конце покажу скрипт, с помощью которого мы сможем разместить нужные нам элементы в любой области. Для совмещения страниц Оформления заказа и Корзины использовал JS и изменения в шаблонах Woo Использовал такой алгоритм:
1. Используем страницу, которую Woocommerce создает по умолчанию по установки. Если по какой-то причине ее нет, то создаем новую и в настройках плагина привязываем ее как страница Оформления заказа.
2. Ставим шорткод [woocommerce_checkout] на странице Оформления заказа.
3. Копировать из плагина файл шаблона формы оформления заказа woocommerce/checkout/form-checkout.php в дочернюю тему с такой же вложенностью.
4. Из файла корзины woocommerce/cart/cart.php копируем саму форму (таблицу с товарами) и хук do_action( 'woocommerce_before_cart' );, т.к. через него выводятся оповещения корзины. Вставляем форму корзины в наш form-checkout.php, где нужно.
5. Вставляем там же JS-скрипт из Код №1. В данном случае мы создаем копию блока с деталями заказа, переносим под форму с таблицей товаров, оригинальные элементы скрываются и в них передаются данные из новых (скопированных) элементов.
💾 + Скрипт