Как создать интернет-магазин на WooCommerce?

Выбираем готовый шаблон интернет-магазина

Перейдите в раздел «Внешний вид» — «Starter Templates». Сначала вас попросят выбрать конструктор страниц, при помощи которого вы потом будете работать с сайтом. Выберите Elementor.

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

На некоторых шаблонах в правом верхнем углу стоит значок Agency. Это значит, что шаблон доступен только в платной версии темы — Astra PRO. В платной версии темы больше возможностей, можно менять вообще что угодно. Но в бесплатной версии тоже достаточно инструментов, чтобы создать достойный интернет-магазин на движке WordPress.

В верхней части экрана слева от поиска поставьте переключатель на «Free», чтобы на экране отображались только бесплатные шаблоны. Как видите, вариантов достаточно и среди бесплатных.

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

Для этой инструкции понадобится шаблон «Brandstore». Найдите его по названию и откройте, а затем нажмите в правом нижнем углу кнопку «Import Complete Site», чтобы установить шаблон на наш сайт.

Появится всплывающее окно, в котором понадобится выбрать, что именно нужно импортировать: настройки, виджеты, плагины и содержимое. Оставьте галочки, как они стоят по умолчанию, и нажмите «Import».

Импорт может занять от двух до десяти минут. В это время не закрывайте вкладку. По окончании процесса появится сообщение «Imported Successfully!» и кнопка «View Site», чтобы вы сразу могли взглянуть на свой сайт.

После импорта всё готово к созданию интернет-магазина на WordPress. Начнём с управления товарами, а потом перейдём к внешнему виду сайта.

Если во время импорта возникает ошибка

Иногда импорт прерывается ошибкой с текстом «Your website is facing a temporary issue in connecting the template server. Read article to resolve the issue and continue importing template».

Чаще всего это случается из-за настроек PHP на хостинге. Попробуйте увеличить значение параметра max_execution_time — лично или при помощи поддержки провайдера.

Установка WordPress

Затем ее надо установить на локальный или удаленный хостинг и пройти легкий процесс установки.

Шаги установки WordPress

• Выбор языка (для более удобной работы необходимо выбрать русский):
• Информация о базе данных:
• Настройка базы данных:
• Общие настройки WordPress:

Оптимальные системные требования к хостингу для работы сайта на WordPress и WooCommerce:

• PHP 7 или выше;
• MySQL или MariaDB последних оф. версий;
• Модуль mod_rewrite Apache;
• Php Memory — 512 Mb+
• Поддержка CURL или fsockopen
• Поддержка Multibyte String
• CHMOD 777 wp-content/uploads
• upload_max_filesize = 4 Mb
• mySQL ‘max_allowed_packet’ = 2M

Минимальные системные требования:

• MySQL 5.6 и выше или MariaDB 10.0 и выше
• Php Memory — 128 Mb
• Поддержка CURL или fsockopen
• Поддержка Multibyte String
• Модуль mod_rewrite Apache

Читайте подробнее: Системные требования WordPress

Меняем дизайн сайта в Elementor

Зайдите на главную страницу вашего сайта и в панели быстрого доступа нажмите кнопку «Редактировать в Elementor».

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

Кроме синей рамки вы также увидите рамку из белой пунктирной линии — границы колонки, в которой находится элемент. В левом верхнем углу этой границы ещё будет значок колонки. Если кликнуть по нему правой кнопкой мыши, появится меню с основными действиями, которые можно совершить с колонкой. Так вы можете добавить ещё одну колонку или удалить лишнюю.

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

Теперь разберёмся с интерфейсом боковой панели. Что бы вы ни выбрали, конкретный элемент или отдельную секцию, в боковой панели будут три вкладки: «Макет», если выбрать секцию, или «Содержимое», если выбрать элемент внутри секции, а также «Стиль» и «Расширенные».

В целом, по названиям примерно понятно, какие настройки будут в каждом разделе. Проверьте, что есть на каждой вкладке. Любопытство поможет вам быстрее освоиться в интерфейсе и запомнить, где что находится. Если поменяете какие-то настройки и результат вас не устроит, всё всегда можно вернуть комбинацией клавиш Ctrl+Z.

