Storefront Theme: как установить и настроить

Опубликовано: 2018-01-12

Storefront — одна из самых гибких и расширяемых тем для запуска магазина WooCommerce с использованием WordPress.

Благодаря своей чистой архитектуре кода он стал чрезвычайно популярным среди пользователей, и в настоящее время более 100 000 интернет-магазинов используют Storefront в качестве своей темы WordPress.

Установка темы WooCommerce Storefront

Есть два способа установить тему Storefront: либо путем поиска темы на панели управления WP, либо путем загрузки темы вручную.

Установка с помощью панели управления WordPress

Самый быстрый способ установить Storefront — через панель управления WordPress. Выполните следующие действия, чтобы установить Storefront через панель управления WordPress.

  1. Перейдите в раздел « Внешний вид» > «Темы» > «Добавить новый».
  2. Введите « storefront » в поле поиска и нажмите Enter.
  3. Наведите курсор на скриншот витрины.
  4. Выберите кнопку « Установить ».
  5. Нажмите Активировать

Установка витрины вручную

  1. Загрузите последнюю версию Storefront с сайта wordpress.org.
  2. Перейдите в раздел « Внешний вид» > «Темы» > «Добавить новый».
  3. Нажмите «Загрузить тему» ​​и выберите ранее загруженный zip-файл.
  4. Нажмите «Установить сейчас».
  5. Нажмите Активировать

Настройка домашней страницы

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

В шаблоне домашней страницы Storefront по умолчанию есть 6 разделов. Но вы можете добавить или удалить раздел в зависимости от ваших потребностей.

Разделы главной страницы по умолчанию:

  • Содержание страницы
  • категории товаров
  • Последние продукты
  • Рекомендуемые продукты
  • Популярные продукты
  • Товары со скидкой
  • Самые продаваемые продукты

Назначение шаблона домашней страницы

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

  1. Перейдите в Панель управления -> Страницы и создайте страницу под названием « Главная » или как угодно.
  2. Добавьте любой понравившийся приветственный контент, который будет отображаться над товарами.
  3. С правой стороны вы найдете поле под названием « Атрибуты страницы ».
  4. Выберите « Домашняя страница » в раскрывающемся списке « Шаблон ».
  5. Нажмите « Опубликовать » или « Обновить », чтобы сохранить изменения.

Отображение шаблона домашней страницы

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

  1. Перейдите в « Панель управления» > «Настройки» > «Чтение».
  2. В разделе «Ваша домашняя страница» выберите «Статическая страница» (выберите ниже).
  3. Выберите страницу назначения предыдущего шаблона домашней страницы в раскрывающемся списке Домашняя страница .
  4. Нажмите Сохранить изменения

Переупорядочить разделы главной страницы витрины магазина

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

  1. Скачать и установить управление домашней страницей
  2. Перейдите в « Внешний вид» -> «Настроить» -> «Управление домашней страницей».
  3. Перетащите и измените порядок разделов в соответствии с вашими потребностями.
  4. Нажмите « Сохранить и опубликовать », чтобы сохранить изменения.

Настройка меню навигации

В теме Storefront вы можете отображать меню в 3 местах.

  1. Основное меню — появляется сразу под логотипом сайта.
  2. Дополнительное меню — рядом с логотипом рядом с окном поиска.
  3. Handheld Menu – Меню для мобильных устройств.

Настройка меню

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

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

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

Назначение меню

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

Добавление категорий продуктов в ваше меню

  1. Перейдите в панель администратора, затем « Внешний вид»> «Меню».
  2. Нажмите «Параметры экрана » в левом верхнем углу и проверьте « Категории продуктов».
  3. Теперь на левой панели появится вкладка «Категории продуктов».
  4. Нажмите на вкладку «Категории продуктов», чтобы развернуть, выберите категории
  5. После выбора нажмите кнопку « Добавить в меню ».
  6. Перетащите элемент меню, чтобы изменить их расположение по своему вкусу.
  7. Нажмите на меню Сохранить

Настройки виджета

Витрина магазина позволяет отображать шесть областей виджетов в 3 разных областях.

  1. Боковая панель — слева или справа от основного контента сайта,
  2. Под заголовком — сразу под заголовком сайта и над содержимым.
  3. Столбец нижнего колонтитула 1 — Область нижнего колонтитула
  4. Столбец нижнего колонтитула 2 — Область нижнего колонтитула
  5. Столбец нижнего колонтитула 3 — Область нижнего колонтитула
  6. Столбец нижнего колонтитула 4 — Область нижнего колонтитула

Настройка WooCommerce

Установка WooCommerce

  1. Перейдите в « Панель управления» > «Плагины» > «Добавить новый » > «Поиск плагинов».
  2. Найдите «WooCommerce».
  3. Нажмите «Установить сейчас» .
  4. Нажмите «Активировать ».

Настройка WooCommerce

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

  • Настройка страницы — автоматически настраивает основные страницы (Магазин, Корзина, Оформление заказа, Моя учетная запись).
  • Местоположение магазина — настройка местоположения магазина, валюты и налога с продаж
  • Доставка — Настройка единицы веса и единицы измерения
  • Платежи — Настройка платежного шлюза.
  • Тема — установите тему, совместимую с WooCommerce.
  • Готово — (необязательно) разрешить WooCommerce собирать информацию об использовании.

