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

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

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

Поэтому разрабатывать интернет-магазин совсем с нуля долго, дорого и сложно, а часто и вовсе не нужно — коробочные решения позволяют создать такой сайт гораздо быстрее и практически бесплатно (но не совсем). В этой статье рассказываем, как создать интернет-магазин на базе WordPress + WooCommerce.

Что нужно, чтобы создать интернет-магазин на WordPress?

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

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

Деньги

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

1. Хостинг + домен (обязательно)

Сколько: от 1500 руб. в год

Зачем:
Хостинг — это пространство на сервере, которое вы арендуете у хостинг-провайдера для того, чтобы ваш сайт отображался в интернете. Проще говоря, это включенный 24/7 компьютер, который показывает ваш сайт всем желающим на него зайти.

Домен — это буквенный адрес вашего сайта, например, seoforge.ru или лучшиймагазин.рф.

1. SSL-сертификат (обязательно)

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

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

1. Бюджет на наполнение (не обязательно)

Сколько: 50-500 руб. за товар

Зачем:
Если у ваших поставщиков есть готовые прайсы, которые можно импортировать (например, в формате XML), наполнить сайт товарами можно будет за считанные секунды. Но если вы создаете интернет-магазин в узкой нише, то вероятность того, что поставщик предоставит такие прайсы, снижается — наполнять магазин придется вручную.

Это легко сделать самостоятельно, но и довольно долго, особенно если ассортимент магазина переваливает хотя бы за 500 позиций. Проще в этом случае заплатить человеку, который наполнит сайт за вас. Цена зависит от сложности работы — например, нужно ли переносить характеристики, создавать уникальные описания, в каком виде подан исходный материал и так далее.

1. Бюджет на доработки, интеграции, платные модули

Сколько: индивидуально

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

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

Время

1. Настройка WordPress и WooCommerce

Сколько: от 1 дня до 1 недели

Зачем:
Сама установка занимает около часа, если не меньше — с оплатой хостинга, домена, настройкой SSL и прочим. Но понадобится настроить и другие вещи — например, подключить Google Analytics и Яндекс.Метрику, подтвердить сайт в инструментах для вебмастеров, настроить условия оплаты и доставки, подключить дополнительные модули и так далее. 

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

1. Наполнить сайт

Сколько: от 2 дней до 2 месяцев

Зачем:
Чтобы покупатели могли оставить заказ, на сайте должны быть товары. Кроме этого, вам понадобится как минимум наполнить главную страницу, «О нас», «Доставка и оплата», «Условия обмена и возврата», политику обработки персональных данных и так далее — на сайте должна размещаться вся информация, которая может понадобиться клиенту перед оформлением заказа.

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

1. Настроить тему (дизайн)

Сколько: от 1 дня до 1 недели

Зачем:
Как и в случае с самим WordPress и WooCommerce, установить красивую тему — дело считанных секунд. Но чтобы настроить ее под конкретные нужды, понадобится некоторое время — например, изменить цвет, включить или отключить отображение блоков, плашек и прочих декоративных элементов. 

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

1. Протестировать все функции

Сколько: 1-3 дня

Зачем:
Проверить, что все работает нормально — обязательный пункт перед запуском. Да, из коробки все и так будет работать верно, но лишняя проверка не помешает. Особенно если вы установили дополнительные модули и плагины — иногда они могут конфликтовать, и это приведет к непредсказуемым результатам.

Лучше семь раз отмерить прежде, чем запускать интернет-магазин в свободное плавание — так вы будете уверены, что покупатели точно смогут оставить заказ.

Запускаем интернет-магазин!

С теорией покончено, переходим к самому интересному — как настроить и запустить интернет-магазин на WordPress.

Шаг 1. Купить домен + хостинг 

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

Например, для интернет-магазина на 50-100 позиций можно смело выбирать наименьший тариф на 1 Гб (обращайте внимание на то, сколько гигабайт в тарифе предлагает ваш хостинг-провайдер). С ассортиментом от 5000-10000 товаров, если у каждой позиции будет в среднем по 5 фотографий, даже со сжатием картинок без потерь понадобится не меньше 5 Гб.

Домен многие хостеры, в том числе и SpaceWeb, дают в подарок к хостингу, но вы можете приобрести его и самостоятельно. Например, в доменных зонах .ru и .рф адрес обойдется в среднем в 180-200 рублей в год.

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

Шаг 2. Установка SSL

Теперь, чтобы защитить данные пользователей, понадобится установить SSL-сертификат. Рассмотрим установку на примере бесплатного сертификата Let’s Encrypt. 

Почти все российские хостинг-провайдеры могут зарегистрировать его сами через панель управления. В панели хостинга SpaceWeb этот пункт находится в меню SSL ⟶ Установить ⟶ Let’s Encrypt.

