Использование пакета макетов моды Divi для создания интернет-магазина с WooCommerce

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

В этом уроке я покажу вам, как создать интернет-магазин с помощью пакета макетов Divi Fashion с помощью Woocommerce. Я расскажу, как правильно настроить макеты для настройки, как оживить страницу магазина с помощью интеграции Woocommerce, а также несколько советов по использованию элементов макета и настройщика тем для стилизации страниц Woocommerce.

Установка

Ради экономии времени я собираюсь начать это руководство с уже выполненных определенных шагов.

1. Установите и активируйте тему Divi.
2. Установите и активируйте WooCommerce.
3. Загрузите пакет Fashion Layout Pack и импортируйте файл Fashion_All.json в свою библиотеку тем Divi.
4. Создайте новые страницы для каждого макета.
5. Создайте свое главное меню.

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

Выполнив 5 шагов, описанных выше, можно начинать.

Подглядывание

Вот некоторые из страниц WooCommerce, которые вы будете создавать.

Использование пакета макетов моды Divi для создания интернет-магазина с WooCommerce

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

Измените свой глобальный цвет акцента

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

Чтобы изменить глобальный цвет акцента, перейдите в настройщик темы, перейдите в Общие настройки> Настройки макета и найдите параметр Цвет акцента внизу.

Я использую этот розовый цвет из макета: # fc7086.

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

Обновите настройки оформления в настройщике темы

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

Чтобы обновить типографику, перейдите в Divi> Настройка тем> Общие настройки> Типографика и обновите следующее:

Размер основного текста: 16 пикселей
Высота линии корпуса: 1,9
Размер текста заголовка: 42
Стиль шрифта заголовка: B
Шрифт заголовка: Playfair Display
Шрифт основного текста: Poppins
Цвет основной ссылки: [если вы обновили свой глобальный цвет акцента, этот цвет должен появиться здесь]

Установить страницу магазина WooCommerce

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

На панели инструментов WordPress перейдите в WooCommerce> Настройки и щелкните вкладку Продукты вверху страницы. В меню непосредственно под вкладкой выберите « Экран» . Затем выберите страницу магазина на странице «Магазин», которую вы создали с новым макетом страницы магазина из пакета макетов моды.

Затем сохраните изменения.

Добавьте товары в свой магазин

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

1. Перейдите в раздел " Продукты"> "Добавить новый".
2. Введите название продукта.
3. Введите описание продукта.
4. Введите цену продукта.
5. Введите краткое описание продукта.
6. Добавьте три новые категории (лето, популярные и распродажа).
7. Выберите категорию для вашего продукта (в данном случае это будет лето).
8. Добавьте изображение продукта
9. Опубликовать / обновить продукт

Назначьте категории своим продуктам

Повторяя описанные выше шаги для создания новых продуктов, не забудьте присвоить категорию каждому из них (№7 в шагах, перечисленных выше). Для этого урока я добавил 6 продуктов в категорию «Лето», 6 продуктов в категорию «Рекомендуемые» и 1 продукт в категорию «Распродажа».

Обновите модули магазина на странице магазина

Теперь, когда у вас есть продукты, вы можете добавить их на страницу своего магазина. Как я упоминал ранее, в макет страницы магазина уже встроены модули магазина. Один находится в разделе "Лето", а другой - в разделе "Интересные".

Перейдите на страницу магазина и разверните визуальный конструктор. Затем наведите указатель мыши на модуль магазина (в настоящее время не показывающий никаких товаров) под строкой, содержащей заголовок «Летняя мода», и нажмите на настройки модуля.

Обновите настройки, включив только категорию «Лето».

Теперь вы должны увидеть все товары, добавленные в категорию лето.

Затем найдите модуль магазина под заголовком избранных товаров и обновите настройки, чтобы включить только категорию "Интересные".

Добавьте модуль магазина для отображения товаров со скидкой на странице магазина

Поскольку у нас есть две категории (Рекомендуемые товары и Летняя мода) на странице магазина, было бы легко создать дополнительные категории и товары, используя модули, уже представленные в макете.

Давайте создадим еще один раздел для отображения наших продуктов «Распродажа».

Для этого разверните визуальный конструктор и используйте параметры щелчка правой кнопкой мыши, чтобы скопировать весь раздел с летними модными товарами и вставить его непосредственно под разделом «Рекомендуемые товары».

Теперь все, что вам нужно сделать, это сделать несколько обновлений.

В строке, отображающей заголовок, нажмите на текст в текстовом модуле и измените заголовок на «Распродажа» вместо «Летняя мода».

Затем измените изображение в левом столбце на что-нибудь более подходящее для ваших распродаж.

Наконец, обновите модуль магазина, включив в него только категорию «Распродажа».

Украсьте свои страницы WooCommerce модным макетом

WooCommerce автоматически генерирует собственный набор страниц WooCommerce при установке плагина. К ним относятся следующие:

Магазин - это заполнитель для архива типа публикации для ваших продуктов.
Корзина - в которой используется шорткод [woocommerce_cart] для создания содержимого корзины.
Checkout - который использует короткий код [woocommerce_checkout] для отображения информации.
Моя учетная запись - в которой используется короткий код [woocommerce_my_account] для отображения конкретной информации о клиентах, связанной с их учетной записью.

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

Добавление заголовка раздела на страницы корзины и оформления заказа

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

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

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

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

Теперь отредактируйте страницу корзины. В редакторе страниц по умолчанию выберите использование Divi Builder, затем «Использовать Visual Builder». Конструктор должен был автоматически поместить шорткод [woocommerce_cart] в текстовый модуль в строку из одного столбца обычного раздела. Если нет, вам нужно будет создать это самостоятельно. Затем щелкните синий значок плюса, чтобы добавить новый раздел под текущим, выберите вкладку «Добавить из библиотеки». Затем выберите новый раздел, который вы только что создали, под названием «Раздел заголовка страницы».

Затем перетащите этот раздел в верхнюю часть страницы и измените текст заголовка на «Ваша корзина». Вот и все!

Вы также можете повторить этот процесс для страницы оформления заказа.

Создание страницы моей учетной записи с помощью Divi Builder

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

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

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

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

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

На вкладке "Дизайн"…

Размер текста текста: 20 пикселей
Высота текстовой строки: 1,6 мкм

Теперь щелкните вкладку ссылок в разделе «Текст», чтобы оформить ссылки следующим образом:

Шрифт ссылки: Poppins
Толщина шрифта ссылки: полужирный
Размер текста ссылки: 27 пикселей
Высота линии связи: 1.5em

Сохранить настройки

Теперь проверьте свою страницу моей учетной записи.

Используете собственный CSS для стилизации страниц архива WooCommerce?

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

Давайте в качестве примера рассмотрим страницу «Избранные категории».

Теперь давайте откроем настройщик тем, щелкнем по дополнительному CSS и добавим следующее:

.orderby {
background: #fd7792;
color: #fff!important;
font-size: 18px;
height: 40px;
font-size: 18px !important;

}

.woocommerce-Price-amount, .woocommerce .woocommerce-breadcrumb, p.woocommerce-result-count {
    font-size: 16px !important;
    color: #fd7792 !important;
    letter-spacing: 2px;
}

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

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

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

Во всяком случае, я надеюсь, что этот пост вдохновил вас на создание чего-то удивительного самостоятельно.

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

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