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

Как работает страница входа в WooCommerce

После установки WooCommerce плагин автоматически создает страницу «Моя учетная запись» в вашем магазине — это страница, которая отображает контент с [woocommerce_my_account] короткий номер.

Страница «Моя учетная запись» — это основная страница входа для клиентов. Вы можете переименовать ее и добавить в навигационное меню.

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

Встроенная форма входа в WooCommerce

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

Страница моей учетной записи WooCommerce по умолчанию

Вкладка «Сведения об учетной записи» позволяет пользователям настраивать свои данные для входа.

Вход в WooCommerce по умолчанию с выбранными данными учетной записи

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

Размещение блока входа/выхода в область виджета боковой панели

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

Форма входа в WooCommerce в виде виджета на боковой панели внешнего интерфейса

Как настроить стандартные формы входа в WooCommerce?

Если вы хотите настроить форму входа в WooCommerce, у вас есть несколько вариантов:

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

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

Как настроить логин клиента WooCommerce

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

Чтобы начать процесс, установите и активируйте плагин на своем веб-сайте WordPress.

  1. Включить форму входа/регистрации WooCommerce
  2. Заменить форму страницы «Моя учетная запись»
  3. Управление полями формы регистрации/входа
  4. Настройте стили страницы входа/регистрации WooCommerce
  5. Проверьте результаты на интерфейсе
  6. Добавьте форму входа/регистрации WooCommerce в любом месте вашего сайта.
  7. Посмотреть результаты на фронтенде

1. Включите форму входа/регистрации WooCommerce.

Когда плагин активен, вы должны увидеть вкладку в панели администратора WordPress под названием Login/Signup Popup. Нажмите на это, чтобы продолжить.

Перейдите на вкладку «Вход/регистрация» в меню администратора WordPress.

В разделе Общие убедитесь, что вы проверили следующие вкладки:

  • Включить регистрацию
  • Автоматический вход пользователя при регистрации
  • Обработка сброса пароля

Обычно все они активируются после установки плагина Login/Signup Popup, но лучше перепроверить. В этой области есть несколько других параметров, которые вы также можете настроить, например, выбор роли пользователя после того, как кто-то зарегистрируется, или добавление страницы перенаправления входа.

Включение новой регистрационной формы

2. Замените форму страницы «Моя учетная запись»

Прокрутите вниз до раздела настроек WooCommerce.

Активируйте эти настройки, если они еще не включены:

  • Заменить форму моей учетной записи
  • Заменить форму входа в кассу

Это значительно упрощает для вас процесс, поскольку плагин автоматически заменяет стандартную форму регистрации/входа на странице «Моя учетная запись» на новую, которую вы можете контролировать. То же самое касается формы входа в кассу.

Активация настроек для замены стандартных форм входа в WooCommerce

3. Управление полями формы регистрации/входа

Находясь на вкладке «Общие», перейдите к началу страницы. Щелкните ссылку «Управление» рядом с параметром «Поля регистрации».

Нажатие на ссылку «Управление» для управления полями регистрации

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

Щелкайте по полям с левой стороны. Когда вы щелкнете по каждому из них, вы увидите уникальные настройки поля.

  1. Отметьте поле как активное, если хотите включить его в форму входа/регистрации.
  2. Настройте поле входа в WooCommerce, изменив такие параметры, как заполнители, максимальное количество символов и автозаполнение с информацией о выставлении счетов и доставке WooCommerce.

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

Добавление полей в логин WooCommerce и установка их как активных

4. Настройте стили страницы входа/регистрации WooCommerce.

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

🗏 На этой странице вы можете:

  • Показать значки
  • Изменить размер значка
  • Изменить ширину контейнера
  • Изменение цвета значка и фона значка
  • Выберите цвет границы
  • Установить нижнее поле для всех полей
  • Выберите цвет фона для полей ввода

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

Изменение настроек, таких как отображение значков, выбор цветов и т. д.

5. Проверьте результаты на интерфейсе

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

Новая форма на вкладке «Вход»

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

Встроенная форма входа в WooCommerce с вкладкой регистрации

6. Добавьте форму входа/регистрации WooCommerce в любом месте вашего сайта.

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

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

