Как подружить WooCommerce с Elementor и придать вашему интернет-магазину стиль

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

ВуКомерс ограничивает креативные возможности, особенно для страниц товаров и области оформления заказа.

Вот здесь и приходит на помощь интеграция WC с Elementor. Она открывает функциональность Drag-and-Drop, творческий контроль над всеми страницами WC, а также поддержку продвинутых аддонов и тем Элементора, которые вы, возможно, не используете в других случаях.

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

Что такое WooCommerce

WooCommerce — это плагин для WordPress. Он превращает его любую стандартную установку в сайт для онлайн-торговли.

Вот некоторые ключевые особенности WooCommerce:

• Продажа цифровых и физических товаров. WC поддерживает широкий спектр других типов, включая подписки, переменные, партнерские и сгруппированные продукты.
• Управление интернет-магазином. ВуКомерс контролирует заказы, товарные запасы и все контакты на своем дашборде.
• Автоматизированное создание основных страниц для онлайн-продаж. После активации WooCommerce на сайте вы получаете разделы «Магазин», «Корзина», «Мой аккаунт» и т.д.
• Расширяемость и масштабируемость. Для WC существует обширная экосистема плагинов и дополнений, позволяющая включать новые функции, которые не встроены в него. С помощью ВуКомерс легко масштабировать бизнес благодаря поддержке большого количества заказов, товаров и других данных.
• Сообщество и помощь. Несмотря на отсутствие прямой человеческой поддержки, WC имеет большое комьюнити активных разработчиков и пользователей, а в интернете полно форумов и руководств по поиску решений.
• Оплата, доставка и налоги. Выбирайте из сотен платежных процессоров и связывайтесь с удобным для вас поставщиком услуг транспортировки. Возможно также настроить налоги в зависимости от зоны.
• Аналитические данные. Немногие платформы онлайн-торговли могут соперничать с мощным набором отчетов и аналитики, предоставляемых WooCommerce. Отслеживайте работу интернет-магазина в течение года и анализируйте все — от действий покупателей до ежедневной выручки.

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

Для чего используется Elementor

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

Например, Элементор поможет персонализировать:

• Страницу магазина ВуКомерс.
• Разделы товаров.
• Оформление заказа и корзину.
• Страницу «Моя учетная запись».
• Раздел магазина.

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

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

В целом, Elementor предоставляет:

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

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

Работает ли WooCommerce с Elementor

Да, Элементор разработан для функционирования с плагином ВуКомерс.

Фактически, Elementor продается как продукт, который:

• Сокращает количество плагинов, необходимых для WC.
• Повышает конверсию (благодаря готовым к работе, оптимизированным разделам и темам WooCommerce).
• Помогает визуализировать разработку интернет-магазина без необходимости написания кода.

Элементор также поставляется с различными виджетами ВуКомерс.

Вот список некоторых:

• Мета-данные.
• Краткое описание.
• Меню корзины
• Хлебные крошки продукта.
• Мой аккаунт.
• Корзина.
• Товарный запас.
• Добавить в корзину.
• Рейтинг товаров.

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

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

Почему стоит использовать Elementor для сайтов WooCommerce

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

Далее рассмотрим основные причины использовать Elementor вместе с WC.

Улучшенный визуальный дизайн

В WordPress есть конструктор страниц Gutenberg. Elementor расширяет его функциональность за счет большего количества блоков и готовых к работе разделов.

Персонализация нередактируемых страниц WooCommerce

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

Дизайн, ориентированный на конверсию

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

Бесшовная интеграция с WooCommerce

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

Экономия времени и средств

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

Благодаря таким преимуществам я рекомендую всегда использовать Elementor (или другой удобный конструктор) при создании сайта с WC.

Как создать онлайн-магазин с помощью Elementor и WooCommerce в 2025 году

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

Установите WooCommerce и Elementor

Для начала вам необходимо иметь:

• WordPress.
• Хостинг.

Установите WP на своем сервере.

После установки этих элементов поставьте WooCommerce.

В противном случае добавьте бесплатный плагин WC на свой сайт ВордПресс.

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

Последняя часть этого шага включает установку и активацию Элементора. Поставьте бесплатную версию или пройдите все шаги по покупке и загрузке Elementor Pro.

Добавьте тему WooCommerce Elementor

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

Далее в этой статье я предлагаю свои рекомендации по лучшим темплейтам WC Elementor для начала работы. Вы также можете поискать темы в Интернете.

Как только найдете темплейт, идеально подходящий для нужд, установите его на сайт ВордПресс.

Создайте домашнюю страницу WooCommerce

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

Это добавит главную для кастомизации.