Выберите домен, к которому хотите подключить сертификат. Если вы планируете создавать поддомены для сайта (например, интернет-магазин для всей России находится на адресе mysite.ru, а для Москвы — на msk.mysite.ru, в таком случае msk.mysite.ru — это поддомены), отметьте галочку Wildcard-сертификат, чтобы защитить домен вместе с поддоменами.

После того, как сертификационный центр одобрит выпуск SSL-сертификата, в панели управления вы увидите его статус, а сайт станет доступен по адресу https://mysite.ru.

Шаг 3. Установить WordPress

Многие российские веб-хостеры могут сделать это за вас — достаточно найти в панели управления пункт CMS и выбрать установку WordPress.

Хостинг проведет вас по этапам установки и сообщит данные для входа в панель управления WordPress. 

Можно установить WordPress и вручную — это очень просто. Зайдите на сайт WordPress и нажмите на кнопку «Получить WordPress» в верхнем правом углу.

После этого нажмите «Скачать WordPress».

В панели управления хостингом откройте файловый менеджер и нажмите кнопку «Загрузить», а затем найдите скачанный архив wordpress.zip и загрузите его на хостинг.

Когда загрузка закончится, останется только распаковать архив на хостинге:

Теперь WordPress будет доступен по адресу [ваш домен]/wordpress. Чтобы сделать доступ напрямую, по адресу вашего домена без подпапок, перейдите в папку wordpress и переместите все файлы из нее в папку public_html. Готово! WordPress установлен.

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

И последний шаг — откройте свой сайт в браузере, чтобы запустить установку WordPress.

Заполните информацию о базе данных — понадобится название БД, логин, пароль и сервер базы данных.

Назовите сайт и введите свой e-mail. Пароль лучше оставить сложным, чтобы злоумышленники не смогли взломать сайт. После этого нажмите на кнопку «Установить WordPress».

WordPress готов к работе.

Шаг 4. Установка WooCommerce 

В панели управления WordPress перейдите в меню Плагины ⟶ Добавить плагины и введите в поиск WooCommerce.

После того, как плагин установится, нажмите «Активировать».

Это запустит мастер установки WooCoomerce. Вам нужно будет ответить на несколько вопросов о магазине: адрес, сфера, какие товары вы собираетесь продавать, сколько их будет и хотите ли вы подключить плагины для продаж через Facebook, Google Merchant Center и email-рассылки. 

• 
• 
• 
• 

После ответа на все вопросы WooCommerce предложит установить подходящую тему для интернет-магазина.

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

Шаг 5. Установить темы для WooCommerce

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

Bono

Продуманная и красивая тема со сдержанной анимацией и чистым дизайном. Отличается очень приятной версткой и высокой скоростью загрузки (не забывайте оптимизировать изображения). Подойдет для любого интернет-магазина. Тема раскроется в полную силу, если вы будете использовать фото товаров на белом фоне.

• 
• 
• 

Merchandiser

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

• 
• 
• 

Simply Natural от Astra

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

• 
• 
• 

Home v16 от Sober

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

• 
• 
• 

Как установить тему?

Перейдите в меню Внешний вид ⟶ Темы в панели управления WordPress и введите в поиск название темы, которую хотите установить — например, Astra. Если вы хотите посмотреть список всех подходящих тем для интернет-магазина, в поиск можно ввести WooCommerce. Наведите курсор на понравившуюся тему и нажмите «Установить», а затем «Активировать».

Если у вас уже есть скачанная тема, ее можно установить, нажав на кнопку «Загрузить тему» сверху. Найдите архив на компьютере и нажмите «Установить».

После установки WordPress предложит посмотреть или активировать тему. Нажмите «Активировать».

Шаг 6. Установить плагины

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

Clearfy Pro

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

Yoast SEO

Мощный плагин для управления SEO помогает оптимизировать сайт для поисковых систем. С его помощью вы сразу увидите, как будет выглядеть ваш сайт в поисковой выдаче, получите подсказки по метатегам, сможете редактировать htaccess и robots.txt и многое другое. Недостающие настройки SEO в WordPress — все в этом плагине.

iThemes Security

Этот плагин отвечает за безопасность сайта — поможет защитить его от злоумышленников и предупредит, если что-то идет не так. iThemes умеет создавать бэкапы, блокировать пользователей и даже настраивать график доступа в административную панель. Рекомендуем установить сразу же — потом может быть поздно.

TinyPNG

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

Yml для Yandex Market

