Как создать сайт WooCommerce на базе Elementor

Мало того, что сама платформа WordPress является самой популярной системой управления контентом (CMS) в мире. У нас также есть самые популярные конструкторы страниц и платформы электронной коммерции в Elementor и WooCommerce. Таким образом, имеет смысл использовать все три для создания эффектного и эффективного интернет-магазина.

Если мы разберем это, WordPress идеально подходит для организации ваших сообщений, страниц и продуктов. WooCommerce предлагает тесную интеграцию с платформой благодаря своим разработчикам (Automattic). Более того, Elementor предлагает мощное и интуитивно понятное создание страниц с помощью перетаскивания. Это полное решение без кода для создания вашего магазина.

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

Почему WordPress, Elementor и WooCommerce хорошо работают вместе

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

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

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

Это также самая популярная платформа электронной коммерции. В экосистеме WordPress на него приходится около 20 процентов, что составляет около восьми процентов всех веб-сайтов. Для сравнения, Shopify имеет около пяти или шести процентов доли рынка. Опять же, цифры использования — это еще не все.

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

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

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

Короче говоря, Elementor — это плагин с большим количеством столбцов в блоге WPKube, и вам следует просмотреть наши архивы, чтобы увидеть, на что он способен.

Что нужно сайту WooCommerce от конструктора страниц

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

В общем смысле сайту WooCommerce требуется следующее от конструктора страниц:

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

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

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

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

Как выбрать подходящую тему WooCommerce

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

Главное, что вам нужно в этом случае, — это тема, совместимая с Elementor и WooCommerce. Даже беглый просмотр премиальных торговых площадок покажет вам, что многие темы рекламируют это, поэтому у вас есть широкий выбор.

Тем не менее, есть несколько выдающихся тем, которые мы можем упомянуть:

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

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

Как создать сайт WooCommerce на базе Elementor за 3 шага

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

• Установите и настройте WooCommerce.
• Создайте свои линейки продуктов WooCommerce и используйте Elementor для создания страниц продуктов.
• Создайте специальную страницу магазина, снова используя Elementor.

Однако в этом уроке мы предполагаем, что у вас уже установлен и активирован Elementor Pro. Это то, о чем мы расскажем вам в нашей статье о создании воронки WordPress. Этот пост поможет вам, когда у вас возникнут проблемы.

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

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

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

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

2. Создайте свои продукты WooCommerce

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

• Перейдите на вкладку « Продукты» > «Добавить новую » в WordPress.
• Введите название вашего продукта и краткое описание.
• Используйте метаполя WooCommerce для заполнения данных о вашем продукте, таких как цена.
• Добавьте изображение.
• Опубликуйте свой продукт.

Тем не менее, именно здесь Elementor демонстрирует свой первый мощный ход — WooCommerce Builder. Это способ использовать конструктор страниц для создания дизайна страниц вашего продукта.

Чтобы начать, нажмите « Шаблоны» > «Добавить новый» в WordPress:

Отсюда выберите « Один продукт » в раскрывающемся списке « Тип шаблона » и введите необязательное имя:

Это откроет библиотеку шаблонов , чтобы показать каждый предварительно созданный блок внутри:

Как только вы увидите понравившийся дизайн, нажмите кнопку « Вставить », и Elementor импортирует блок:

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

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

Это вызовет всплывающее окно, которое поможет вам настроить конкретное условие для отображения шаблона:

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

3. Создайте свою специальную страницу магазина, используя Elementor и WooCommerce

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

Если вы используете WordPress и WooCommerce с темой, специфичной для WooCommerce, такой как Storefront, ваш основной порт захода для настройки страницы магазина — через Customizer. Тем не менее, наше внимание сосредоточено на Elementor. Способ сделать это с помощью конструктора страниц — использовать страницу « Архив продуктов ».

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

Как и в случае с отдельными продуктами, вам нужно перейти в « Шаблоны» > «Добавить новый » в WordPress, а затем выбрать « Архив продуктов » в раскрывающемся списке:

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

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

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

Краткое примечание о других сгенерированных страницах WooCommerce

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

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

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

В заключение

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

В этом посте мы рассмотрели, как использовать Elementor и WooCommerce вместе для создания магазина. После того, как вы установили и активировали оба плагина, ваша первая задача — создать продукты вместе со связанными с ними страницами. Оттуда вам нужна специальная страница магазина — то, с чем Elementor может справиться. Более того, дополнительные функциональные возможности плагина конструктора страниц (например, конструктор всплывающих окон и т. д.) помогут вывести ваш магазин в стратосферу.

Вы хотите создать комбинацию Elementor и WooCommerce для своего следующего магазина, и если да, то поможет ли вам эта статья? Дайте нам знать в комментариях ниже!