Наконец, перейдите в меню «Внешний вид > Кастомизировать» и выберите «Настройки домашней страницы». Нажмите «Статическая страница» в разделе «Отображение вашей домашней страницы». Выберите «Домашняя страница» в раскрывающемся списке.

Таким образом, она станет глобальной главной. Вы сможете кастомизировать ее с помощью Elementor или кастомайзера тем WordPress.

Например, Astra предлагает готовые к работе шаблоны для создания красивого интернет-магазина за считанные секунды. Они находятся в разделе «Внешний вид > Стартовые шаблоны» (если используете Астра).

Я также рекомендую изучить конструктор темплейтов от Elementor. Для этого перейдите в раздел «Шаблоны > Конструктор тем».

Используйте опцию «Single Page» и нажмите «Добавить новый». Выберите вкладки «Страницы» и «Блоки», чтобы быстро создать профессиональную домашнюю страницу или любую другую на сайте.

Добавьте товары в WooCommerce

Чтобы добавить продукт в ВуКомерс, перейдите в раздел «Продукты > Добавить новый».

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

Список товаров всегда доступен в разделе «Продукты > Все товары» в WordPress.

Настройте доставку, платежные шлюзы и налоги

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

Все это находится в разделе «WooCommerce > Настройки» в WP.

Что касается транспортировки, перейдите на вкладку «Доставка». Нажмите кнопку «Добавить зону доставки».

Кроме того, вы можете прокрутить страницу до самого низа, чтобы настроить расширение WooCommerce Shipping. Оно предлагает печатные этикетки USPS и DHL.

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

Чтобы настроить обработку платежей, перейдите на вкладку «Платежи» в разделе «Настройки WooCommerce». Установите расширение WooCommerce Payments, чтобы принимать такие способы оплаты, как кредитные карты и Apple Pay.

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

Для оплаты налогов перейдите на вкладку «Общие» в разделе ВуКомерс. Убедитесь, что ваш бизнес-адрес заполнен. На основе него рассчитываются налоги и стоимость доставки.

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

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

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

Настройка страницы магазина в WooCommerce с помощью Elementor

По умолчанию WooCommerce генерирует для вас страницу магазина. Можете найти ее, перейдя на вкладку «Страницы» в WordPress.

Нажмите «Редактировать в Elementor». Также есть кнопка «Шаблонные комплекты» из Элементора для быстрого добавления красивого дизайна в раздел магазина.

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

Отображение стильных коллекций товаров с помощью Elementor

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

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

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

После этого Elementor предоставляет параметры для регулировки количества столбцов, строк и всего стиля виджета.

Кастомизируйте страницы товаров с помощью Elementor

Страницы товаров контролируются так же, как и другие в Elementor.

Один из вариантов — открыть любой продукт в ваших запасах и нажать на кнопку «Редактировать с помощью Elementor».

Чтобы получить более детальный контроль и добавить профессионально выполненный дизайн, перейдите в раздел «Шаблоны > Конструктор тем» в ВордПресс. Кликните на вкладку «Единичный продукт» и нажмите «Добавить новый».

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

Это соединит вас с библиотекой шаблонов Elementor. После этого можете вставить любой из блоков или макетов страниц товаров глобально или в отдельные разделы продуктов.

Кастомизация оформления заказа и корзины WooCommerce с помощью Elementor

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

По умолчанию они (например, «Оформление заказа», «Корзина» и «Мой аккаунт») имеют ограниченный потенциал для редактирования. Но с помощью Elementor возможно полностью контролировать форматирование, стиль и общий вид каждой из них.

Чтобы отредактировать страницы «Касса» и «Корзина», перейдите в «Страницы» в WP. Прокрутите нужный раздел и нажмите «Редактировать с помощью Elementor».

Найдите компонент «Корзина» в разделе ВуКомерс и добавьте его в свой дизайн. Затем можете удалить корзину по умолчанию из WC.

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

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

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

После вставки и выбора виджет Checkout предлагает вкладки для контента, стиля и дополнительных настроек.

Эти параметры позволяют кастомизировать такие элементы, как раздел «Ваш заказ», сведения о возвращающемся клиенте и информацию об оплате. Можете изменять цвета, стили, размеры и т.д.

Кастомизация страницы «Мой аккаунт» с помощью WooCommerce и Elementor

Чтобы кастомизировать стандартный раздел «Мой аккаунт» из WooCommerce, откройте «Страницы» в ВордПресс. Прокрутив его, нажмите на «Редактировать с помощью Elementor».

Удалите старый модуль «Мой счет» и добавьте версию Элементор, расположенную в виде виджета под ВуКомерс.

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

Вот так возможно создать интернет-магазин с помощью интеграции WooCommerce Elementor.

Далее я предлагаю вам лучшие темы и аддоны Elementor для WooCommerce. Они помогут в процессе разработки.