Также в боковой панели есть две кнопки вверху: слева — три горизонтальных полоски, а справа — точки в форме квадрата. Кнопка слева открывает главное меню Elementor. В нём можно изменить глобальные настройки и выйти обратно в консоль WordPress.

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

Внизу панели находятся кнопки с основными функциями, которые понадобятся вам во время работы в конструкторе. Слева направо это: 1) базовые настройки страницы, 2) навигатор по секциям, 3) отменить предыдущее действие, 4) переключиться на режим просмотра с другого устройства, 5) просмотреть изменения без публикации.

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

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

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

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

Рекомендую всегда заполнять поле «Атрибут alt». Это текст, который появится на вашем сайте вместо изображения, если оно вдруг не загрузится. А ещё его используют программы, которые читают содержимое сайтов для людей с плохим зрением.

Просто опишите, что изображено на картинке. Если занимаетесь SEO продвижением, сюда можно вписать ключевые слова. После того как заполните, нажмите справа внизу кнопку «Вставить медиа».

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

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

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

Изменить фон поверх баннера вы можете в разделе «Перекрытие фона» на этой же вкладке. Сейчас вы работали в разделе «Фон», а ниже ещё есть несколько других разделов: «Перекрытие фона», «Граница», «Разделитель секции» и «Типографика».

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

Чтобы поменять текст на баннере, просто кликните по нему в правой части экрана и увидите сбоку поле, в которое можно вписать свой текст. Там же будут настройки размера и выравнивания текста. Цвет текста будет на вкладке «Стиль».

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

Настройки анимации текста будут в разделе «Эффекты движения». Можете убрать анимацию или наоборот добавить её для кнопок. Изначально этот эффект есть только у заголовка и подзаголовка.

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

Футер — это отдельная сущность, которой не будет в Elementor, когда вы будете редактировать страницы сайта. Чтобы отредактировать его, перейдите в консоли в раздел «Внешний вид» — «Настроить» — «Footer Builder».

Футер состоит из трёх зон, внутри которых расположены различные виджеты. В меню слева будет список всех этих виджетов, а под футером вы увидите макет с тремя зонами, на котором указано, где какой виджет расположен.

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

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

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

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

Предположим, вы решите добавить иконки соцсетей своего бизнеса вместо ссылок на приложения в четвёртой колонке центральной зоны. Для этого кликните по пустому месту в этой колонке и выберите элемент «Social», а элемент «Widget 4» удалите.

После этого в меню слева настройте элемент: на вкладке «General» выберите подходящие соцсети, добавьте ссылки на ваши аккаунты и установите выравнивание иконок, а на вкладке «Design» отрегулируйте отступы между иконками соцсетей и выберите подходящую цветовую гамму.

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

Шаг 6. Настройка внешнего вида вашего интернет-магазина на WooCommerce

Темы это то, как ваш сайт выглядят для пользователей. Для магазина Шаблон (тема) задаёт основные параметры вашего сайта, определяет то, как будет выглядеть ваш интернет-магазин. В зависимости от применения той или иной темы изменяется способ отображения предлагаемых товаров.

На данный момент существует несколько тысяч тем для WordPress. Они могут быть как платными, так и ничего не стоить для пользователя.

Если помните, в рамках данного руководства мы используем «Storefornt» для сайта. Теперь его необходимо оптимизировать в соответствии с текущими потребностями.

Не забывайте, что вы можете расширить функционал вашего интернет-магазина, создав свой WordPress плагин.

На этом пока все, надеемся вы поняли, что такое интернет-магазин на WordPress и как его создать.

Если у вас есть вопросы – спрашивайте в комментариях и мы обязательно вам ответим.

Настраиваем внешний вид URL-адресов

Откройте какую-нибудь категорию на вашем сайте и посмотрите, как выглядит ссылка в адресной строке браузера. Сначала будет идти ваш домен, потом product-category, а потом только ярлык категории. Вот этот кусочек product-category вы можете изменить.

Перейдите в консоли в раздел «Настройки» — «Постоянные ссылки». Как я и говорил, после добавления функционала интернет-магазина здесь стало больше опций. Появилось два новых раздела: «Дополнительно» и «Постоянные ссылки товаров».

