Как создать интернет-магазин на WordPress и WooCommerce в 2024 году (Пошаговое руководство)

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

WordPress шаблон

Наш премиальный шаблон для создания прокаченного интернет-магазина с высокой конверсией на базе WordPress и WooCommerce, раскрывающий всю мощь плагина Elementor, как лучшего визуального редактора!

• Хедер и Футер билдер
• 60+ блоков для Elementor и 200+ настроек
• Мега-меню для больших каталогов
• Живой фильтр
• Списки желаний и образцы вариаций

Посмотреть демо

Подробнее о шаблоне

Хотите создать личный интернет-магазин на WordPress?

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

Что нам нужно? Делаем интернет-магазин на WordPress бесплатно

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

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

Для старта проекта вам потребуются:

1. Доменное имя – это адрес и наименование вашей площадки в сети, например wordpresslab.ru.
2. Хостинг, на котором в физическом плане будет располагаться вся информация вашего интернет-магазина.
3. Немного свободного времени. ?

Настройка и оптимизация торговой площадки, созданной на платформе WordPress, занимает менее часа. И мы пройдём этот путь вместе.

В данном руководстве будут рассмотрены следующие вопросы:

• Как получить собственное доменное имя, воспользоваться услугой хостинга, получить бесплатный SSL-сертификат?
• Как установить CMS WordPress?
• Как организовать работу интернет-магазина с использованием расширения WooCommerce?
• Как добавить и работать с товарами?
• Как правильно подобрать и оптимизировать тему?
• Как улучшить свой проект с использованием дополнительных плагинов?

Шаг 1. Выбор, подготовка и работа с платформой

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

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

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

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

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

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

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

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

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

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

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

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

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

Вот вам действующий купон на 5% скидку – 80FD-94D2-1F81-A44B

Копейка рубль бережет!

Оплатить выбранные услуги и после активации перейти к установке.

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

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

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

Советуем ознакомиться с полным руководством по настройке WordPress сайта

Пошаговая настройка сайта на WordPress после установки. Методы правильной персонализации

• WordPress лаборатория
• 28 февраля, 2023

Внимание!

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

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

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

Как создать сайт на WordPress с нуля – Пошаговая инструкция (2024)

• WordPress лаборатория
• 10 мая, 2024

Шаг 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»

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

Нажмите на большую кнопку «Да, пожалуйста» и мастер установки перейдет к первому шагу, где вам будет предложено указать адрес:

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

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

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

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

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

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

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

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

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

• Магазин на Facebook – Развивайте свой бизнес, ориентируясь на нужных людей и стимулируя продажи с помощью Facebook.
• Интеграция с плагином Mailchimp – Сервис рассылок электронных писем по базе ваших клиентов.
• Реклама в Google – Получите доступ к новым клиентам из поисковой системы Google и получите купон на рекламу в размере 150 долларов США.

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

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

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

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

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

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

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

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

Входящие

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

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

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

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

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

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

WordPress шаблон

Наш премиальный шаблон для создания прокаченного интернет-магазина с высокой конверсией на базе WordPress и WooCommerce, раскрывающий всю мощь плагина Elementor, как лучшего визуального редактора!

• Хедер и Футер билдер
• 60+ блоков для Elementor и 200+ настроек
• Мега-меню для больших каталогов
• Живой фильтр
• Списки желаний и образцы вариаций

Посмотреть демо

Подробнее о шаблоне

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

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

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

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

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

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

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

<!-- WooCommerce Version -->
<meta name="generator" content="WooCommerce 4.3.0" />

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

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

Поддержка

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

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

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

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

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

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

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

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

Шаг 4. Стандартные страницы в WooCommerce

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

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

Переустановка страниц

Если вы пропустили мастер установки или хотите установить недостающие страницы, перейдите в раздел WooCommerce → Статус → Инструменты и используйте инструмент установки страницы.

Укажите, какие страницы использовать в качестве основных

Если вы хотите установить страницы самостоятельно или поменять те, что создал мастер установки, то вам нужно указать их в раздел WooCommerce → Настройки → Дополнительно.

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

Что такое страница магазина?

Страница «Магазин» – это архив, где будут отображаться все товары вашего интернет-магазина на WordPress.

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

Эта страница будет совместима со всеми темами WordPress, даже не предназначенными специально для WooCommerce.

Шаг 5. Добавление товарных позиций

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

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

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

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

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

Правая колонка несёт в себе поля для размещения главной картинки товара или целой галереи.

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

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

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

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

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

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

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

Откройте раздел Внешний вид → Настроить. Запустится настройщик темы. Он позволяет менять те или иные настройки.

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

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

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

Спасибо.

Купец - WordPress шаблон
Для создания сайта компании или интернет магазина с высокой конверсией на базе WordPress и WooCommerce.

Подробнее