Как создать фантастический интернет-магазин с WooCommerce, Divi и SiteGround (Сентябрь 2021)

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

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

Примечание редактора: этот пост был первоначально опубликован 15 января 2015 года и был полностью переработан и обновлен для обеспечения точности и полноты.

Есть тысячи-миллионы тем WordPress на выбор, когда вы ищете интерфейс и бэкэнд-структуру, чтобы начать продавать онлайн. Почти то же самое с хостингом (но мы предпочитаем SiteGround or Bluehost).

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

Короче говоря, темы WordPress имеют решающее значение, и Divi Тема WordPress от Elegant Themes - довольно красивый вариант, который стоит вам рассмотреть. Его можно использовать для стандартного бизнес-сайта, но он также включает в себя интеграцию для продаж электронной коммерции и быстрых процессов продаж. Давайте узнаем, как создать интернет-магазин с Divi Тема WordPress.

Получите ваш домен и хостинг.

????Первым шагом в любом процессе создания сайта является захват учетной записи хостинга, имени домена и установка WordPress на сайте. Divi ничем не отличается. Есть много способов получить хостинг и доменные имена, но я лично считаю SiteGround - один из самых безопасных и надежных вариантов. (Для получения более подробной информации ознакомьтесь с нашим всеобъемлющим SiteGround отзыв).

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

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

Тем не менее, еще одна услуга хостинга, которую мы настоятельно рекомендуем Divi WooCommerce магазины BlueHost. Хотя функции здесь не соответствуют SiteGroundты все еще получаешь WooCommerceориентированный на хостинг через свой пакет электронной коммерции WordPress. Планы могут с комфортом справиться с Divi WooCommerce store, но, к сожалению, вы не получите управляемых услуг.

👉 Теперь, для ясности, перейдем к SiteGround...

Как вы начали?

Перейдите в SiteGround Управляемые WooCommerce хостинг выберите идеальный план и нажмите Получить план.

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

👉 А что касается ресурсных пособий, этот план предусматривает:

  • Почтовый ящик 6GB
  • 1 GB Хранение базы данных
  • Накопитель SSD
  • Неизмеренная передача данных
  • 30GB место для хранения
  • До 100,000 ежемесячных посещений

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

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

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

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

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

Платежная часть требует от вас ввести данные вашей кредитной карты. Вы можете продолжить с Откройте для себя, MasterCard or Visa.

Однако, что довольно интересно, SiteGround не перечисляет PayPal, несмотря на его растущую популярность среди WooCommerce торговцы. Но, к счастью, оказывается, что они могут принимать платежи PayPal, хотя и косвенно.

Если это ваш предпочтительный режим, просто оставьте поля пустыми и свяжитесь с SiteGroundагентов по продажам через чат. Они помогут вам завершить процесс через PayPal.

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

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

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

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

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

Создание вашего интернет-магазина с Divi

Что Divi?

Хорошо, если вы еще не пробовали, держу пари, что вы уже слышали об этом. Divi необычный WooCommerce тема. Фактически, это одна из самых популярных тем WordPress на Elegant Themes. И, что интересно, Divi is Элегантная темаФлагманский продукт.

Итак, что же такого особенного в этой теме? И есть ли что-нибудь выдающееся в DiviАвтора WooCommerce?

Что ж, в отличие от типичных тем WordPress, Divi является более всеобъемлющим пакетом. Это означает, что он сочетает в себе стандартные функции темы с дополнительными функциями, которые пригодятся для Divi WooCommerce магазины.

что divi

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

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

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

👉 Таким образом, в конечном итоге вы сможете извлечь выгоду из Divi«S:

  • Массив настраиваемых макетов для любого типа веб-сайта WordPress, включая WooCommerce интернет-магазины.
  • Простой в использовании Page Builder, который предоставляет множество элементов веб-сайта и возможностей дизайна.
  • Гибкий процесс настройки без какого-либо кода. Даже новички могут с комфортом настроить и настроить полнофункциональный Divi WooCommerce магазины.
  • Простая интеграция с WordPress. Divi - одна из немногих внешних тем WordPress, которую можно легко установить без каких-либо сложных настроек.
  • Оптимизирован для электронной торговли WooCommerce шаблоны.

Divi Перетащить страницу конструктора

Как мы уже сказали, Divi бывает двух разных вкусов. Когда вы платите за членство на Элегантные Темы, вы найдете стандарт Divi Тема на приборной панели в сопровождении Divi Плагин WordPress Page Builder.

Но стоит отметить, что этот строитель не привязан исключительно к Divi Тема. Это дополнительный плагин к каждой теме, полученной от Elegant Themes.

Тем не менее, Divi WordPress Page Builder - это редактор перетаскивания с расширенными возможностями настройки. Он позволяет перемещать и определять элементы, столбцы, строки и модули без какого-либо опыта программирования. Другими словами, это тип строителя. Divi WooCommerce начинающий надеется получить.

divi настройки

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

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

И вы знаете, что?

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