В разделе «Дополнительно» как раз будут ярлыки категорий и меток. По умолчанию в этих полях длинные значения. При желании замените их на более компактные.

В разделе «Постоянные ссылки товаров» будет несколько вариантов структуры URL-адресов в вашем магазине. Если не хотите, чтобы в ссылке на странице товара в принципе отображался ярлык категории, выберите вариант «База магазина».

Также структура URL-адресов влияет на хлебные крошки, которые отображаются на странице товара над заголовком.

Контактная форма на странице с контактами сделана при помощи плагина «WP Forms». В консоли у него есть свой раздел в меню слева. Перейдите в него, наведите курсор на строку с единственной формой и нажмите «Изменить».

Откроется панель управления формами. Как и в консоли, слева в ней будет меню, а справа — рабочая зона.

В разделе «Настройки» есть несколько подразделов. В подразделе «Общие» можно изменить название формы, текст на кнопке «Отправить» и текст на этой же кнопке в момент отправки сообщения. А в подразделе «Уведомления» можно изменить адрес почты, на который придёт сообщение от клиента.

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

Установка важнейших плагинов

Все плагины устанавливаем по аналогу с WooCommerce со страницы установки плагинов, предварительно введя название плагина.

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

Подробнее о лучших настройках для SEO оптимизации вашего интернет-магазина вы можете прочитать в этой статье:

SEO-оптимизация WooCommerce: подробное руководство

WooCommerce SEO Addon

Предоставляет дополнительные возможности для SEO, которых нет в базовом Yoast SEO, такие как:

• Он отображает основную информацию о онлайн-магазине с помощью микро-разметки на главной странице.
• Он отображает информацию о ценах, наличии запаса и валюте в данных микро-разметки на странице продукта.
• Он отображает информацию о ценах, наличии запаса и валюте в данных Open Graph на странице продукта.
• Он автоматически генерирует alt текст для всех изображений продукта.
• Он отображает информацию о бренде в данных микро-разметки на странице продукта.

Подробнее: WooCommerce SEO Addon

WooCommerce Permalink Manager

Обязательный плагин, если вы переходите с другой платформы и хотите сохранить структуру URL, а также, если вы хотите забрать ненужный Slag с урл вашего магазина и сделать его более лаконичным и читабельным.
Подробнее: WooCommerce Permalink Manager

Обязательные плагины для аналитики вашего интернет-магазина и сбора комплексной статитстики:

• Google Analytics Dashboard for WP (GADWP);
• WooCommerce Google Analytics Integration.

Подробнее о настройке можно прочитать в нашем туториале: Настройка Google Analytics для WooCommerce

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

Дополнительные возможности

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

Premmerce Search

Данный плагин решает сразу две проблемы:

• Заменяет обычный WooCommerce поиск на Live Search;
• Ищет с учетом потенциально введенных ошибок пользователями.

Ознакомится подробнее: Premmerce Search – WooCommerce Product Search

Premmerce WooCommerce Product Filter

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

Ознакомится подробнее: Premmerce WooCommerce Product Filter

Premmerce WooCommerce Brands

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

Ознакомится подробнее: Premmerce WooCommerce Brands Free Plugin

WooCommerce Customers Manager

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

Ознакомится подробнее: Woocommerce Customers Manager

Premmerce User Roles

It’s one of the most popular banner and slider plugins in the WordPress plugins directory. It provides you with a possibility to create banners or sliders by simply adding them to your site using the shortcode.

Ознакомится подробнее: MetaSlider

Premmerce WooCommerce Wishlist

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

Ознакомится подробнее: Premmerce WooCommerce Wishlist

Premmerce WooCommerce Redirect Manager

Premmerce WooCommerce Redirect Manager позволяет вам создавать перенаправления 301 и 302 и настраивать автоматические переадресации для удаленных продуктов в магазине WooCommerce.

Ознакомится подробнее: Premmerce WooCommerce Redirect Manager

Premmerce WooCommerce Wholesale Pricing

Premmerce WooCommerce Wholesale Pricing — это плагин, который позволяет добавлять индивидуальные оптовые цены или другие типы цен в продукты WooCommerce для ролей любых клиентов.

Ознакомится подробнее: Premmerce WooCommerce Wholesale Pricing

Premmerce Woocommerce Product Bundles

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

