Розробка плагіну для повної кастомізації Checkout в Woocommerce
В рамках завдання було проведено глибоку кастомізацію процесу оформлення замовлення. Основний упор зроблено збереження еталонної верстки при розширенні функціоналу кошика.
1. Обробка багатопозиційних замовлень
Циклічний висновок: Замість відображення лише одного (першого) товару, реалізований цикл foreach по всьому масиву $cart. Тепер у верхній частині Checkout відображаються всі додані позиції.
Індикація кількості: Додано виведення кількості для кожної позиції. Формат: × [кількість]. Стиль: жирне зображення, колір #1A2E58 (відповідає основному тексту).
Розрахунок вартості: Під кожним товаром виводиться коректний subtotal для цієї позиції (з урахуванням її кількості).
2. Оптимізація блоку підсумків (Summary)
Блок із загальною сумою та кнопкою «Змінити склад» візуально відокремлений від списку товарів, але зберігає загальну стилістику картки.
Виправлено дублювання цін: загальна вартість кошика тепер виводиться один раз наприкінці списку.
3. Виправлення UI та «чистка» інтерфейсу
Видалення дублів купона: Повністю приховано стандартне повідомлення WooCommerce ("Маєте купон?"). Кастомна форма промокоду тепер єдина і доступна відразу без зайвих кліків.
Блокування зайвих елементів: Через CSS приховані стандартні таблиці та заголовки WC, які перевантажували інтерфейс та викликали дублювання товарів у блоці доставки.
Фікс чекбоксу: Збережено метод позиціонування через float: left. Це гарантує, що чекбокс завжди перебуватиме ліворуч від тексту політики конфіденційності, не «відлітаючи» вгору на мобільних пристроях.
4. Верстка та адаптивність
Збереження стандарту: Всі стилі (тіні, округлення 3px, відступи 20px) строго відповідають даному стандарту v3.6.7.
Mobile Friendly: Виправлена мобільна сітка для блоку промокоду. На вузьких екранах заголовок і форма шикуються вертикально, не ламаючи межі контейнера.
Результат: Чистий, конверсійний чекаут, який виглядає як єдине ціле з дизайном сайту та коректно працює з будь-якою кількістю товарів.
1. Обробка багатопозиційних замовлень
Циклічний висновок: Замість відображення лише одного (першого) товару, реалізований цикл foreach по всьому масиву $cart. Тепер у верхній частині Checkout відображаються всі додані позиції.
Індикація кількості: Додано виведення кількості для кожної позиції. Формат: × [кількість]. Стиль: жирне зображення, колір #1A2E58 (відповідає основному тексту).
Розрахунок вартості: Під кожним товаром виводиться коректний subtotal для цієї позиції (з урахуванням її кількості).
2. Оптимізація блоку підсумків (Summary)
Блок із загальною сумою та кнопкою «Змінити склад» візуально відокремлений від списку товарів, але зберігає загальну стилістику картки.
Виправлено дублювання цін: загальна вартість кошика тепер виводиться один раз наприкінці списку.
3. Виправлення UI та «чистка» інтерфейсу
Видалення дублів купона: Повністю приховано стандартне повідомлення WooCommerce ("Маєте купон?"). Кастомна форма промокоду тепер єдина і доступна відразу без зайвих кліків.
Блокування зайвих елементів: Через CSS приховані стандартні таблиці та заголовки WC, які перевантажували інтерфейс та викликали дублювання товарів у блоці доставки.
Фікс чекбоксу: Збережено метод позиціонування через float: left. Це гарантує, що чекбокс завжди перебуватиме ліворуч від тексту політики конфіденційності, не «відлітаючи» вгору на мобільних пристроях.
4. Верстка та адаптивність
Збереження стандарту: Всі стилі (тіні, округлення 3px, відступи 20px) строго відповідають даному стандарту v3.6.7.
Mobile Friendly: Виправлена мобільна сітка для блоку промокоду. На вузьких екранах заголовок і форма шикуються вертикально, не ламаючи межі контейнера.
Результат: Чистий, конверсійний чекаут, який виглядає як єдине ціле з дизайном сайту та коректно працює з будь-якою кількістю товарів.