Как создать пользовательскую регистрационную форму WooCommerce

Хотите улучшить процесс регистрации клиентов на вашем сайте WordPress? Создание пользовательской регистрационной формы WooCommerce — это шаг в правильном направлении.

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

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

Создание пользовательской регистрационной формы WooCommerce

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

Шаг 1: Установите ProfilePress

Зарегистрируйтесь в ProfilePress, и вы получите квитанцию ​​со ссылкой для загрузки плагина вместе с лицензионным ключом. Загрузите и установите плагин на свой сайт WordPress. Введите лицензионный ключ для активации плагина.

Шаг 1.5: Включите регистрацию WooCommerce

Перейдите в WooCommerce-> Настройки панели инструментов. Нажмите на раздел « Конфиденциальность и учетные записи » и установите флажок « Разрешить клиентам создавать учетную запись на странице «Моя учетная запись» .

Шаг 2: Создание пользовательской формы с помощью ProfilePress

Теперь самое интересное. На панели инструментов WordPress перейдите в ProfilePress > Формы и профили > Регистрация > Добавить новый .

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

Выберите конструктор перетаскивания.

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

Добавление настраиваемых полей

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

• Имя пользователя
• Адрес электронной почты
• подтвердить Email
• Пароль
• Подтвердить Пароль
• Надежность Пароля
• Псевдоним веб-сайта
• Отображаемое имя
• Имя
• Фамилия
• Загрузить изображение профиля
• Загрузить обложку
• биография
• Выберите роль
• Пользовательский HTML
• reCAPTCHA

Вот краткий обзор настраиваемых полей, которые мы выбираем для нашей регистрационной формы:

Изменение настроек формы

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

И прежде чем перейти к следующему шагу, убедитесь, что вы зашли в « Настройки регистрации» и выбрали « Клиент » в качестве новой роли пользователя. Любой, кто зарегистрируется с помощью этой пользовательской формы, будет считаться клиентом.

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

Шаг 3: Замена регистрационной формы WooCommerce

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

Перейдите в ProfilePress > Настройки > WooCommerce . Вы должны увидеть опцию под названием «Форма регистрации моей учетной записи» . В раскрывающемся меню выберите новую регистрационную форму , которую вы только что создали, и сохраните настройку.

При желании вы можете использовать эту форму в качестве страницы регистрации по умолчанию для своего веб-сайта. Все, что вам нужно сделать, это перейти в ProfilePress > Settings > General > Global . Затем в разделе « Страница регистрации » выберите новую пользовательскую страницу регистрации .

Стоит отметить, что если вы когда-нибудь решите создать новую страницу регистрации, скопируйте шорткод формы, создайте новую страницу, добавьте шорткод и опубликуйте страницу. Да, это так просто!

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

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

Как создать пользовательскую форму входа в WooCommerce

Чтобы создать пользовательскую форму входа в WooCommerce, перейдите в ProfilePress > Forms & Profiles > Login > Add New .

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

Затем добавьте настраиваемые поля и измените внешний вид формы в соответствии с вашими потребностями.

И, наконец, чтобы заменить стандартную форму входа в WooCommerce на новую пользовательскую форму, перейдите в ProfilePress > Настройки > WooCommerce > Форма входа в мою учетную запись и выберите новую форму входа .

Если вы хотите сделать новую форму входа в систему формой входа по умолчанию для всего вашего веб-сайта, перейдите в ProfilePress > Настройки > Общие > Глобальные . Затем в разделе « Страница входа » выберите новую пользовательскую форму входа .

Вот как будет выглядеть пользовательская страница входа на нашем сайте:

Теперь вы знаете, как создать пользовательскую форму входа в WooCommerce.

Если вы замените формы регистрации и входа по умолчанию на странице «Моя учетная запись» пользовательскими формами от ProfilePress, вот как это может выглядеть на вашем сайте.

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

Добавление настраиваемых полей регистрации в WooCommerce Checkout

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

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

Далее перейдите в ProfilePress > Settings > Custom Fields . Вы должны найти одно или два настраиваемых поля, доступных на этой странице. Чтобы добавить дополнительные настраиваемые поля, выберите Добавить новое .

ProfilePress поддерживает следующие типы настраиваемых полей:

• Текст
• Пароль
• Эл. адрес
• телефон
• Скрытое поле
• Количество
• Дата
• Страна
• Текстовое поле
• Один флажок
• Файл загружен
• Выберите раскрывающийся список
• Радио-кнопки
• Флажок

Когда вы создали все необходимые поля, сохраните настройки и перейдите в ProfilePress > Settings > WooCommerce > Checkout Registration Fields . Добавьте поля регистрации, которые вы только что создали.

Если вы хотите сделать поля обязательными, то в Required Registration FIelds добавьте поля , которые, по вашему мнению, должны быть обязательными.

Не забудьте сохранить изменения.

Вот и все. Теперь у вас есть настраиваемая регистрационная форма для оформления заказа.

Вывод

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

Тем не менее, ProfilePress — это больше, чем просто конструктор форм. Это может помочь вам управлять профилями пользователей и каталогами участников. Помимо прочего, это может помочь вам ограничить доступ к контенту на вашем веб-сайте. Попробуйте ProfilePress!

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