Как создать страницу учетной записи WooCommerce с разделом рекомендуемых продуктов для вошедших в систему пользователей

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

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

Давайте начнем.

Sneak Peek

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

Вот страница учетной записи перед тем, как пользователь войдет в систему.

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

Загрузите макет страницы избранного продукта БЕСПЛАТНО

Чтобы ознакомиться с макетом страницы учетной записи из этого руководства, вам сначала нужно загрузить его, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.

Скачать файлы

Скачать бесплатно

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

СКАЧАТЬ

Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!

Подпишитесь на наш канал Youtube

Чтобы импортировать макет на свою страницу, просто извлеките zip-файл и перетащите файл json в Divi Builder.

Давайте перейдем к руководству, ладно?

Что вам нужно для начала

Для начала вам необходимо сделать следующее:

1. Если вы еще этого не сделали, установите и активируйте установленную тему Divi (или плагин Divi Builder, если тема Divi не используется).
2. Установите и активируйте плагин WooCommerce. Если вы настраиваете WooCommerce впервые, вам нужно будет запустить мастер базовой настройки, чтобы подготовить ваш магазин. После этого вы готовы добавлять свои новые продукты.
3. Создайте несколько продуктов, если у вас их еще нет. Для получения дополнительной информации о том, как добавить новый продукт, ознакомьтесь с этим руководством.

После этого вы будете готовы приступить к созданию раздела рекомендуемых продуктов в Divi.

Часть 1: Разработка страницы учетной записи

Включите Divi Builder на странице учетной записи WooCommerce

После установки и активации WooCommerce страница учетной записи WooCommerce будет создана для вас автоматически. Чтобы отредактировать страницу учетной записи, вы можете найти ее на панели инструментов WordPress, выбрав «Страницы»> «Все страницы». Затем наведите указатель мыши на страницу учетной записи и нажмите «Изменить».

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

Шорткод будет перенесен и помещен в текстовый модуль. Теперь нажмите, чтобы использовать Divi Builder во внешнем интерфейсе.

Настройки раздела

Первое, что мы собираемся сделать, это добавить фон в раздел. Откройте настройки раздела и обновите следующее:

• Цвет фонового градиента слева: # ad52b7
• Цвет фона градиента справа: rgba (255,255,255,0,66)
• Направление градиента: 90 градусов
• Стартовая позиция: 33%
• Конечная позиция: 0%
• Поместите градиент над фоновым изображением: ДА

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

Добавить заголовок с помощью нового текстового модуля

Чтобы добавить заголовок главной страницы (h1), добавьте новый текстовый модуль, щелкнув серый значок плюса под текущим текстовым модулем, содержащим шорткод WooCommerce.

Затем перетащите его над текстовым модулем шорткода WooCommerce и обновите настройки следующим образом:

Содержание тела:

<h1>My Account</h1>

На вкладке H1 обновите следующие стили текста заголовков:

• Шрифт заголовка: Подсказка
• Толщина шрифта заголовка: полужирный
• Цвет текста заголовка: # 3f214f
• Размер текста заголовка: 90 пикселей (рабочий стол), 56 пикселей (планшет), 36 пикселей (телефон).
• Расстояние между буквами заголовка: 5 пикселей

Настроить содержимое шорткода

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

Откройте настройки текстового модуля, содержащего шорткод, и обновите следующее:

• Цвет фона: rgba (255,255,255,0.9)

На вкладке текста абзаца обновите следующее:

• Шрифт текста: Roboto
• Размер текста текста: 16 пикселей

На вкладке "Ссылка" обновите следующее:

• Цвет текста ссылки: # ad52b7

На вкладке неупорядоченного списка обновите следующее:

• Размер текста неупорядоченного списка: 26 пикселей (рабочий стол), 18 пикселей (планшет)
• Расстояние между буквами неупорядоченного списка: 2 пикселя
• Высота строки неупорядоченного списка: 2em
• Отступ неупорядоченного элемента списка: 0,01 пикселя

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

• Шрифт заголовка 2: Roboto
• Размер текста заголовка 2: 56 пикселей (рабочий стол), 32 пикселя (планшет)

Затем добавьте отступ вокруг текстового модуля:

• Заполнение: 3% сверху, 3% снизу, 3% слева, 3% справа.

Наконец, дайте текстовому модулю собственный класс CSS.

• Класс CSS: пользовательский стиль учетной записи

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

Добавление внешнего CSS к стилю других информационных элементов учетной записи

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

Чтобы стилизовать цвета определенных элементов непосредственно для этой страницы, откройте настройки страницы и добавьте на страницу следующий настраиваемый CSS:

.custom-account-style .woocommerce-Button.button, .custom-account-style .woocommerce .woocommerce-form-login .woocommerce-form-login__submit {
    color: #ffffff!important;
    background-color: #9452b7;
    border-color: #9452b7;
}
.custom-account-style .woocommerce-Button.button:hover {
    background-color: #3f214f;
}

