Разработка плагина для полной кастомизации 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: Исправлена мобильная сетка для блока промокода. На узких экранах заголовок и форма выстраиваются вертикально, не ломая границы контейнера.
Результат: Чистый, конверсионный чекаут, который выглядит как единое целое с дизайном сайта и корректно работает с любым количеством товаров.