Как создать магазин с помощью конструктора WooCommerce для Elementor

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

С ShopReady вы можете создавать и настраивать весь свой магазин WooCommerce с помощью Elementor — даже если вы просто используете бесплатную версию Elementor!

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

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

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

Вы сможете создать магазин, который выглядит так:

И вы сможете настроить все с помощью Elementor, включая ваш продукт, корзину и страницы оформления заказа ( плюс многое другое ):

Как использовать ShopReady в качестве конструктора WooCommerce для Elementor

Без дальнейших церемоний, давайте приступим к нашему пошаговому руководству.

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

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

1. Создайте свой базовый магазин WooCommerce и установите Elementor

Если вы еще этого не сделали, ваш первый шаг — настроить базовый магазин WooCommerce.

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

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

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

После того, как вы это сделаете, вы также захотите установить плагин Elementor.

С ShopReady вы можете использовать только бесплатную версию Elementor.

Или, если у вас уже есть Elementor Pro, вы также можете установить его — ShopReady отлично работает с обеими версиями.

2. Установите ShopReady и активируйте все

После того, как вы настроили свой базовый магазин WooCommerce и установили Elementor, вы готовы установить конструктор ShopReady WooCommerce для Elementor.

На WordPress.org доступна бесплатная версия ShopReady, а также премиум-версия с дополнительными функциями по цене от 75 долларов.

Для этого урока у нас установлена ​​версия Pro. Тем не менее, те же основные шаги будут применяться и к бесплатной версии, поэтому вы сможете следовать им, даже если используете бесплатную версию ( у вас просто может не быть доступа к некоторым более продвинутым функциям, и вы не будете возможность настроить столько шаблонов ).

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

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

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

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

Особенно важно включить модуль Demo Importer , так как это позволит вам получить доступ к готовым шаблонам магазина ShopReady ( хотя вы всегда можете настроить все с нуля ).

Как только вы включите модуль Demo Importer , вам будет предложено установить сопутствующий плагин Demo Importer, что вы и должны сделать.

Как только вы это сделаете, перейдите в новую область Unyson на панели инструментов WordPress и включите расширение Backup & Demo Content , чтобы вы могли импортировать шаблоны ShopReady.

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

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

Теперь вы можете перейти в «Инструменты» → «Установить демонстрационный контент» , чтобы установить один из готовых демонстрационных сайтов ShopReady.

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

Как только вы импортируете демо, вы сможете полностью настроить все с помощью Elementor.

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

Для этого урока мы будем использовать Demo V1 :

И точно так же ваш магазин должен выглядеть точно так же, как в демоверсии:

4. Настройте шаблоны вашего магазина с помощью Elementor

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

Чтобы получить доступ ко всем различным шаблонам вашего магазина, перейдите в область ShopReady на панели инструментов WordPress, а затем выберите вкладку «Шаблоны» .

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

• Товар — шаблон для отдельной страницы товара.
• Магазин – шаблон главной страницы магазина.
• Архив магазина — шаблон страницы со списком всех ваших товаров.
• Корзина / Пустая корзина — шаблоны для различных этапов вашей корзины.
• Checkout — шаблон страницы оформления заказа.
• Моя учетная запись — шаблон страницы учетной записи покупателя.

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

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

Вы также можете создавать новые шаблоны и использовать несколько шаблонов в разных частях вашего магазина:

Теперь ShopReady запустит интерфейс Elementor.

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

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

Каждый виджет также будет иметь свои уникальные настройки.

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

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

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

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

5. Настройте параметры сайта

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

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

Сначала настройки разделены на две области — ShopReady и ShopReady General & PopUp.

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

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

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

Начните использовать конструктор WooCommerce для Elementor уже сегодня

Пользователи любят Elementor из-за его мощного визуального интерфейса с перетаскиванием.

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

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

Бонус: получите скидку 30% на ShopReady, используя эксклюзивный код купона WPMayor30 при оформлении заказа!