Еще один маст-хэв для электронной торговли в России — экспорт фида товаров для Яндекс.Маркета. С помощью этого плагина вы можете задать частоту обновления фида, чтобы не обнаружить внезапный бан от Маркета за несвоевременное обновление цены, настроить, какие данные вы хотите передавать на площадку и исключить из фида товары, которые не проходят по требованиям.

Примеры интернет-магазинов на WooCommerce

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

• 
• 
• 
• 
• 
• 
• 
• 

Резюме

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

Порядок запуска: оплатите домен и хостинг, установите SSL-сертификат, установите WordPress, WooCommerce, тему для WooCommerce, недостающие плагины и наполняйте сайт.

Хорошие темы для WooCommerce: Bono, Merchandiser, Astra (Simply Natural), Sober (Home v16).

Полезные плагины для интернет-магазина: Clearfy, Yoast SEO, iThemes Security, TinyPNG, Yml для Yandex Market.

Желаем удачи с запуском!

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

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

Гайд подходит для новичков, и если вы уже работали с WordPress, тоже найдёте полезные советы для себя.

Пошаговый гайд: создание интернет-магазина на WordPress и WooCommerce в 2023 году

Инструментарий

Для начала давайте посмотрим что нам понадобится.

Вот какие инструменты я использовал:

CMS WordPress

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

Преимущества:

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

Плагин WooCommerce

WooCommerce — самый популярный плагин для магазина на Вордпресс. На сегодня активных установок плагина более 5 миллионов.

Премиум шаблон Bono от WpShop

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

Хостинг и домен

Timeweb — регистратор хостинга и домена. Чтобы мы могли разместить любой сайт в интернете нам нужен хостинг и доменное имя.

Хостинг, домен, SSL-сертификат

Разработка начинается с регистрации хостинга и домена, ещё я всем рекомендую сразу установить SSL-сертификат, чтобы сайт открывался по безопасному протоколу https.

Гайд + видеоуроки

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

Хостинг я рекомендую Timeweb. Домен регистрируйте любой на своё усмотрение, проверить на занятость и купить его можно также у Timeweb.

Сертификат SSL можно для начала поставить бесплатный, который называется Let’s Encrypt, он устанавливается также через админку хостинга Timeweb и потом самостоятельно обновляется каждые 3 месяца, установили и забыли.

Важно!

После установки SSL-сертификата подождите примерно 1 час, чтобы он был выпущен и установлен на домене.

И если в качестве хостинга вы выбрали Timeweb, то перейдите в Сайты — напротив домена нажмите шестерёнку — включите опцию «Использовать безопасное соединение https://» и «Использовать соединение HTTP/2 для доп IP-адреса», чтобы происходило перенаправление с http на https.

Если у вас другой хостинг, то спросите у службы поддержки как сделать правильное перенаправление с http на https.

Установка CMS WordPress

Движок Вордпресс я устанавливаю вручную:

• сначала создаём базу данных MySQL
• скачиваем WordPress с официального сайта wordpress.org
• редактируем файл wp-config.php
• закачиваем архив с WordPress на хостинг
• распаковываем и запускаем установку

Подробная инструкция есть в этой же статье про хостинг. И также прикреплю здесь видеоинструкцию для наглядности.

Видео с курса «Идеальный сайт на WordPress». Получить первые 10 уроков бесплатно можете подписавшись на рассылку.

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

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

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

Выбор шаблона

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

Где взять шаблон? Есть бесплатные и платные варианты.

Бесплатные шаблоны

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

Минусы бесплатных шаблонов:

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

Если вы всё же хотите начать с бесплатного шаблона, то скачивайте его исключительно с официального сайта ru.wordpress.org/themes или с сайтов, которым точно доверяете. Если будете скачивать с левых сайтов в интернете, в 95% случаев вместе с шаблоном получите кучу вирусов.

Платные шаблоны

Плюсы платных шаблонов:

• широкий выбор на любую тематику, дизайн, цветовую схему и пр.;
• актуальные шаблоны, с продуманным юзабилити и использованием современных решений дизайна и вёрстки;
• 95% всех настроек делаете через админку, не нужно уметь программировать;
• частые обновления от разработчиков, что усиливает безопасность магазина.

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

Где выбрать и купить платный шаблон?

ThemeForest.net — крупнейший магазин шаблонов в мире.

Только в категории eCommerce (электронная коммерция) 1300+ вариантов шаблонов и у многих внутри шаблона ещё есть целый список демо на разные тематики, в общем выбор огромный.

У меня есть подборка Топ 40 шаблонов для интернет-магазина, можете там подобрать вариант для себя.

Есть ещё отдельные веб-студии, которые не представлены на больших площадках, но которые делают крутые шаблоны. Лидером в СНГ сегменте является студия WPshop.ru, у которой на выбор всего 6, но очень популярных шаблонов.

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