Ознакомится подробнее: Premmerce Woocommerce Product Bundles

Работа с товарами и категориями

В данном разделе рассмотрим кратко основные аспекты работы с каталогом продуктов вашего интернет-магазина.

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

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

Делается это в следующем простом интерфейсе:

Подробнее о работе с категориями вы можете прочитать на странице документации: Managing Product Categories, Tags and Attributes

Создание атрибутов товаров

Атрибуты товаров нужны в первую очередь для того, чтобы использовать гибкую фильтрацию и поиск товаров по этим атрибутам. Также атрибуты товаров используются для создания Variable Product — это продукт, который содержит несколько вариантов цены — например, различные цвета или размеры.

Управление атрибутами товаров происходит в следующем интерфейсе:

Подробнее о работе с атрибутами вы можете прочитать на странице документации: Managing Product Categories, Tags and Attributes

Управление каталогом товаров

Весь каталог товаров размещен на одной странице в удобной таблице. В списке товаров можно сразу сделать несколько быстрых действий:

• Провести быстрый поиск товаров с помощью фильтра;
• Применить массовое редактирование товаров (изменить всем выбранным категорию или цену, например) или массово удалить товары;
• Также каждый товар в списке можно: быстро отредактировать, удалить, скопировать или посмотреть на сайте.

Добавление новых товаров

Добавление новых товаров происходит через достаточно простой интерфейс, в котором размещены все необходимые для качественного наполнения карточки товара поля:

Подробнее с процессом добавления товаров и различными доступными типами товаров вы можете ознакомиться на странице документации: Adding and Managing Products

Установка WooCommerce

Заходим в раздел Плагины и кликаем — Добавить новый. В поиске вводим WooCommerce и устанавливаем.

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

Шаг 2. Установка и оптимизация WooCommerce – бесплатного плагина для организации интернет-магазина

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

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

WooCommerce. Что это за зверь?

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

Рассматриваемый плагин представляет собой расширение для системы управления контентом WordPress, которая является одним из лидеров среди CMS (Content Managment System). WooCommerce позволяет наладить интернет-торговлю как с нуля, так и добавить функцию «Корзина» на уже существующий сайт.

Сравнение положительных и отрицательных сторон

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

Благодаря наличию открытого исходного кода расширение ничего не стоит для пользователя. Оно даёт абсолютную свободу и полноценный контроль над интерактивной торговой площадкой.

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

WooCommerce – расширение, созданное на базе WordPress. Это значит, что у вас в арсенале остаются все проверенные временем инструменты данной системы управления контентом.

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

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

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

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

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

В основной версии поддерживаются платёжные системы Stripe (не работает в России) и PayPal (не даёт возможность принимать платежи в РФ, начиная с 31 июня 2020 года). Но при желании вы можете организовать оплату товаров или услуг посредством других многочисленных платёжных сервисов. Например, с помощью решений от Яндекс, Тинькофф или Сбербанк. Да и у других банков есть шлюзы для работы с Woocommerce!

Далее мы подробно рассмотрим процедуру организации сетевого магазина с помощью плагина WooCommerce.

Начинаем установку

Собственно с этого этапа мы и начинаем создавать интернет-магазин на WordPress!

Установка плагина WooCommerce – Как создать интернет-магазин

После того как плагин будет успешно установлен и активирован откроется мастер автоматической настройки.

WooCommerce мастер настройки – Как создать интернет-магазин на WordPress

1-ый шаг настройки WooCommerce – Как создать интернет-магазин на WordPress

На втором шаге автоматической настройке вас спросят – В какой отрасли работает магазин?

• Мода, одежда и аксессуары
• Здоровье и красота
• Искусство, музыка и фотография
• Электроника и компьютеры
• Еда и напитки
• Дом, мебель и сад
• Другой

Выберите что-то одно и нажмите «Продолжить»

3-ый шаг настройки WooCommerce – Как создать интернет-магазин на WordPress

На 3-ем этапе вам предстоит выбрать типы товаров которые вы собираетесь продавать.

• Физические товары – Продукты, которые вы отправляете клиентам.
• Загрузки – Виртуальные товары, которые покупатели скачивают.
• Подписки – Платное дополнение, которое позволит вашим клиентам подписываются на ваши товары или услуги и оплачивают еженедельно, ежемесячно или ежегодно. Абонентка в общем. $ 199,00 в год.
• Тарифные планы – Платное дополнение, благодаря которому вы сможете предоставить пользователям вашего сайта доступ к ограниченному контенту или продуктам за дополнительную плату. $ 199,00 в год.
• Композитные товары – Платное дополнение для создание комплектов продуктов с различными настройками уже существующих продуктов. $ 79,00 в год.
• Бронирование – Позволяет клиентам записываться на приемы, делать заказы или арендовать оборудование, не покидая ваш сайт. $ 249,00 в год.

Нет нужды покупать какие либо дополнения прямо сейчас, давайте для начала выберем «Физические товары» и «Загрузки». После того, как нажмете «Продолжить» вы перейдете к 4 шагу, в котором вас попросят рассказать о вашем бизнесе чуть больше.

В первом выпадающем списке вам предстоит выбрать «Сколько продуктов вы собираетесь подорвать?» – Не на что не влияет, в вашем магазине могут быть десятки тысяч товаров.

Во втором выпадающем списке нужно ответить на вопрос «Продаете ли вы ваши товары где-то ещё?»

Затем WooCommerce предложит подключить еще 3 дополнительных и бесплатных модуля:

4-ый шаг настройки WooCommerce – Как создать интернет-магазин на WordPress

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

На пятом этапе вам будет предложено выбрать новый шаблон или продолжить использовать существующий. В рамках руководства «Как создать интернет-магазин на WordPress» мы выбрали заточенную под электронную торговлю тему «Storefornt» – что и вам советуем для начала. Помните, вы всегда сможете поменять тему для своего интернет-магазина без потери каких либо данных.

Бесплатная тема для WooCommerce – Как создать интернет-магазин на WordPress

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

WooCommerce и Jetpack – Как создать интернет-магазин на WordPress

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

WooCommerce успешно установлен и вас перебросит на главную страницу в разделе WooCommerce

WooCommece установлен – Как создать интернет-магазин на WordPress

Поздравляем еще раз. Все готово для добавления товаров в ваш новенький интернет-магазин на WordPress.

WooCommerce – Главный экран

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

WooCommerce главный экран

Входящие

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

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

Stats overview (Статистика)

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

Работаем со страницами

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

Удаляем лишние страницы

Через тире от названия страницы указана роль страницы, например «Страница корзины» или «Страница оформления заказа», а также название конструктора, если страницу собрали не в стандартном конструкторе WordPress. Например, Elementor.

Также в списке будут страницы, рядом с которыми нет ни названия конструктора, ни роли: «Sample Page», «Корзина», «Магазин», «Мой аккаунт» и «Оформление заказа». Это стандартные страницы WooCommerce, которые не используются нигде на сайте. Их можно смело удалить, ничего страшного не произойдёт.

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

Переименовываем страницы

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

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

Отдельный момент — нужно поменять название страницы не в консоли WordPress, а именно на самой странице. Например, если вы сейчас откроете страницу «Корзина» или «Оформление заказа», то увидите, что заголовки на них по-прежнему на английском. Хотя вы только что переименовали эти страницы.

Чтобы это изменить, нажмите в панели быстрого доступа «Редактировать в Elementor» и вручную поменяйте англоязычный заголовок на русскоязычный. После этого не забудьте нажать «Обновить» в боковой панели внизу.

Дальше таким же образом измените заголовки на страницах оформления заказа и аккаунта. Страница с оформлением заказа откроется в Elementor, только если в корзине на сайте будет лежать товар.

Создаём новую страницу в Elementor

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

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

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

Затем на вкладке «Макет» в боковом меню найдите строку «Высота», выберите в выпадающем списке значение «Мин. высота» и выберите, сколько пикселей должна занимать секция. По умолчанию будет 400 пикселей.

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

Когда закончите с баннером, добавьте ещё одну секцию и таким образом по кусочкам собирайте страницу. В конце нажмите в правом нижнем углу боковой панели кнопку «Опубликовать».

После этого остаётся только поменять стандартное название и ярлык страницы. Для этого нажмите в левом верхнем углу боковой панели на три полоски, а потом на кнопку «Выйти в консоль».