Вы можете использовать все эти настройки в любое время на панели инструментов WooCommerce.

Добавить товар в WooCommerce

  1. Перейти к панели управления WordPress
  2. Нажмите «Продукты» > «Добавить новый».
  3. Напишите название или название вашего продукта в поле Название продукта .
  4. Напишите описание вашего продукта в редакторе ниже.
  5. Теперь вам нужно загрузить одно избранное изображение вашего продукта и дополнительное изображение в галерею продуктов.
  6. Справа вы найдете поле под названием «Изображение продукта и галерея продуктов».
  7. Загрузите избранное изображение в изображение продукта и дополнительные изображения в галерею продукта.
  8. Нажмите «Опубликовать ».

Настройка цены и атрибута продукта

Чтобы установить цену продукта, перейдите в раздел «Панель управления» > «Продукты» и выберите любой продукт. Затем прокрутите вниз до раздела «Данные о продукте». Вот краткое описание всех настроек раздела данных о товаре:

Тип продукта

  • Простой продукт : Простой отдельный продукт.
  • Сгруппированный продукт : продукт, являющийся частью коллекции.
  • Внешний/партнерский продукт : продукт, который указан в вашем магазине, но фактический продукт продается в другом месте.
  • Переменный продукт : продукт с вариациями (размер, цвет).
  • Виртуальный товар : товар, который не требует доставки.
  • Загружаемый продукт : продукт, для которого необходимо предоставить загружаемый файл.

Общий

  • Обычная цена : Обычная цена продукта.
  • Цена продажи: Цена продукта со скидкой.

Инвентарь

  • SKU : единица складского учета (SKU) отслеживает продукты.
  • Управление запасами : включить управление запасами
  • Состояние на складе : есть ли товар в наличии или нет в наличии.
  • Продается поштучно : может быть продан в одном заказе.

Перевозки

  • Вес: Вес продукта.
  • Размеры: Длина, ширина и высота изделия.
  • Класс доставки: сгруппируйте товары аналогичного типа для определенного способа доставки.

Связанные продукты

  • Допродажи : показ сопутствующих товаров под страницей сведений о продукте.
  • Перекрестные продажи : отображение сопутствующих товаров на странице корзины.
  • Атрибуты : выберите глобальный атрибут вашего продукта.

Передовой

  • Примечание о покупке : Примечание для отправки клиенту после завершения покупки.
  • Порядок меню : Заказная позиция для этого продукта.
  • Включить обзоры : включить или отключить обзоры продуктов.

Настройка витрины

Как добавить логотип

Выполните следующие действия, чтобы добавить и отобразить логотип на своем веб-сайте:
1. Перейдите в панель администрирования WordPress, затем выберите «Внешний вид» > «Настроить».
2. Затем перейдите в раздел «Идентификация сайта» > «Логотип».
3. Нажмите «Выбрать логотип», чтобы загрузить изображение логотипа. (Рекомендуемый размер изображения: 470 x 110 пикселей)
4. Нажмите Опубликовать.

Куда загрузить фавикон сайта

Выполните следующие действия, чтобы добавить и отобразить фавиконку на своем веб-сайте:
1. Перейдите в панель администрирования WordPress, затем выберите «Внешний вид» > «Настроить».
2. Затем перейдите в раздел «Идентификация сайта» > «Значок сайта».
3. Нажмите «Выбрать изображение», чтобы загрузить изображение логотипа. (Рекомендуемый размер изображения: 512 x 512 пикселей)
4. Нажмите Опубликовать.

Как изменить макет поста или блога

  1. Перейдите в раздел « Внешний вид» > «Настроить» > «Настройщик блога» > «Архивы сообщений».
  2. Выберите макет из макета почтового архива
  3. Нажмите Опубликовать

Как изменить пост-архив или колонку блога

  1. Перейдите в раздел « Внешний вид» > «Настроить» > «Настройщик блога» > «Архивы сообщений».
  2. Выберите номер столбца (полная ширина, 2 столбца, 3 столбца и 4 столбца) из столбца пост-архива
  3. Нажмите Опубликовать

Как изменить макет отдельной публикации или статьи

  1. Перейдите в раздел « Внешний вид» > «Настроить» > «Настройщик блога» > «Одно сообщение».
  2. Выберите макет из макета одиночного поста
  3. Нажмите Опубликовать

Как изменить шрифт

  1. Перейдите в « Внешний вид» > «Настроить» > «Общие стили» > «Типографика».
  2. Выберите шрифт из пары шрифтов
  3. Нажмите Опубликовать

Настройка WooCommerce

Как изменить макет страницы магазина

  1. Перейдите в раздел « Внешний вид» > «Настроить» > «WooCommerce» > «Страница магазина» — «Списки продуктов».
  2. Выберите макет из макета архива продуктов
  3. Нажмите Опубликовать

Как изменить макет страницы сведений о продукте

  1. Перейдите в раздел « Внешний вид» > «Настроить» > «WooCommerce» > «Страница магазина» — «Списки продуктов».
  2. Выберите макет из макета архива продуктов
  3. Нажмите Опубликовать