О шаблоне Bono

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

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

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

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

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

Шаблон стоит 3800 р. для одного домена и 7800 р. неограниченная версия.

Ссылка на официальный сайт шаблона и на демо.

Отдельный обзор Bono можете посмотреть по этой ссылке.

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

Я буду работать на шаблоне Bono и покажу все настройки темы в этой статье.

Установка шаблона Bono

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

Заходим в личный кабинет сайта, с помощью логина и пароля, который мы придумали при установке WordPress, затем переходим Внешний вид — Темы — Добавить — Загрузить тему — и выбираем скачанный архив с темой.

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

Инструкция к шаблону

У всех премиум шаблонов есть документация и Bono не исключение. Ссылка на документацию приходит обычно в письме с шаблоном. У WPshop ссылку на документацию можно найти в подвале сайта. Вот прямая ссылка на страницу с документацией Bono https://support.wpshop.ru/docs/themes/bono/

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

Дальше у нас есть на выбор два варианта:

1. Делаем сразу чистовой сайт со своими товарами, текстами и картинками.
2. Или устанавливаем готовые демо-данные (тестовый магазин) и редактируем под себя.

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

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

Установка плагина WooCommerce

Перед установкой демо-данных давайте установим WooCommerce — плагин, который добавит функционал интернет-магазина.

Переходим в Плагины — Добавить новый — в поиске пишем название WooCommerce, устанавливаем и активируем официальную версию (более 5 млн установок).

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

Установка демо-данных

Ссылка на инструкцию по установке демо-контента https://support.wpshop.ru/docs/themes/bono/install/ (опуститесь ниже в раздел Демо-контент)

После установки обновите сайт и контент появится.

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

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

Типы контента у интернет-магазина

Давайте расскажу какие типы контента вы сможете размещать на сайте.

Страницы

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

Обязательные

Должны быть у каждого магазина, они создаются автоматически при установке WooCommerce:

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

Второстепенные

Страницы, которые вы уже создаёте самостоятельно. Список наиболее популярных:

• О магазине — информация о вашем магазине, почему покупатели должны выбрать именно вас.
• Акции — страница с текущими акциями магазина, которые для удобства можно собрать на одной странице.
• Как сделать заказ — пошаговая инструкция для тех, кто впервые делает заказ на вашем сайте.
• Оплата и доставка — детали по оплате и доставке товара.
• Обмен и возврат — правила возврата или обмена товара.
• Контакты — вся контактная информация.

Статьи

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

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

Товары

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

Карточка товара

Давайте посмотрим из каких элементов состоит карточка товара.

1. Название товара — в качестве названия используйте главное ключевое слово, также является заголовком товара.
2. Описание товара — здесь обычно пишется полное описание товара, которое располагается в нижней части карточки товара.
3. Краткое описание товара (отрывок) — буквально 2-4 предложения о товаре, самое важное.
4. Категория — выбираем нужную категорию для товара.
5. Метки — с помощью меток можно дополнительно группировать товары, это удобно когда у вас большой каталог.
6. Главное изображение — превью для товара, картинка, которая будет отображаться в каталоге.
7. Галерея фото — дополнительные фотографии товара.
8. Данные товара — дополнительные настройки каждого товара, давайте разберём детальнее.

Данные товара

Тип товара

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

Путь настроек: Товары — выберите любой товар или создайте новый.

Простой товар — чаще всего выбирают этот вариант, это просто товар без дополнительных правил.

Дополнительно у этого типа товара можно выбрать две галочки: Виртуальный и Скачиваемый. Эти настройки актуальны, если вы продаёте виртуальные товары, например, онлайн-курсы, пресеты для ретуши, шаблоны и пр.

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

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

Внешний/Партнёрский товар — такой тип товара следует выбрать, если вы хотите чтобы кнопка «Купить» вела на другой сайт. Чаще используют, когда ставят партнёрские ссылки на товар, например, перелинковка на сайт AliExpress.

Вариативный товар — такой тип товара полезен, когда цена изменяется в зависимости от выбранной характеристики. Например, конечная цена зависит от цвета лампы или цена на айфон зависит от размера встроенной памяти (128, 256 или 512 гб).

Вкладки с настройками

Основные

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

В партнёрском товаре указываем ссылку, куда будет вести кнопка и название этой кнопки.

Запасы

Заполняем артикул: уникальный идентификатор для каждого отдельного товара.

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

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

Доставка

Указываем вес и размеры товара.

Сопутствующие

Апсейл: другой похожий товар, который показывается в карточке товара с заголовком «Вам также будет интересно…»

Кросселы: другие товары, которые вы предлагаете добавить в корзину на странице корзины.

В сгруппированном товаре вы выбираете товары, которые хотите сгруппировать.