На следующем экране вы увидите, что у страницы шаблонное название в духе «Elementor #1457». Переименуйте страницу, а потом в боковой панели найдите и откройте раздел «Постоянная ссылка».

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

Создаём страницу с брендами

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

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

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

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

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

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

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

Добавьте элемент на страницу и увидите блок, где только одна строка. Скопируйте и вставьте в неё такой шорткод:

В этом шорткоде буквы pwb означают аббревиатуру плагина — Perfect WooCommerce Brands — буквы az означают алфавитный порядок, а слово listing означает «в виде списка». То есть вы, по сути, просто просите плагин с брендами вывести все свои бренды в алфавитном порядке.

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

Полезные материалы и статьи

По материалам статей:

Шаг 3. Выбор правильной темы WooCommerce или не просто красивый интернет-магазин на WordPress

Правильная тема – это субъективное решение. Хотя внешний вид и является одним из значимых факторов при выборе, но он не должен был определяющим. Далее мы приведем несколько советов, на которые вы должны опираться, делая окончательный выбор.

Эстетичность

Ищите не просто тему, которая «хорошо выглядит». Это должно быть уместно. Ferrari выглядит великолепно, но это не лучший выбор для поездки в магазины и обратно. ?

Если тема, которую вы выбрали, позиционируется автором как, «Для WooCommerce», обязательно проверьте все страницы WooCommerce. Не забывайте такие страницы, как раздел «Моя учетная запись», корзина и оформление заказа.

Частота и скорость обновлений

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

Для подтверждения совместимости темы с последней редакцией расширения WooCommerce можно осуществить экспресс-проверку. Посмотрите на «демо» и взгляните на исходный код (CTRL + U). Исходный код должен содержать запись, объявляющую о том, какая версия плагина активна. На экране это смотрится вот так:

Убедитесь, что в демоверсия темы использует текущая версия WooCommerce.

Текущую версию WooCommerce можно посмотреть на официальной странице плагины в репозитории WordPress.org

Поддержка

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

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

Расширенная функциональность

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

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

Адаптивный дизайн

Так называемую «адаптивность» темы стоит проверять в последнюю очередь, так как в 2020 году это уже норма. Этот термин означает полную совместимость со всеми устройствами. Например, как с планшетными компьютерами, так и со смартфонами.

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

Подключаем доставку

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

Перейдите в раздел «Плагины» — «Добавить новый», найдите и установите плагин «WC Nova Poshta Shipping».

После установки в боковом меню появится новый раздел — «WC Ukr Shipping». В нём вы найдёте ссылки на полезные материалы в самом верху, а чуть ниже — две вкладки: «Общие» и «Переводы».

На вкладке «Общие» будут все основные настройки плагина. Главное поле здесь — «API ключ». Это что-то вроде пароля, который связывает ваш аккаунт на сайте Новой почты с магазином. Без этого ключа ничего работать не будет.

Ключ можно найти в личном кабинете на сайте Новой Почты. Войдите в аккаунт, перейдите в боковом меню в раздел «Налаштування», а в нём откройте вкладку «Безпека». Ключи API будут сразу наверху. Если заходите сюда впервые, ключ придётся создать с нуля.

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

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

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

Когда закончите менять настройки, нажмите в правом верхнем углу «Сохранить». Остаётся только создать способ доставки в настройках WooCommerce. Для этого перейдите в раздел «WooCommerce» — «Настройки», выберите вверху вкладку «Доставка» и нажмите кнопку «Добавить зону доставки».

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

Для начала пусть будет зона для Украины. В поле «Название зоны» впишите «Украина», а в поле «Зоны» выберите Украину из выпадающего списка. После этого в блоке «Методы доставки» нажмите кнопку «Добавить метод доставки».

Во всплывающем окне будет выпадающий список с доступными способами доставки. Выберите Новую почту и нажмите «Добавить метод доставки».

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

В этом разделе только одно поле, в котором уже будет некоторый текст. Отступите от этого текста одну пустую строку и добавьте такой кусок кода:

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

Сначала будут поля с контактными данными, а ниже — поля для выбора отделения Новой почты. Если выберите способ доставки «Самовывоз», то увидите, что поля с контактными данными не исчезают. Хотя такой способ доставки по идее предполагает, что человек не должен оставлять свой адрес.

