Создание своей кастомной корзины в WooCommerce может быть полезным, если вам нужно изменить стандартный функционал корзины или её внешний вид. Вы можете кастомизировать корзину с помощью шаблонов WooCommerce, кастомного кода, плагинов или интеграции с другим дизайном. Вот несколько способов, как создать свою корзину в WooCommerce. 1. Кастомизация корзины через редактирование шаблонов WooCommerce использует систему шаблонов для отображения корзины. Если вы хотите изменить внешний вид или функциональность корзины, вы можете скопировать и изменить шаблоны корзины в своей теме или дочерней теме. Шаги для кастомизации корзины через шаблоны: Перейдите в папку вашей темы (или дочерней темы): /wp-content/themes/ваша-тема/ Создайте папку woocommerce (если её ещё нет), чтобы WooCommerce использовал ваши кастомные шаблоны вместо стандартных. Скопируйте файлы корзины из папки WooCommerce: /wp-content/plugins/woocommerce/templates/cart/ Поместите скопированные файлы в папку: /wp-content/themes/ваша-тема/woocommerce/cart/ Вот некоторые файлы корзины, которые вы можете кастомизировать: cart.php > основной файл корзины, отвечает за вывод всех элементов корзины. cart-totals.php > выводит итоговую информацию корзины, включая общую сумму, налоги и доставку. cart-empty.php > шаблон для пустой корзины. mini-cart.php > мини-корзина, которая отображается, как правило, в хэдере или сайдбаре. Как редактировать шаблоны: Откройте нужные файлы в текстовом редакторе и внесите изменения: Измените порядок элементов корзины. Добавьте или уберите элементы. Измените стили для отображения корзины. Сохраните изменения, и кастомная корзина будет применена. 2. Добавление кастомных функций в корзину Вы можете добавлять кастомные функции в корзину WooCommerce с помощью хуков и фильтров, которые WooCommerce предоставляет для корзины. Пример кода для добавления кастомной информации в корзину: Откройте файл functions.php вашей темы. Добавьте следующий код: // Добавляем кастомное сообщение в корзину add_action( 'woocommerce_before_cart', 'custom_message_in_cart' ); function custom_message_in_cart() { echo '<div class="custom-message">Спасибо, что выбрали нас! Проверьте свою корзину перед оформлением заказа.</div>'; } Этот код добавит кастомное сообщение вверху страницы корзины. Пример добавления кастомного поля в корзину: Если вы хотите добавить кастомное поле в корзину (например, для сбора дополнительной информации от клиента), это можно сделать с помощью следующего кода: // Добавляем поле для заметок в корзину add_action( 'woocommerce_after_cart_table', 'custom_cart_note_field' ); function custom_cart_note_field() { echo '<div class="cart-note"><label for="cart_note">Добавьте заметку к заказу:</label><textarea name="cart_note" id="cart_note"></textarea></div>'; } // Сохраняем поле заметок в заказе add_action( 'woocommerce_checkout_create_order', 'save_cart_note_field', 10, 2 ); function save_cart_note_field( $order, $data ) { if ( isset( $_POST['cart_note'] ) ) { $order->update_meta_data( 'cart_note', sanitize_text_field( $_POST['cart_note'] ) ); } } Этот код добавит текстовое поле для заметок в корзину, а затем сохранит эту информацию в заказе. 3. Создание кастомной страницы корзины Если вы хотите создать свою страницу корзины с уникальным дизайном или функционалом, можно создать кастомную страницу и использовать шорткоды WooCommerce для отображения корзины. Шаги для создания кастомной страницы корзины: Перейдите в Страницы > Добавить новую. Создайте страницу с названием "Корзина" или другим названием по вашему выбору. Вставьте шорткод WooCommerce для корзины: [woocommerce_cart] Этот шорткод автоматически выводит корзину WooCommerce на странице. Вы можете дополнительно настроить стили корзины через CSS или кастомный код. Перейдите в WooCommerce > Настройки > Продвинутые и укажите новую страницу корзины в качестве основной страницы корзины. Теперь WooCommerce будет использовать вашу кастомную страницу корзины. 4. Добавление мини-корзины Если вы хотите добавить мини-корзину (например, в хедер или сайдбар), WooCommerce предоставляет шорткод для мини-корзины, а также виджет, который можно использовать. Использование шорткода для мини-корзины: Вы можете использовать шорткод мини-корзины на любой странице или в виджетах: [woocommerce_cart] Использование виджета для мини-корзины: Перейдите в Внешний вид > Виджеты. Найдите виджет WooCommerce Mini Cart (Мини-корзина WooCommerce). Перетащите его в область сайдбара или хедера. Настройте параметры виджета, если это необходимо. Сохраните изменения. Теперь мини-корзина будет отображаться в выбранной вами области. 5. Использование плагинов для кастомизации корзины Если вы хотите использовать более сложные функции корзины (например, всплывающие окна корзины, динамические изменения корзины без перезагрузки страницы и т.д.), можно воспользоваться плагинами для расширения функционала корзины. Популярные плагины для кастомизации корзины: WooCommerce Cart Abandonment Recovery ? Плагин для восстановления брошенных корзин. Он отслеживает пользователей, которые добавили товары в корзину, но не завершили заказ, и отправляет им автоматические письма с напоминанием. Ссылка: wordpress.org/plugins/woocommerce-cart-abandonment-recovery/ WooCommerce Side Cart ? Плагин добавляет плавающую боковую корзину, которая автоматически обновляется при добавлении товаров в корзину, позволяя покупателям не покидать текущую страницу. Ссылка: wordpress.org/plugins/woocommerce-side-cart/ WooCommerce Cart Notices ? Позволяет выводить уведомления в корзине, например, о минимальной сумме для бесплатной доставки или специальных акциях для пользователей с определённой суммой заказа. Ссылка: wordpress.org/plugins/woocommerce-cart-notices/ Шаги для установки плагина: Перейдите в Плагины > Добавить новый. Введите название плагина (например, WooCommerce Cart Notices) в строке поиска. Установите и активируйте плагин. Настройте плагин через соответствующий раздел WooCommerce или его настройки. 6. Кастомизация стилей корзины через CSS Для изменения внешнего вида корзины вы можете добавить свои стили в CSS вашей темы. Например, чтобы изменить вид кнопок или элементов корзины. Пример CSS для кастомизации корзины: /* Стилизация кнопки "Оформить заказ" */ .woocommerce-cart .checkout-button { background-color: #ff4500; color: #fff; padding: 10px 20px; font-size: 16px; text-transform: uppercase; } .woocommerce-cart .checkout-button:hover { background-color: #ff6600; } /* Стилизация заголовка таблицы корзины */ .woocommerce-cart th { background-color: #f4f4f4; padding: 10px; text-align: left; } Добавьте этот CSS в раздел Внешний вид > Настроить > Дополнительные стили CSS, чтобы применить изменения стиля к корзине. Создание кастомной корзины в WooCommerce может быть выполнено разными способами — от простого редактирования шаблонов до использования плагинов для расширения функционала. Вы можете кастомизировать внешний вид и функционал корзины через шаблоны, хуки и фильтры, а также добавлять мини-корзину или динамическую корзину. Выбор метода зависит от уровня кастомизации, который вам необходим.