Атрибуты

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

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

Дополнительно

Примечание к покупке: этот текст будет отправлен клиенту после покупки товара.

Порядок: произвольное упорядочивание позиций.

Включить или отключить отзывы к определённому товару можно в этой вкладке.

Вариации

Эта вкладка появляется только при выборе вариативного товара. Здесь задаётся отдельная цена для каждой вариации.

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

Категории, метки, атрибуты

Когда товара много, его нужно как-то сортировать, эти три настройки помогут навести порядок в вашем магазине.

Категории

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

Метки

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

Атрибуты

С помощью атрибутов можно настроить дополнительные сведения о товаре, например размер или цвет. Атрибут может состоять:

• из двух вариантов, например «Тип зарядки», варианты «Проводная» или «Беспроводная».
• из вариантов да или нет, например «Подсветка корпуса», варианты «да» или «нет».
• из нескольких вариантов, например «Страна производитель», варианты «Россия», «Италия», «Малайзия», «Китай»

Настройки шаблона

С контентом на сайте разобрались, теперь переходим к настройкам шаблона. У шаблона Bono настройки находятся во вкладке Внешний вид — Настроить. Если вы используете другой шаблон, то настройки могут быть в отдельной вкладке слева в меню админки.

Верхняя полоса

Путь настроек: Внешний вид — Настроить — Блоки — Верхняя полоса

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

Цвет текста и самой полосы можно задавать любой.

Шапка

Шапка состоит из элементов: логотип, меню, ссылки на соцсети, телефон и время работы, иконки поиска и магазина.

Путь настроек: Внешний вид — Настроить — Блоки — Шапка

Логотип

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

Меню

Включаем галочку, чтобы отображалось меню в шапке, а сами пункты идём настраивать во Внешний вид — Меню.

Здесь можно создать новое меню, с левого столбца выбрать нужные страницы и добавить их в меню. Настроить уровень вложенности, если какие-то страницы должны быть подпунктами к другим страницам и снизу ставим галочку Меню в шапке, нажимаем Сохранить меню.

Проверяем на сайте, меню должно появиться.

Иконки социальных сетей

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

Теперь нужно перейти в Модули — Социальные профили — и добавить ссылки для нужных соцсетей.

Не забываем опубликовать (сохранить настройки) и проверить отображение на сайте.

Виджет телефона

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

В поле Телефонные номера добавьте номер, а через // (две косые черты) добавьте доп. текст, он перенесётся на новую строку и будет написан шрифтом поменьше. Номеров можно добавлять несколько, каждый пишите с новой строки.

Иконка поиска

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

Иконки магазина (Избранное, Корзина, Сравнить товары)

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

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

Подвал

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

Путь настроек: Внешний вид — Настроить — Блоки — Подвал

• Здесь выбираем количество колонок для контента
• Прописываем текст копирайта, который располагается в самом низу на всю ширину подвала
• Ещё здесь можно добавить код счётчиков аналитики

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

Сайдбар

Путь настроек: Внешний вид — Виджеты

Сайдбар — это боковая панель, куда вы можете добавлять различные полезные виджеты.

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

Например, на странице магазина можно вывести сайдбар 1 с фильтрами интернет-магазина, а на странице блога и статьях выводить сайдбар 2 с формой подписки, последними статьями, комментариями и т.д.

Главная страница

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

Путь настроек: Внешний вид — Настроить — Конструктор главной

У конструктора есть несколько виджетов:

1. Слайдер — блок растянут на всю ширину, состоит из картинки на фоне, заголовок, подзаголовок и кнопка.
2. Товары — выводите товары по категориям и изменяйте внешний вид блока.
3. HTML — можно добавлять любой HTML-код, например, код формы захвата со стороннего сервиса типа SendPulse.
4. Посты — вывод статей из блога.

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

Цвета и фон

Путь настроек: Внешний вид — Настроить — Цвета и фон

Здесь вы можете настроить цвет элементов и фон. Четыре вкладки: общие, шапка, меню и подвал, в каждой вкладке настройки цвета конкретных элементов. Всё подписано, поэтому трудностей с настройкой не возникнет.

Лучше выбрать 1-2 основных цвета, помимо чёрного и белого, и с помощью них настроить все цвета сайта. В данном примере основной цвет это синий.

Типографика

Путь настроек: Внешний вид — Настроить — Типографика

Если вы захотите изменить шрифт, эти настройки делаются здесь. В шаблоне Bono установлено 25 популярных кириллических шрифтов с Google Fonts. Эти шрифты можно использовать бесплатно и на любом сайте.

Через настройки  можно изменить шрифт у основного текста, названия и описания сайта, пунктов в меню.

Настройки WooCommerce от Bono

