Woo - Виджет для оформления заказа

Уроки WordPress > Ultimate Addons для Elementor

Страница оформления заказа — важный шаг, на котором пользователи указывают свои адреса и платежные реквизиты. Утомительные и сложные страницы оформления заказа часто приводят к отказу от оформления заказа.

С помощью виджета Woo – Checkout вы можете легко создавать красивые и прибыльные страницы оформления заказа. Ultimate Addons for Elementor предлагают этот уникальный виджет, который позволяет настроить страницу оформления заказа WooCommerce по умолчанию.

Ключевая особенность

Макеты — один столбец, два столбца, многошаговый
Возможность включить кнопку корзины и поле дополнительной информации.
Пользовательские метки для полей формы
Настроить раздел входа
Настройте раздел купонов
Варианты цвета и оформления для всех полей

Давайте посмотрим, как можно использовать этот замечательный виджет

Добавление виджета Woo — Checkout на страницу Elementor

Прежде чем добавлять этот виджет на страницу, обязательно:

Установите эту страницу в качестве страницы оформления заказа в настройках WooCommerce. Для этого из панели управления посетите WooCommerce > Настройки > Вкладка «Дополнительно» > Настройки страницы > Страница оформления заказа.
Кроме того, добавьте товары в корзину, чтобы отредактировать страницу оформления заказа. WooCommerce не делает страницу оформления заказа доступной до тех пор, пока товары не будут добавлены в корзину.

Вы можете добавить виджет на страницу оформления заказа и начать его редактировать. Виджет извлекает все поля со страницы оформления заказа WooCommerce и позволяет настроить ее макет, цвет, типографику и дополнительные поля.

Макет

Вы можете управлять макетом формы оформления заказа. Отобразить это в :

Один столбец — все поля будут отображаться в одном столбце, как и в представлении по умолчанию.
Две колонки — поля формы оформления заказа будут разделены на две колонки. Платежный адрес и другие данные будут отображаться в одном столбце. При этом просмотр заказа и способ оплаты будут отображаться в другом столбце.
Многошаговый — поля оформления заказа будут отображаться в виде нескольких отдельных этапов — выставление счета, доставка и оплата. Пользователи могут заполнить одну страницу и перейти к следующей.

Он также предлагает еще два варианта :

Включить кнопку «Корзина» — на странице оформления заказа будет добавлена кнопка «Назад в корзину». Так что, если пользователю понадобится внести какие-либо дополнения или изменения в корзину, эта опция будет легко доступна.
Показать поле дополнительной информации . При этом будет добавлено дополнительное поле, в котором пользователи смогут добавлять любые примечания к заказам.

Этикетки оформления заказа

Здесь вы можете добавить собственные метки для полей формы оформления заказа. К этим полям можно даже подключить динамические теги.

Вы можете установить любую метку для:

Текст счета
Текст доставки
Текст заказа
Текст платежа
Текст кнопки корзины

Раздел входа в систему

Это добавит ссылку, по которой пользователи смогут войти в свою учетную запись и продолжить оформление заказа. Чтобы проверить эту опцию, вам необходимо выйти из веб-сайта и перейти на страницу оформления заказа. Вот как будет выглядеть раздел входа :

Если вы не видите опцию входа в систему и хотите ее включить, то на панели управления выберите WooCommerce > Настройки > Учетные записи и конфиденциальность > Включить «Разрешить клиентам входить в существующую учетную запись во время оформления заказа».

Вы можете настроить этот раздел со следующими настройками :

Заголовок — добавьте текст для раздела входа в систему.
Текст ссылки — текст ссылки, который предложит пользователю войти в систему.
Текст формы — текст, который будет отображать информацию в форме входа.

Раздел купонов

Купоны могут принести пользу вашему онлайн-бизнесу различными способами, например, привлечь новых пользователей в магазин, помочь пользователям попробовать новые продукты. Вы можете добавить и настроить раздел купонов со следующими пунктами:

Заголовок — текст, который запрашивает пользователя, есть ли у него код купона.
Текст ссылки — текст ссылки, который предложит пользователю открыть поле для ввода данных купона.
Текст формы — текст, который будет отображаться над полем ввода.
Поле заполнителя — заполнитель для поля, в котором пользователь вводит код купона.
Текст кнопки — текст на кнопке, которая отправит код.

Вкладка «Стиль»

Виджет предлагает цвет и типографику для каждого раздела формы оформления заказа. Вы можете установить цвет текста, цвет фона, типографику, границу, отступы и другие стили для следующих полей: