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

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

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

Кстати, страницы продукта встречаются практически на каждом сайте электронной коммерции, но пользовательская страница продукта Woocommerce создана, когда владелец сайта должен показывать продукт по -другому.

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

И в этом блоге мы увидим, как создать пользовательские страницы продуктов WooCommerce, используя Builder Ementor Page на веб -сайте WordPress.

Какие инструменты нам нужны для создания пользовательских страниц продуктов WooCommerce

В этом блоге нам понадобится плагин Elementor. В дополнение к этому нам также понадобятся аддонс Elemento.

Elementor делает процесс создания страниц простым, а Amento Addon помогает расширить мощность Ementor, добавив виджеты и дополнительные функции в виджеты.

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

Итак, давайте начнем сейчас,

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

Во -первых, давайте установим оба плагина.

Установка плагина Elementor

Шаг 1) Откройте панель панели

Войдите на свою панель инструментов WordPress.

Шаг 2) Перейдите в плагины и нажмите «Добавить новый плагин»

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

Шаг 3) Перейдите в строку поиска и найдите Elementor

На этой странице вы найдете плагины. Перейдите в строку поиска и найдите элементар.

Шаг 4) Установите и активируйте элементар

После поиска Elementor он появится в списке плагина. Нажмите кнопку «Установка», после установки, нажмите кнопку «Активировать», чтобы активировать плагин Elementor.

Загрузка плагина elemento addons

Во -первых, загрузите аддоны Elemento из Themehunk.

Перейдите на страницу Alemento Addons и купите плагин. Вы можете посмотреть этот урок, если вам нужна рука помощи, чтобы получить аддоны Elemento.

Шаг 1) Откройте панель инструментов и перейдите на страницу плагина

Повторите те же шаги и достигните страницы плагина.

Шаг 2) Нажмите «Загрузить плагин»

Перейдите в верхний левый и нажмите «Загрузить плагин».

Шаг 3) Загрузите аддонс elemento

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

Оба плагина установлены, и теперь мы можем продолжить.

Создание страницы продукта WooCommerce

Шаг 1) Создайте новую страницу

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

Шаг 2) Нажмите «Редактировать с элементом»

В верхней панели вы найдете кнопку «Редактировать с помощью элементарной кнопки». Нажмите на него.

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

Нам понадобится два отсека, поэтому сначала возьмите контейнер с двумя сторонами.

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

Теперь установите изображение продукта.

Теперь приходите на правую сторону. Чтобы войти в заголовок, найдите его и вставьте во второй контейнер.

Введите имя продукта в заголовке.

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

На страницах продукта есть краткое описание продукта. Чтобы добавить его, снова вставьте текстовый редактор и напишите краткое описание продукта.

Теперь пришло время добавить кнопку корзины. На этот раз мы будем использовать виджет Cart Addons Elemento, потому что он имеет больше функций и функций.

Ищите добавление в корзину и вставьте его в контейнер.

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

Если вы хотите добавить ID SKU, вы можете сделать это так же, как мы добавили другой виджет. Здесь вставьте текстовый редактор и напишите SKU продукта.

Одна из важных частей страницы продукта - иметь кнопки социального обмена. Вы также можете добавить кнопку Social Share на эту страницу.

Ищите социальные значки и поместите их на страницу.

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

Точно так же вы можете добавить еще одну вещь здесь.

Если вы хотите дать основное описание, также добавьте текстовый редактор и напишите описание.

Я добавил основное описание вне контейнера, которое выглядит организованным и систематическим.

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

Итак, чтобы добавить связанный продукт сначала добавьте заголовок и поиск слайдера продукта в elemento addons.

Вот как вы можете добавить страницу продукта WooCommerce. Теперь пришло время увидеть предварительный просмотр страницы.

Я должен сказать вам, страница продукта может быть сделана и в нескольких простых шагах. Для этого нам понадобится виджет eddons addons.

Посмотрим, как это сделано.

Используйте страницу продукта, связанную с индивидуальным

После нажатия «Редактировать с элементом» , перейдите на левую сторону, где вы найдете виджеты Elementor.

Прокрутите вниз и доберитесь до аддонов Elemento .

Найдите продукты предварительной темы, перетащите виджет и остановитесь на странице.

Когда вы сбросите виджет, его настройка настройки появится на левой панели. Вы можете редактировать настройки и внешний вид аддона.

Но если вы хотите изменить внешний вид сайта, нажмите на стиль, кроме контента.

Раздел стиля позволяет изменять цвета, типографику и другие настройки дополнения.

После внесения всех изменений и настройки страницы нажмите «Опубликовать».

Теперь предварительно просмотрите свой сайт.

Здесь вы можете увидеть, на странице продукта WooCommerce мы добавили продукты с помощью виджета продукта Elemento Addons.

Продукты показаны на странице. Давайте предварительно просмотрите страницу единого продукта.

Вот и все, создана страница продукта WooCommerce.

Часто задаваемые вопросы

Заключение

Итак, мы узнали, как добавить пользовательскую страницу продукта WooCommerce с использованием Elementor. Поскольку мы также использовали плагин Elemento Addons, он сделал очень легко добавлять продукты и показать их на странице.

Elemento Addons имеет так много дополнений для построения веб -сайтов. Он известен не только виджетами, но и для особенностей виджетов.

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

Я надеюсь, что этот блог вам поможет. Тем не менее, если у вас есть какие -либо вопросы или предложения, дайте мне знать в разделе комментариев.
Вы можете подписаться на наш канал на YouTube , мы также загружаем там отличный контент, а также следуют за нами в Facebook и Twitter .

Откройте для себя больше статей

• Как изменить URL WordPress Login (пользовательский URL) в простых шагах
• Как создать пользовательскую страницу ошибки 404 в WordPress (простое руководство)
• Как добавить пользовательскую строку поиска в WooCommerce для более простых открытий продукта