Путь настроек: Внешний вид — Настроить — WooCommerce

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

Уведомление магазина

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

Каталог товаров

Настройка страницы с выводом товаров.

Оформление заказа

Точечная настройка формы при оформлении заказа.

Магазин

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

Товар

Настройки карточки товара.

Избранное

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

Если страница не была создана автоматически, то вам нужно её создать и добавить там шорткод

[bono_favorite_shortcode]

Теперь вам нужно связать эту страницу в настройках WooCommerce. Перейдите по пути WooCommerce — Настройки — Дополнительно — Страница избранного.

Сравнить товары

Здесь включается виджет Сравнение, где посетители могут сравнивать характеристики 2-5 товаров. Для этой функции нужно будет создать отдельную страницу и прописать там два шорткода

[bono_product_compare]
[bono_product_compare_clear_page]

Если не разберётесь, вот инструкция.

Теперь вам нужно связать эту страницу в настройках WooCommerce. Перейдите по пути WooCommerce — Настройки — Дополнительно — Страница сравнения.

Цены

Настройка шильдика для цены со скидкой.

Дополнительные стили

Путь настроек: Внешний вид — Настроить — Дополнительные стили

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

Купить в один клик

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

Эта модуль от шаблона Bono и включается в настройках темы.

Путь настроек: Внешний вид — Настроить — Модули — Купить в один клик

Включаем модуль

• в Действие по кнопке выбираем Создать заказ и отправить письмо;
• Статус заказа оставлю Обработка;
• напишите какое сообщение будет показываться покупателю при успешной отправке формы;
• заполняем данные письма, которое придёт вам как оповещение о новом заказе.

Настройки плагина WooCommerce

Теперь разберём настройки WooCommerce — главного плагина магазина.

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

Путь настроек: WooCommerce — Настройки

Вкладка Основные

Адрес магазина

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

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

• Здесь нам нужно выбрать страны, в которых осуществляется продажа товаров.
• Можно выбрать все страны, определённую страну или продавать во всех странах кроме конкретных.
• Это же касается настроек доставки, выберите правила доставки конкретно вашего магазина.
• В поле Стандартная локация лучше оставить Адрес магазина.
• Включение налогов: эту опцию можно не включать, потому что, как правило, итоговая цена указана уже с учётом налогов.
• Использование купонов: если планируете в дальнейшем делать скидочные купоны на товары, то ставим галочку.

Настройки валюты

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

Вкладка Товары

Основные

Страницы Магазина

• Страница Магазина должна быть автоматически выбрана, если нет, то выберите её сами. Здесь мы задаём основную страницу для магазина.
• Изображение заполнитель: можно прописать ID картинки, которая будет появляться, если у товара нет своей картинки (миниатюры).

Габариты

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

Отзывы

• Оставляем отзывы включёнными, так как отзывы на сайте это всегда хорошо. Также я оставляю вторую галочку, этот значок будет у покупателей.
• Рейтинг оставляйте по желанию, я оставлю.

Запасы

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

Эта опция подходит только для физических товаров.

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

Скачиваемые товары

Настройки выдачи виртуальных товаров.

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

Вкладка Доставка

Зоны доставки

• В этой вкладке мы добавляем зону доставки и выбираем нужные методы доставки.

Нажимаем Добавить зону доставки

• Название зоны: напишем Россия
• Зоны: выбираем Россия

Методы доставки

Нажимаем Добавить метод доставки и у нас на выбор 3 варианта:

1. Единая ставка
2. Бесплатная доставка
3. Самовывоз

Каждый метод доставки мы можем отредактировать и включить/выключить для конкретной зоны доставки.

Разберём настройки каждого метода доставки.

Единая ставка

• Заголовок: Пишем название, например Платная доставка
• Статус налога: Выберем Нет, потому что мы решили что налог уже включён в стоимость товара
• Стоимость: Указываем сумму доставки, например 500 р.

Бесплатная доставка

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

Самовывоз

• Наименование: Пишем название, я так и оставлю
• Статус налога: Выберем Нет, потому что мы решили что налог уже включён в стоимость товара
• Стоимость: Оставляем 0

Это стандартные методы доставки от WooCommerce. Если вы хотите добавить больше вариантов, например, добавить сервисы типа СДЕК или Boxberry,  то у них, как правило, есть свои плагины и, при настройке сервиса, вы сможете его настроить по инструкции.

Параметры доставки

Расчёты

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

Назначение доставки: Я выберу 3-й пункт Принудительная доставка по платёжному адресу клиента, чтобы не путать клиента дополнительными полями для заполнения.

Классы доставки

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

Платежи

Методы оплаты

В стандартном функционале WooCommerce доступны 4 метода оплаты:

