WordPress — Как создать интернет магазин (Часть 4)

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

Создаём интернет магазин с помощью WordPress (Часть 4).

Добавляем промо виджеты (три маленьких) на главную страницу.

Давайте добавим на нашу главную страницу промо виджеты с информацией. Добавляем после слайдера. Заходим в дашборде WordPress-а «Внешний вид» -> «Виджеты». Нам необходимо перетащить виджет «Ap : Promo widget» в меню «AP : Promo Widget 1». У нас их будет три, так что перетаскиваем ещё два раза.

WordPress добовляем промо виджет

WordPress добовляем промо виджет

Дальше нам необходимо зайти в каждый и настроить.

WordPress добовляем промо виджет шаг 2

WordPress добовляем промо виджет шаг 2

По строкам:

  • Title — думаю понятно.
  • Upload Image — заливаем изображение виджета.
  • Enter Promo Desc — Краткое описание.
  • Enter Promo Button Text — название кнопки.
  • Enter Promo Link — Ссылка, куда будем переходить по нажатию кнопки.

Нажимаем сохранить. Так настраиваем все три. У меня получилось так:

WordPress добовляем промо виджет итог

WordPress добовляем промо виджет итог

Правда мне не очень нравится, что всё расположено не ровно, слева текст по центру, в центре по левому краю. Разработчики темы заточили стиль под определённые картинки. Так что придётся править стили CSS, либо выбирать подходящие изображения.

Добавляем промо виджет (Большой) на главную страницу.

Так же тема «AccessPress Store» нам позволяет разместить большую виджет-картинку. Для этого опять идём во вкладку «Виджеты» и перетаскиваем «Ap : Promo FullWidth widget» в меню «AP : Promo Widget 2».

WordPress добавляем промо виджет на всю ширину страницы

WordPress добавляем промо виджет на всю ширину страницы

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

WordPress добавляем промо виджет на всю ширину страницы

WordPress добавляем промо виджет на всю ширину страницы

В итоге у меня получилось так:

WordPress промо виджет итог

WordPress промо виджет итог

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

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

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

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

Для начала нам необходимо добавить изображение нашей категории. Ищем вкладку «Товары» -> «Категории», нажимаем на нашу категорию.

WordPress добавляем изображение категории товаров

WordPress добавляем изображение категории товаров

В открывшемся окне, внизу, ищем строку «Миниатюра», нажимаем «Загрузить/Добавить изображение», нажимаем обновить.

WordPress добавляем изображение категории товаров

WordPress добавляем изображение категории товаров

Дальше нам необходимо вернуться в закладку «Виджеты». Переносим виджет «Ap : WooCommerce Product Banner» в меню «Product Listing Widger 3».

WordPress переносим виджет

WordPress переносим виджет

Теперь немного о настройках. Тут всего два поля, первое указываем с какой стороны хотели бы отображать картинку категории (слева или справа), второй выбор самой категории. Я добавил сразу два варианта, вот как это выглядит:

WordPress слайдеры в итоге

WordPress слайдеры в итоге

В следующей статье займёмся нижней частью главной страницы (футором) и ещё парочкой виджетов.

Читайте продолжение: WordPress — Как создать интернет магазин (Часть 5)

Надеюсь данная статья оказалась Вам полезной, не забывайте подписываться на наш Канал и группу в ВК. Всем гору печенек и удачи!

Лицензионное соглашение

Авторские права публикуемых материалов полностью или частично принадлежат авторам сайта Pechenek.NET в соответствии со статьями 1252 и 1301 ГК РФ. Любое распространение должно быть согласовано с автором материала или с указанием ссылки на первоисточник.