Вы можете:

  1. Откройте всплывающую версию формы входа/регистрации из меню, используя ссылку, класс или шорткод.
  2. Используйте шорткод для отображения встроенной или всплывающей версии формы входа.

Копируем шорткод для входа

Поскольку мы уже рассмотрели встроенную версию формы входа в WooCommerce, давайте рассмотрим, как отображать всплывающую форму.

Перейдите на страницу, публикацию или область виджетов (в любом месте, где есть редактор контента) и добавьте блок шорткода. Вставьте шорткод всплывающей формы с предыдущей страницы в этот блок. Нажмите «Обновить» или «Опубликовать» для страницы/публикации.

Примечание. Если вы используете классический редактор WordPress, вставьте этот шорткод в визуальный редактор, чтобы он заработал.

Вставка шорткода для всплывающей формы входа в WooCommerce

7. Просмотрите результаты в интерфейсе

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

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

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

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

Вид всплывающей формы входа в WooCommerce

Как добавить социальные логины в WooCommerce

Более современный способ настроить область входа в WooCommere — добавить кнопки входа через социальные сети. Это сводит к минимуму объем ввода, который должен выполнить клиент, поскольку он извлекает их текущую информацию из таких мест, как Facebook или Twitter, для создания учетной записи на вашем сайте.

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

Тем не менее, самый простой и дешевый способ добавить социальные кнопки к вашему логину WooCommerce — установить бесплатный плагин Super Socializer.

  1. Включить функцию входа через социальные сети
  2. Настроить социальные сети
  3. Включить социальный вход для форм WooCommerce
  4. Проверьте свою функциональность входа в социальную сеть WooCommerce

1. Включите функцию входа через социальные сети

После активации вы найдете вкладку Super Socializer в меню администратора WordPress. Откройте его, затем выберите параметр «Вход через социальные сети».

Переход на страницу входа через социальные сети в плагине Super Socializer

Установите флажок «Включить вход через социальные сети» — он находится в разделе «Основной контроль».

снимите флажок «Включить вход через социальные сети»

2. Настройте социальные сети

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

выбор социальных сетей для включения в логин WooCommerce

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

Информация о том, как получить секреты и идентификаторы приложений Facebook и Twitter.

Например, Facebook позволяет быстро создать «приложение», которое предоставляет идентификатор приложения и секрет. Вам не нужно ничего знать о разработке приложений Facebook — просто создайте приложение (и никогда не удаляйте его), чтобы получить идентификатор и секрет.

Идентификатор и секрет приложения, показанные в новом приложении Facebook

Для каждого социального входа, который вы хотите, вставьте идентификатор / ключ и секрет обратно в WordPress.

Не забудьте нажать кнопку Сохранить внизу, когда закончите.

Идентификатор приложения Facebook и секрет, вставленный в нужные поля

Вам также может понадобиться добавить ссылку с вашего сайта в приложение, но это зависит от социальной сети — Facebook требует этого шага.

Ссылка с веб-сайта, которую необходимо разместить в Facebook.

3. Включите социальный вход для форм WooCommerce

Чтобы включить кнопки входа через социальные сети в WooCommerce, перейдите на вкладку «Дополнительные настройки» в плагине Super Socializer.

Необходимо отметить четыре поля 📦 (если только вы не хотите, чтобы кнопки социальных сетей появлялись в определенных формах входа):

  1. Включить перед формой входа клиента WooCommerce
  2. Включить в форме входа клиента WooCommerce
  3. Включить в форме регистрации клиента WooCommerce
  4. Включить на странице оформления заказа WooCommerce

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

4. Проверьте свою функциональность входа в социальную сеть WooCommerce

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

Теперь вы увидите все кнопки входа в социальные сети, которые вы активировали ранее. Для этого урока мы включили только Facebook, но есть и другие на выбор. И когда кто-то нажимает на кнопки, он может зарегистрироваться или войти на ваш сайт WooCommerce со своими ранее созданными социальными учетными данными!

Кнопка входа в Facebook для WooCommerce на интерфейсе

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

Другие способы настроить логин WooCommerce

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

👉 Вот другие варианты для рассмотрения:

У вас остались вопросы о том, как настроить страницу входа в WooCommerce? Дайте нам знать об этом в комментариях!