1. Прямой банковский перевод
2. Чековые платежи
3. Оплата при доставке
4. PayPal

Каждый метод можно включить/выключить, переместить выше/ниже и дополнительно настроить.

Оплата при доставке

Нажимаем Управление и попадаем в настройки метода оплаты.

• Наименование: Название метода оплаты
• Описание: Здесь напишите подробнее про детали и правила оплаты.
• Инструкции: Этот текст будет показан на странице после оформления и также придёт в письме на почту.
• Включено для способов доставки: Выберите метод доставки, для которого этот метод оплаты будет доступен.

Прямой банковский перевод

Ещё один метод, который можно использовать, если вы хотите принимать платежи напрямую как физлицо.

• Также как и в самовывозе заполняем Наименование, Описание и Инструкции.
• В разделе Данные учётной записи добавляем платёжные реквизиты.

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

Обычно из этих методов оставляют только Оплату при доставке и иногда Прямой банковский перевод, а чтобы принимать платежи с карт и электронных кошельков подключают платёжные системы, типа Robokassa или ЮKassa (в прошлом Яндекс.Касса) и другие, вариантов много.

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

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

Учётки и приватность

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

Политика конфиденциальности

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

Хранение персональных данных

Ничего не меняем.

Email’ы

Здесь можно отредактировать все письма, которые приходят вам и клиентам при оформлении заказа и дальнейших действиях.

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

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

Параметры отправителя Email

Можно изменить данные отправителя.

Email шаблон

Здесь можно настроить дизайн письма, поставить картинку в шапку и изменить цвета.

Дополнительно

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

Обычно здесь автоматически выбраны нужные страницы, которые соответствуют своему значению. Если же нет, то выберите вручную.

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

Эндпоинты оформления заказа и Эндпоинты учётной записи

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

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

Clearfy Pro — лучший помощник любого сайта на WordPress

Если хотите ещё улучшить свой магазин, советую приобрести и установить плагин Clearfy Pro. Этот плагин мастхев и я его использую на всех своих проектах и также покупаю для клиентов. Там десятки настроек, которые помогают оптимизировать код WordPress и улучшить показатели скорости и сео сайта.

Особенно рекомендуется, если вы решите использовать тему Bono, потому что разработчики те же ребята WpShop и все функции плагина совместимы и синергичны с шаблоном на 100%.

По ссылке подробный обзор. Официальный сайт плагина.

Личный кабинет покупателя

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

Вы как администратор можете отслеживать аккаунты клиентов во вкладке Пользователи.

Купоны

Вы можете добавлять скидочные купоны для покупателей.

Путь настроек: Маркетинг — Купоны

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

В дальнейшем купон можно применить на странице Корзины или Оформлении заказа.

Аналитика

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

Путь настроек: Аналитика

Примеры оформленного заказа

Страница после оформления заявки

Письмо, которое приходит покупателю

Письмо, которое приходит владельцу сайта

Чек-лист: 8 важных элементов проверки перед запуском онлайн-магазина

После настройки магазина нужно проверить все элементы:

1. Страницы магазина. Пройдитесь по всем страницам, чтобы убедиться что все шорткоды подгружаются, кнопки и поля корректно работают.
2. Общие страницы, товары и статьи. Проверьте вёрстку и корректное отображение всех страниц.
3. Тестовый заказ. Оформите тестовый заказ и проверьте, чтобы письма приходили на оба емейла, продавцу и покупателю.
4. Оплата. Если прикручивали сервис оплаты, сделайте тестовую оплату.
5. Элементы в шапке. Номер телефона, соцсети, иконки.
6. Вёрстка на главной странице. Если вы использовали конструктор.
7. Ссылки в меню и подвале. Перейдите по всем ссылкам, чтобы убедиться что они ведут на нужные страницы.
8. Проверка с разных устройств. Посмотрите сайт с компьютера, ноутбука и разных смартфонов, важно чтобы вёрстка везде была корректная.

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

В каком месте настроек у вас возникает больше всего вопросов? Делитесь в комментариях.

С каждым годом активность интернет-покупателей растёт. Популярность интернет-продаж подталкивает владельцев крупного и малого бизнеса к созданию интернет-магазинов. Сложно ли самому создать интернет-магазин? Не настолько, чтобы не попробовать. Тем более мы вам поможем — расскажем по шагам, как создать интернет-магазин на Wordpress.

Если у вас ещё нет домена и хостинга, быстро создать сайт на WordPress поможет инструкция Как создать сайт с нуля. Перед заказом выберите домен и хостинг: Как выбрать домен и Советы по выбору тарифа хостинга.