.custom-account-style .woocommerce .woocommerce-error, .custom-account-style .woocommerce .woocommerce-info, .custom-account-style .woocommerce .woocommerce-message {
   background-color: #3f214f;
}

Ширина ряда

После того, как текстовый модуль будет задан для шорткода woocommerce, сохраните настройки и откройте настройки строки. Обновите максимальную ширину следующим образом:

• Максимальная ширина: 1250 пикселей

Часть 2: Создание раздела рекомендуемых продуктов

Теперь, когда основная информация на странице учетной записи закончена, мы можем создать раздел рекомендуемых продуктов. Здесь мы будем использовать модули Divi WooCommerce для динамического извлечения информации о продукте. Затем мы собираемся добавить несколько фрагментов CSS, чтобы показывать продукт (ы) всякий раз, когда пользователь входит в систему.

Создание нового раздела и строки

Для начала создадим новый регулярный раздел.

Затем добавьте в раздел строку из одного столбца.

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

Добавить заголовок с помощью текстового модуля

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

Содержание тела:

<h2>Special Product Offer</h2>

• Шрифт заголовка 2: Подсказка
• Толщина шрифта заголовка 2: полужирный
• Цвет текста заголовка 2: # 3f214f
• Размер текста заголовка 2: 56 пикселей (рабочий стол), 36 пикселей (планшет)
• Заголовок 2 Расстояние между буквами: 5 пикселей

Добавить вторую строку

Затем добавьте новую строку со структурой 1/3 2/3 столбца.

Добавить модуль изображений Woo

В левом столбце добавьте модуль Woo Images.

Затем выберите продукт, который хотите показать, из раскрывающегося списка.

Затем обновите стиль значка продажи следующим образом:

• Цвет значка распродажи: # f1be51
• Шрифт значка продажи: Roboto
• Стиль шрифта значка продажи: TT
• Расстояние между буквами значка продажи: 5 пикселей
• Высота линии значка продажи: 1,3 em

Добавить разделитель

В правом столбце добавьте модуль разделителя и обновите настройки следующим образом:

• Цвет линии: #dddddd
• Вес разделителя: 3 пикселя
• Поля: 10 пикселей снизу

Добавить модуль заголовка Woo

Под модулем разделителя добавьте модуль заголовка Woo.

Затем добавьте тот же продукт, что и в модуле изображений woo.

Затем обновите настройки дизайна следующим образом:

• Заголовок уровня заголовка: H3
• Шрифт заголовка: Roboto
• Размер текста заголовка: 38 пикселей

Добавить ценовой модуль Woo

Затем добавьте модуль цены Woo с тем же продуктом.

Затем обновите настройки дизайна следующим образом:

• Шрифт цены: Roboto
• Цвет текста цены: # ad52b7

Добавить модуль описания Woo

Под модулем цены Woo добавьте модуль описания Woo.

Затем добавьте этот же товар в модуль описания woo.

Затем обновите настройки следующим образом:

• Цвет фона: #eeeeee
• Отступ: 20 пикселей сверху, 20 пикселей снизу, 20 пикселей слева, 20 пикселей справа

Добавить модуль "Добавить в корзину"

В модуле описания Woo добавьте модуль Woo Add to Cart и выберите тот же продукт.

Затем обновите настройки следующим образом:

• Использовать собственные стили для кнопки: ДА
• Цвет текста кнопки: #ffffff
• Цвет фона кнопки: # ad52b7

Обновите настройки строки

Затем обновите настройки строки следующим образом:

• Цвет фона (планшет): #ffffff
• Максимальная ширина: 1250 пикселей
• Padding (рабочий стол): 0px вверху, 0px внизу
• Отступ (планшет): 25 пикселей сверху, 25 пикселей снизу, 25 пикселей слева, 25 пикселей справа.

Затем откройте настройки левого столбца и обновите следующее:

• Цвет фона: # 3f214f
• Отступ: 25 пикселей сверху, 25 пикселей снизу, 25 пикселей слева, 25 пикселей справа

Добавление дополнительных продуктов

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

Затем используйте параметры поиска и замены, чтобы заменить выбранный продукт новым продуктом по вашему выбору. Обязательно замените продукт для всех вариантов продукта в этой строке. Затем нажмите кнопку «Заменить».

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

Добавить CSS ID

Чтобы скрыть пользователей раздела рекомендуемых продуктов, которые не вошли в систему, нам нужно добавить класс CSS в раздел рекомендуемых продуктов следующим образом:

• Класс CSS: только для входа в систему

Добавить внешний CSS

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

.logged-in-only {
  display: none;
}
.logged-in .logged-in-only{
  display: block;
}

Этот код по умолчанию скроет раздел, а затем покажет его, когда пользователь войдет на ваш сайт WordPress.

Конечный результат

Вот страница учетной записи перед тем, как пользователь войдет в систему.

Вот страница учетной записи после входа пользователя в систему.

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

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

Надеюсь, это даст вам немного вдохновения при создании следующей страницы учетной записи в Divi.

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

Я с нетерпением жду вашего ответа в комментариях.

Ваше здоровье!