К счастью, эти поля можно убрать. Для этого установите плагин «Checkout Field Editor for WooCommerce». С его помощью вы сможете вручную выбрать поля, которые нужно скрыть со страницы оформления заказа.

После активации плагина перейдите в раздел «WooCommerce» — «Checkout form». Этот подраздел добавился вместе с плагином. В нём вы увидите все поля, которые присутствуют на странице заказа.

Отметьте все лишние поля галочками: «Название компании», «Адрес», «Населённый пункт», «Область/район», «Почтовый индекс». Обязательно оставьте поле «Страна/регион». Если его скрыть, посетители не смогут оформить заказ. Похоже, что это обязательное поле в WooCommerce. Без него в момент оформления выскакивает сообщение, что нужно выбрать страну.

После того как отметите лишние поля, нажмите вверху кнопку «Disable». Таким образом вы не удалите поля, а просто отключите их. Вдруг что, можно будет легко вернуть их назад. В конце нажмите «Save changes» в правом верхнем углу таблицы, затем обновите вкладку с сайтом и проверьте, всё ли сработало.

Преимущества и недостатки создания сайтов и интернет-магазинов на CMS или конструкторах

Самое важное, что нужно сделать, это правильно выбрать платформу для вашего будущего магазина. Хотелось бы обратить ваше внимание на две самые лучшие системы управления контентом, адаптированные для сетевой торговли. Это Shopify или WordPress + WooCommerce.

Shopify представляет собой платную платформу для виртуальной торговли. Пользователям доступны тарифы стоимостью от 29 долларов США в месяц. Использование данное CMS – это неплохое решение. Но финансовая сторона дела сводит к минимуму многочисленные достоинства платформы. Цена использования постоянно увеличивается, постоянно необходимо вносить внеплановые сборы. К тому же вы должны хорошо знать английский язык ?

Именно поэтому большая часть начинающих бизнесменов предпочитает комплекс WordPress + WooCommerce. Такая комбинация обеспечивает максимальную гибкость при предельной экономии финансовых ресурсов. Конечно, требуется небольшая настройка как самой CMS, так и плагина. Но это того стоит!

Данное руководство познакомит вас с нюансами настройки торговой площадки на базе WordPress с использованием расширения WooCommerce.

Для создания и оптимизации своего интернет-магазина, как уже указывалось выше, вам потребуются домен, хостинг и SSL-сертификат.

Домен – это имя вашего сайта, его адрес в глобальной сети. Необходимо выбрать благозвучное наименование. Например, yandex.ru или wordpresslab.ru.

Хостинг – это физическое место для хранения всех файлов вашего сайта. Это и есть те самые сервера, которые обслуживаются бородатыми дядьками, о которых вы, наверняка, не раз и не два слышали.

SSL-сертификат – представляет собой цифровую подпись вашего сайта. Она обеспечивает должный уровень защищённости соединения между самим сайтом и его пользователем. Сертификат позволяет получать конфиденциальные данные. В частности, если мы говорим про интернет-магазин, то SSL позволяет принимать реквизиты банковских карт покупателей. Без сертификата организовать торговлю в сети не получится!

REG.RU – Тут можно приобрести домен, хостинг и получить SSL сертификат на год в качестве бонуса

Наш совет при выборе хостинг провайдера и регистратора доменных имен однозначен!

1 Выбираем доменное имя и хостинг

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

Регистрация доменного имения – Как создать интернет-магазин на WordPress

Затем, к выбранному домену добавить услугу хостинга.

Вот вам действующий купон на 5% скидку –

Регистрация хостинга и SSL – Как создать интернет-магазин на WordPress

2 Установка WordPress на наш сервер

Выполнить автоматическую установку WordPress или установить вручную.

🎉 Поздравляем!Вы создали свой сайт и ваш интернет-магазин на WordPress готов к дальшей настройке.

Внимание!

Пред тем как двигаться дальше вы должны обладать следующими навыками работы с WordPress:

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

Советуем ознакомиться с базовым курсом по созданию сайтов на WordPress прежде чем продолжить создавать интернет-магазин.