И, говоря об этом, здесь есть еще одно примечательное положение: Diviобщее упрощение процесса настройки макета. Например, если вы хотите представить новый раздел, достаточно одного щелчка. Затем копирование, удаление и вставка модулей для вашего Divi WooCommerce Магазин займет у вас всего несколько нажатий кнопки.

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

Предустановленный Divi WooCommerce Макеты сайтов

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

Ну, если быть более точным, Divi предоставляет около 7-8 различных предварительно разработанных макетов для каждого пакета веб-сайтов. Учитывая, что каждый из них поставляется полностью собранным, вы можете легко адаптировать макеты без значительного изменения их базовой структуры. Вы просто пару настроек здесь и там.

divi макеты веб-сайтов

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

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

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

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

Is Divi Подходит для WooCommerce?

Все, что считается, Divi становится все более популярным, потому что это, по сути, универсальное решение для темы WordPress.

В сочетании Divi Конструктор страниц и Divi тема предлагает практически все, что вам нужно для создания любого типа сайта WordPress. И это включает в себя полнофункциональный WooCommerce store со всеми основными возможностями электронной коммерции.

👉 В двух словах, Divi вариант, который стоит рассмотреть для вашего WooCommerce сайт, потому что:

  • Вы можете настроить ваш WooCommerce веб-сайт через визуальный редактор с перетаскиванием.
  • Divi позволяет сохранять настройки как глобальные элементы для всех макетов.
  • Он поставляется с хорошо спроектированными готовыми макетами сайтов 20.
  • Вы можете легко экспортировать макеты, а затем использовать их на других сайтах.
  • Вы можете создать свой WooCommerce хранить с несколькими столбцами, строками и элементами содержимого.
  • Все WooCommerce макеты оптимизированы для мобильных устройств.
  • Так же, как MS Word, редактировать текстовый контент так же просто, как нажать, а затем набрать.
  • Весь процесс настройки сайта отслеживается в режиме реального времени, что обеспечивает предварительный просмотр всех изменений дизайна.
  • WooCommerce макеты поставляются с основными страницами и модулями интернет-магазина.

Шаг 1. Зарегистрируйтесь с помощью элегантных тем, чтобы получить доступ к Divi

Начнем с посещения Страница продукта Elegant Themes для Divi Тема WordPress. Эта страница предлагает возможность демонстрации темы и кнопку быстрой загрузки. Elegant Themes продает свои темы с использованием структуры ежегодных или разовых платежей, что удобно для разработчиков с несколькими клиентскими сайтами или людей, которые запускают множество сайтов электронной коммерции. Вы не можете купить только одну тему, но Персональный план для $ 67 в год похоже на то, что вы могли бы заплатить за обычную тему, и вы можете остановить ежегодные платежи, если вам больше не нужна поддержка. Не стесняйтесь играть с темой, прежде чем совершать платеж.

Divi Тема WordPress

Шаг 2: установить Divi на вашем сайте WordPress

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

Новая тема Wordpress

Шаг 3: нажмите на кнопку Добавить новый

Wordpress добавляет новую тему

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

Загрузка темы Wordpress

Шаг 4. Настройте свой WooCommerce Магазин

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

Что удивительно, так это то, что начальный SiteGround регистрация уже установлена WooCommerce на вашем веб-сайте WordPress, поэтому вам не нужно беспокоиться об установке или настройке. Он уже должен быть доступен на вашей панели управления.

Шаг 5. Добавьте свои первые продукты в WooCommerce

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

WooCommerce добавить новый продукт

Шаг 6

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

Электронная торговля добавляет новые поля продукта

Шаг 7. Изучите WooCommerce Особенности

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

WooCommerce функции

Шаг 8: создайте домашнюю страницу

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

Новая страница Wordpress

Шаг 9. Добавьте заголовок для своего Divi страница

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

Редактор страниц wordpress

Шаг 10

Нажмите кнопку «Полная ширина».

Добавить заголовок

Шаг 11

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

Настройка заголовка

Шаг 12

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

WordPress woocommerce установка

Шаг 13

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

Настройте эти кнопки вокруг

Шаг 14

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

Настройка электронной коммерции Wordpress

Шаг 15

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

Настройка электронной коммерции Wordpress

Шаг 16

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

Настройка электронной коммерции Wordpress

Шаг 17: Предварительный просмотр и публикация

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

Если у вас есть вопросы по настройке Divi Тема WordPress, пожалуйста, сообщите нам в разделе комментариев ниже.

Заключение

И это все, что нужно, чтобы получить Divi WooCommerce интернет-магазин запущен и работает с помощью SiteGround учетная запись хостинга.

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

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

Если у вас есть вопросы по настройке Divi Тема WordPress, пожалуйста, дайте нам знать в разделе комментариев ниже.

Divi
Рейтинг: 5.0 - Обзор по

Каталин Зорзини

Я блогер веб-дизайна и начал этот проект, проведя несколько недель, пытаясь выяснить, лучшая платформа для электронной коммерции для себя. Проверить мой текущий top 10 разработчики сайтов для электронной коммерции.