Сторінка оформлення замовлення – це спеціальна сторінка WooCommerce, яка створюється за замовчуванням під час встановлення WooCommerce. Вона містить шорткод WooCommerce [woocommerce_checkout], який відображає вихід оформлення.
Видаліть блок оформлення Gutenberg, якщо він розташований на вашій сторінці оформлення. Замість цього замініть його на [woocommerce_checkout] або використайте елемент Shortcode, якщо ви редагували сторінку оформлення за допомогою Esl.
Щоб налаштувати досвід оформлення замовлення за допомогою Esl, вам не потрібно змінювати шорткод або вміст сторінки оформлення. Замість цього Esl пропонує чотири різні типи шаблонів (в цьому контексті вони схожі на частини шаблонів) для налаштування процесу оформлення:
- WooCommerce – Оформлення
- WooCommerce – Дякуємо
- WooCommerce – Оплата
- WooCommerce – Квитанція замовлення
Типи шаблонів «WooCommerce – Оформлення», «WooCommerce – Оплата», «WooCommerce – Дякуємо» та «WooCommerce – Квитанція замовлення» видимі лише якщо ви маєте встановлений та активний плагін WooCommerce. Ці шаблони використовуються в логіці шорткоду оформлення WooCommerce і не підтримують умови шаблону (вони автоматично відображаються на правильній сторінці).
Шаблон оформлення
Сторінка оформлення за замовчуванням складається з макету з двома стовпцями: один стовпець з формою даних для виставлення рахунків і доставки, а інший з підсумком замовлення + кнопкою для продовження замовлення.
Використовуйте тип шаблону WooCommerce – Оформлення, щоб змінити вигляд цього першого екрану оформлення.
При редагуванні цього шаблону за допомогою Esl ви побачите два нові елементи (специфічні для цього типу шаблону):
Дані клієнта для оформлення
Елемент даних клієнта для оформлення відображає форму даних для виставлення рахунків і доставки.
Ви зможете видалити/сховати деякі не обов’язкові поля (наприклад, Назва компанії) і стилізувати поля форми.
Перевірка замовлення при оформленні
Елемент перевірки замовлення при оформленні відображає підсумок замовлення, доступні способи оплати та кнопку для розміщення замовлення. Використовуючи цей елемент, ви зможете стилізувати його різні частини.
Видалити форму купона при оформленні
Якщо ви активували використання купонів у загальних налаштуваннях WooCommerce, ви помітите синю форму купона на верху сторінки оформлення замовлення. Якщо ви хочете видалити цю форму зі сторінки оформлення, ви можете приховати її за допомогою кастомного CSS або додавши наступний код до вашої дочірньої теми:
remove_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_coupon_form', 10 );Дякуємо шаблон
Після оформлення замовлення, в залежності від робочого процесу оплати, ви потрапите на екран «Дякуємо».
Щоб стилізувати цей екран, вам потрібно створити шаблон Esl типу WooCommerce – Дякуємо. І вставити елемент Дякуємо за оформлення, щоб налаштувати повідомлення подяки та змінити стилі різних компонентів деталей замовлення.
Шаблон оплати
У ситуації, коли відвідувач отримує посилання для оплати неоплаченого замовлення, є спеціальний екран оформлення, який містить підсумок замовлення, доступні платіжні шлюзи та кнопку для оплати замовлення.
Якщо ви хочете налаштувати цей екран, вам потрібно буде додати тип шаблону WooCommerce – Оплата, де у вас буде доступ до двох нових елементів: Таблиця замовлення оформлення та Оплата замовлення оформлення, обидва з керуванням стилями для налаштування зовнішнього вигляду.
Чек на замовлення
У ситуації, коли відвідувач отримує посилання на чек неоплаченого замовлення, робочий процес оформлення викликає шаблон checkout/order-receipt.php, який за замовчуванням виглядатиме ось так:
Якщо ви хочете налаштувати цей шаблон, ви можете додати тип шаблону Esl WooCommerce – Чек на замовлення, і всередині системи ви отримаєте доступ до специфічних для замовлення динамічних даних, таких як:
{woo_order_id}{woo_order_number}{woo_order_date}{woo_order_total}{woo_order_payment_title}{woo_order_email}
ПРИМІТКА: Ці динамічні теги даних також працюватимуть у типі шаблону WooCommerce – Дякуємо.