Как создать электронную коммерцию с помощью конструктора Avada WooCommerce

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

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

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

Чтобы создать свой сайт электронной коммерции с помощью Avada. 

Прежде всего, мы должны установить wooCommerce в Avada.

Установка WooCommerce – Пошаговые инструкции

Перейдите в Avada > Plugin /Дополнения и найдите plugin , как показано на скриншоте ниже.

Шаг 1. Установите plugin .

Шаг 2. В раскрывающемся меню выберите «Установить».

plugin будет установлен и активирован автоматически.

Шаг 3. После этого должен появиться мастер установки WooCommerce. Если вы импортируете одну из наших демо-версий Woo, например Modern Shop или Classic Shop, вы можете пропустить этот шаг без риска потери своих данных. Чтобы пропустить вперед, выберите «Не сейчас» в раскрывающемся меню. Если вы не импортируете ни одну из наших демонстраций Woo, перейдите к следующему шагу, нажав кнопку «Поехали!». кнопку, чтобы начать процесс установки.

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

Как назначить страницу магазина вашему сайту

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

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

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

Остальные страницы можно настроить на вкладке «Дополнительно», которую можно найти в WooCommerce > Настройки > Дополнительно .

Создание ваших продуктов

Шаг 1. На боковой панели администратора WordPress перейдите на вкладку «Продукты» > «Добавить продукт».

Шаг 2. Вверху страницы введите название вашего продукта.

Шаг 3 – Заполните поле содержания публикации текстом из описания продукта. Вся информация о продукте будет отображаться в этом разделе.

Шаг 4. Заполните поле « Данные о продукте », указав всю информацию о продукте. Например , цена, артикул и доставка — все это возможные варианты amp

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

Шаг 6. Основное изображение должно быть размещено в поле « Изображение продукта » в правой части страницы; Это необходимо заполнить для каждого продукта.

Шаг 7. Добавьте больше изображений в поле « Галерея продуктов », если вы хотите использовать галерею изображений вместо одного изображения.

Шаг 8. В поле « Категории продуктов » введите категории, применимые к вашим продуктам. Затем заполните поля соответствующими тегами для вашего продукта в поле « Теги продукта ».

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

Создание эффекта масштабирования продукта

Если вы используете макеты Avada, вам необходимо убедиться, что опция «Масштабирование изображений продуктов WooCommerce» включена в Avada > Параметры > WooCommerce > Общие WooCommerce > Параметр «Масштабирование изображений продуктов WooCommerce» или на вкладке «Общие» элемента изображений продуктов Woo > Изображения продуктов можно увеличить , если вы используете макеты WooCommerce.

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

Ширина основного изображения WordPress . Параметр ширины основного изображения WooCommerce можно найти в настройщике вашего веб-сайта WordPress. На панели управления WordPress перейдите в «Внешний вид» > «Настройка» > «WooCommerce» > «Изображения продуктов» , где вы найдете настройку «Ширина основного изображения»; Это определит фактический размер изображения, отображаемого в галерее.

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

Убедитесь, что вы повторно создали миниатюры после изменения размеров изображений WooCommerce; Новые размеры изображений будут применены ко всем изображениям, которые уже были загружены на ваш сайт. Для этого вы можете использовать plugin Regenerate Thumbnails.

Настройка параметров размера изображения продукта в WooCommerce.

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

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

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

Любые изменения в настройках размера изображения потребуют от вас повторного создания миниатюр, чтобы они вступили в силу для изображений, которые уже были загружены на ваш сайт. Поэтому настоятельно рекомендуется использовать plugin Regenerate Thumbnails. Кроме того, размеры изображений можно настроить, выполнив следующие действия:

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

Шаг 2. Перейдите на вкладку « WooCommerce » в верхней части страницы.

Шаг 3. Настройки изображений для изображений отдельных продуктов можно найти на вкладке « Изображения продуктов » окна конфигурации.

Шаг 4. Когда вы загружаете изображения на страницы отдельных продуктов, выберите основной вариант ширины изображения. Ширина миниатюр — это ширина миниатюр ваших товаров в каталоге. Заполните поля желаемым значением ширины.

Шаг 5. Чтобы восстановить миниатюры после того, как вы изменили размеры изображений и сохранили их, вам нужно будет использовать plugin , который можно найти в Plugin . Сначала установите plugin , а затем перейдите на WP Admin > Tools , где вы сможете регенерировать миниатюры изображений, создавая изображения новых размеров.

Хансон Ф.

Недавние Посты

Как использовать верхние и нижние колонтитулы с Elementor

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

6 января 2022 г.

Сравнение тем WordPress: Astra и OceanWP

Две самые популярные темы WordPress на рынке — Astra и OceanWP. Профессиональный…

2 января 2022 г.

Сравнение новостных тем WordPress: Newspaper vs. Астра

Чтобы создать отличный новостной сайт, вам не обязательно становиться веб-дизайнером. Мы…

25 октября 2021 г.

Создайте новостной веб-сайт с газетной темой.

Тема «Газета» — одна из самых важных тем WordPress, разработанная tagDiv,…

18 октября 2021 г.

Как использовать липкий заголовок и эффекты прокрутки с Elementor

Заголовок – это, как правило, первое, что видит человек, когда посещает ваш сайт.

21 сентября 2021 г.

Как использовать верхний и нижний колонтитулы Avada и конструктор макетов столбцов

Наш собственный конструктор страниц Avada Builder теперь доступен в двух интерфейсах: Avada…

16 сентября 2021 г.