При выборе хостинга обратите внимание на объём дискового пространства. Если вы хотите разместить в магазине несколько десятков товаров — вам подойдёт тариф из раздела «Эконом» или «Скоростные». Если в магазине будет более сотни товаров, лучше выбрать VIP-тарифы хостинга с большим объёмом дискового пространства.

Плагины для интернет-магазина WordPress

WordPress ― это самая популярная CMS для создания сайтов. Создать интернет-магазин на WordPress можно с помощью плагинов. Самые популярные плагины:

• Ecwid,
• WooCommerce,
• UNIVERSAM
• WP Shop.

Один из самых практичных плагинов онлайн-торговли — WooCommerce. Ниже мы рассмотрим его подробнее и покажем, как создать интернет-магазин с его помощью.

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

Преимущества WooCommerce:

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

Вы можете активировать плагин WooCommerce для нового или уже готового сайта WordPress по нашей инструкции.

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

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

Шаг 1. Установите WooCommerce

Готово, теперь приступим к настройке интернет-магазина.

Шаг 2. Настройте интернет-магазин

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

Готово, вы настроили интернет-магазин. Теперь добавим в него товары.

Шаг 3. Добавьте товары

Дополнительные плагины для создания интернет-магазина

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

Платёжные системы

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

Stripe поддерживает 14 языков и более 135 валют. Доступны все основные цифровые варианты оплаты. Плагин поддерживает даже краудфандинговые проекты. Большие возможности кастомизации и высокая безопасность платёжных операций. Не требует ежемесячной оплаты, оплачивается только комиссия с транзакции.

Mollie Payments ― плагин для быстрой интеграции всех основных способов оплаты в WooCommerce. С его помощью можно принимать оплату с кредитных и дебетовых карт, а также международных платёжных систем (например, с PayPal).

SEO-оптимизация

Yoast SEO ― полезный плагин для SEO-оптимизации. С его помощью можно работать со сниппетом, контролировать «хлебные крошки», анализировать контент с точки зрения SEO и наполнять сайт ключевыми словами.

Второй по популярности плагин для SEO-оптимизации ― All in One SEO Pack. Это конкурент Yoast SEO. Он имеет схожие функции. Отличительной особенностью является расширенная поддержка для WooCommerce.

The SEO Framework по сравнению с предыдущими плагинами имеет меньше функций, но благодаря этому понятен и легок в использовании. Он способен удовлетворить все основные потребности SEO-оптимизации.

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

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

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

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

Пошаговая инструкция создания интернет-магазина на WordPress

10 шагов, которые необходимо выполнить для быстрого и бесплатного создания интернет-магазина на WordPress с нуля:

1. Приобретаете хостинг и домен.

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

В идеале лучше воспользоваться хостингами, сервера которых базируются за границей. Однако если вы только начинаете и не ожидаете большого потока клиента, то для начала вполне будет достаточно недорогих вариантов с дисковым пространством 1-2 ГБ.

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

2. Устанавливаете WordPress на хостинг.

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

3. Создаете карту сайта.

Для этого используйте плагин Гугл XML сайтмэпс. Также рекомендуем самостоятельно разобраться в теме создания файла robots.txt.

4. Устанавливаете плагин All In One SEO Pack.

Скачиваете этот плагин в интернете и загружаете его через соответствующий раздел в меню CMS.

5. Устанавливаете плагин WooCommerce.

Таким же образом устанавливаете плагин WooCommerce, который и станет основным мотором нашего интернет-магазина.

6. Русифицируете WooCommerce.

Скачиваете русификатор этого плагина и устанавливаете его точно так же. После этого все основные страницы будут переведены на русский язык.

7. Скачиваете шаблон магазина.

Находите подходящий платный/бесплатный шаблон на WP в интернете и скачиваете его себе на компьютер.

8. Загружаете шаблон на сайт.

Админка — Внешний вид — Загрузить тему — Активировать.

9. Проводите завершающую настройку.

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

10. Наполняете сайт контентом.

Ну вот, в принципе, и все. Интернет-магазин на ВордПресс своими руками мы создали. Теперь осталось самое интересное — заполнить его контентом. Загрузите на сайт товары, напишите к ним описания и заполните характеристики, добавьте статьи и новости.

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

Почему WooCommerce?

Давайте разъясним, почему мы решили вам рассказать, как создать интернет-магазин на ВордПресс, базируясь именно на плагине WooCommerce. Да, существует еще большое количество различных вариантов: eShop, eCommerce, Cart66 Lite и прочие. Тем не менее, одним из самых популярных интернет-магазинов на WordPress остается именно WooCommerce. На сегодня на его базе созданы уже более 1 млн коммерческих площадок.

Итак, преимущества, которые имеет этот плагин перед существующими аналогами:

Улучшение интернет-магазина

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

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

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

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

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