Лучшие темы Elementor для WooCommerce

При поиске тем Elementor для WooCommerce лучше всего ориентироваться на варианты, которые имеют перечисленные ниже преимущества.

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

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

Я подготовил список отличных тем для Elementor 2025 года. Некоторые из них хорошо подходят для WooCommerce, но не все они предназначены для интернет-магазинов.

Astra

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

OceanWP

Будучи многоцелевой темой ВордПресс, OceanWP имеет интеграцию с WooCommerce и прямую поддержку конструктора страниц Elementor.

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

Shopkeeper

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

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

Zakra

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

Storefront

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

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

ShopIsle Pro

ShopIsle Pro — премиум-решение с продвинутой типографикой, готовыми к работе демо-версиями интернет-магазинов. Тема имеют глубокую интеграцию с Элементором и WC.

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

Neve

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

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

Customify

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

Что касается интернет-магазина, то интеграция с WooCommerce Elementor позволяет легко демонстрировать товары и редактировать весь процесс оформления заказа без знаний кода.

GeneratePress

GeneratePress — многоцелевое решение с поддержкой WC и Elementor. Ее главное преимущество перед другими темами — легкость, а также модульный дизайн.

Phlox

Phlox — многоцелевая тема. Она представляет собой мощный инструмент для создания сайтов для разработчиков ВуКомерс и Элементор.

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

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

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

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

Плагины WooCommerce для Elementor

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

HappyAddons

HappyAddons — коллекция виджетов и дополнений для Elementor.

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

PowerPack for Elementor

PowerPack for Elementor содержит широкий спектр уникальных виджетов для сайтов WC, использующих Элементор. С помощью 70+ компонентов вы сможете встроить хлебные крошки, отзывы, кнопки и многое другое.

WooLentor

WooLentor — это аддон для конструктора страниц Элементор. Он улучшает редактор WC и предлагает функции для кастомизации электронной почты.

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

Essential Addons

Essential Addons имеет бесплатную и премиум-версию. Этот аддон улучшает процесс создания страниц в Elementor с помощью виджетов для таблиц цен, сеток товаров, призывов к действию и т.д.

Среди премиум-элементов — расширенная карта Google, лента Instagram* и параллакс-дизайн.

JetWooBuilder

JetWooBuilder — аддон WooCommerce Elementor от Crocoblock. Это вариант, на который стоит обратить внимание. Опция JetWooBuilder позволяет смешивать и сочетать такие элементы, как кастомные шаблоны, переключатели макетов и страницы для конкретного магазина.

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

Elementor или Elementor Pro?

Вы можете задаться вопросом: «В чем разница между Elementor и Elementor Pro?».

Бесплатная версия Элементор довольно мощная и включает большинство функций, необходимых для создания сайта или интернет-магазина с функцией Drag-and-Drop. При этом инструменты WooCommerce значительно улучшаются, когда вы переходите на Pro.

Для начала посмотрим на разницу в ценах:

• Elementor: Бесплатно.
• Elementor Pro: Начиная с $59 в год. Другие тарифные планы — $99, $199 и $399/12 месяцев.

Однако при переходе с Elementor на версию Pro появляются новые функции.

Элементор (бесплатно) предоставляет:

• Базовую кастомизацию конструктора тем.
• Ограниченное количество шаблонов и блоков.
• Экспорт и импорт макетов.
• Редактирование на мобильных устройствах.
• 40 элементов дизайна, таких как отзывы, кнопки, иконки, текстовые редакторы и т.д.

Вот что вы получаете с Elementor Pro (то, что не включено в Basic):

• Кастомизацию каждой части темы.
• Дизайн и интеграцию форм.
• Все профессиональные блоки, шаблоны и виджеты.
• Конструктор всплывающих окон.
• Эффекты прокрутки.
• Конструктор хедеров и футеров.
• Еще около 30 виджетов и элементов, таких как блок цитат, пагинация блога, обратный отсчет и макет каменной кладки.
• Специфические для WooCommerce компоненты дизайна. Например, WC Categories, WC Products и WC Add To Cart.

Когда переходить с Elementor на Elementor Pro

Ответ на этот вопрос прост. Переходите на Elementor Pro:

1. Если хотите получить большинство функций WooCommerce Builder, таких как редактирование и шаблоны для раздела «Добавить в корзину», категорий и товаров.
2. Если желаете иметь полный контроль над кастомизацией интернет-магазина.
3. Если нужно начать использовать дополнительные элементы, такие как эффект Кена Бернса, виджет входа в систему или флип-бокс.

Пользователям ВуКомерс стоит перейти на Pro-версию Elementor, чтобы получить максимальную пользу.

Заключение

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

*Instagram признан экстремистской организацией и запрещен на территории РФ.