Как создать формы выбора колеса удачи WooCommerce с помощью Divi

Каждую неделю мы предоставляем вам новые бесплатные пакеты макетов Divi, которые вы можете использовать в своем следующем проекте. Для одного из пакетов макетов мы также расскажем о сценарии использования, который поможет вам вывести свой веб-сайт на новый уровень.

На этой неделе, в рамках нашей текущей инициативы по дизайну Divi, мы собираемся показать вам, как создавать формы выбора счастливого колеса WooCommerce с помощью Divi и плагина WP Optin Wheel. Мы надеемся, что это руководство поможет вам повысить коэффициент конверсии формы подписки. Функция геймификации формы выбора счастливого колеса позволит вам взаимодействовать с посетителями и вознаграждать их кодом скидки, который они могут использовать при своих покупках в Интернете.

Давайте приступим к делу!

Предварительный просмотр

Прежде чем мы углубимся в руководство, давайте быстро посмотрим на результат на экранах разных размеров.

Установить WooCommerce

Найдите плагин и установите

Первое, что вам нужно сделать, если вы еще этого не сделали, - это установить WooCommerce на свой веб-сайт WordPress. Мы также предполагаем, что вы установили пакет макетов магазина оборудования на веб-сайте Divi, над которым вы работаете.

Зайдите в свои плагины и найдите WooCommerce. Найдя его, нажмите кнопку «Установить сейчас».

Активировать

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

Настроить WooCommerce

Затем WooCommerce автоматически перенаправит вас в форму настройки. Здесь вам нужно будет заполнить все данные, чтобы подготовить свой магазин к запуску. После того, как вы пройдете через этот процесс, все необходимые страницы WooCommerce будут автоматически добавлены на ваш сайт.

Установите плагин WP Optin Wheel

Найдите плагин и установите

Чтобы создать форму подписки Lucky Wheel, мы собираемся использовать бесплатный плагин геймификации под названием WP Optin Wheel. Вернитесь к своим плагинам и найдите плагин WP Optin Wheel. Затем нажмите кнопку «Установить сейчас».

Активировать

Продолжите, активировав плагин.

Добавить товары в WooCommerce

Добавить новый продукт

Если у вас уже есть веб-сайт электронной коммерции, вы можете пропустить эту часть. Однако если вы просто пробуете что-то, мы рекомендуем вам добавить некоторые продукты в свой плагин WooCommerce. Это поможет вам впоследствии протестировать форму подписки на счастливое колесо. Чтобы добавить новый продукт, перейдите в раздел «Продукты»> «Добавить новый» .

Добавить информацию о продукте

Заполните все данные о продукте. Это включает, помимо прочего, название продукта, описание, изображение, цену и категорию. Опубликуйте страницу продукта, как только вы закончите добавлять эти детали.

Повторите для каждого продукта

Повторите тот же шаг для каждого из продуктов, которые вы хотите добавить на свой веб-сайт.

Добавить купоны в WooCommerce

Перейти к купонам

Пришло время добавить купоны. Позже в этом посте мы будем использовать купоны, которые мы создаем в форме подписки на счастливое колесо. Перейдите в панель управления WordPress> WooCommerce> Купоны . Как только вы окажетесь там, продолжайте создавать свой первый купон.

Добавьте купон №1: СКИДКА 5%

Общий

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

• Тип скидки: процентная скидка
• Сумма купона: 5
• Срок действия купона: укажите дату выбора

Ограничения использования

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

• Установите этот флажок, если купон нельзя использовать вместе с другими купонами.
• Установите этот флажок, если купон не распространяется на товары со скидкой. Купоны на товары будут работать только в том случае, если товар отсутствует в продаже. Купоны на корзину будут работать только в том случае, если в корзине есть товары, которых нет в продаже.

Повторите шаги для 3 других купонов

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

Создать форму выбора "Колесо удачи"

Зайдите в настройки плагина

Теперь, когда мы выполнили все необходимые шаги, чтобы заставить форму подписки Lucky Wheel работать, мы можем приступить к ее созданию! Перейдите в панель управления WordPress > WP Optin Wheel .

Добавить ключ API MailChimp

Прежде чем вы сможете приступить к созданию счастливого колеса, вам нужно будет добавить свой ключ API MailChimp. Бесплатная версия плагина WP Wheel Optin предлагает только интеграцию с MailChimp. Если вы хотите привязать колесо удачи к другому провайдеру, вам придется перейти на премиум-версию.

Создать новое колесо

Выберите тему

Приступим к созданию колеса! Выберите желаемую цветовую палитру. Для этого урока мы выберем оранжевый, так как он хорошо сочетается с цветовой палитрой Hardware Store Layout Pack.

Возможности установки

Следующим шагом в создании формы подписки на счастливое колесо является выбор процента изменения выигрыша. Этот процент показывает, как часто люди выигрывают при вращении колеса. В этом случае каждый посетитель, который вращает колесо, имеет 70% шанс выиграть код купона.

Настроить срезы

Продолжите настройку 12 различных ломтиков. Вы можете посвятить каждый из кусочков одному из трех вариантов:

• Без приза: посетитель ничего не выигрывает
• Код купона: посетитель получает код купона
• Ссылка: посетители выигрывают, например, электронную книгу.

В этом примере мы используем 4 из 12 фрагментов для добавления кода купона. Мы также настраиваем шансы для каждого из этих фрагментов индивидуально.

Настроить конструктор форм

Следующий шаг поможет вам создать саму форму подписки. Вы заметите, что там уже есть поле для электронной почты. Единственный другой тип поля, которое вы можете добавить в форму подписки, - это флажок. Они специально добавили этот тип поля, чтобы форма соответствовала требованиям GDPR.

Настройки контента

Двигаясь дальше, вы сможете настроить письменный контент формы подписки на счастливое колесо. Идите вперед и измените весь контент, чтобы он соответствовал вашему веб-сайту.

Настройки дизайна

Затем откройте настройки дизайна и выберите «Без рисунка» для параметра фонового рисунка.

Настройки поведения

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

GDPR

И последнее, но не менее важное: вы можете быть уверены, что данные, которыми делятся посетители, не будут сохранены, если они не отметят разные поля в вашей форме подписки, и все готово! Сохраните форму подписки на счастливое колесо и перейдите на свой веб-сайт, чтобы протестировать ее.

Предварительный просмотр

Теперь, когда мы прошли все этапы, давайте в последний раз посмотрим на результат на экранах разных размеров.

Последние мысли

Это руководство является частью нашей текущей инициативы по дизайну Divi, в рамках которой мы каждую неделю стараемся добавлять что-то дополнительное в ваш набор инструментов. Мы надеемся, что это руководство поможет вам быстрее и в интерактивном режиме создавать списки адресов электронной почты. Если у вас есть какие-либо вопросы или предложения, обязательно оставьте комментарий в разделе комментариев ниже!