Woocommerce аккордеон для товаров

YITH WooCommerce Category Accordion Premium v1.0.33 — список категорий WooCommerce

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

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

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

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

Дополнительные ссылки на скачивание ТОЛЬКО для зарегистрированных

Источник

Как добавить информационный аккордеон в продукт WooCommerce с помощью Divi

Divi: самая простая тема WordPress для использования

Divi: Лучшая тема WordPress всех времен!

Более Загрузка 901.000, Divi — самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62. [Рекомендуется]

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

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

обследование

Вот предварительный просмотр дизайна, который мы создадим в этом уроке.

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

Commencer

Для начала вам нужно будет сделать следующее:

• Если вы еще этого не сделали, установите и активируйте установленную тему Divi (или плагин Divi Builder, если вы не используете тему Divi).
• Установите и активируйте плагин WooCommerce. Если вы настраиваете WooCommerce впервые, вам нужно будет запустить мастер базовой настройки, чтобы подготовить свой магазин. После этого вы готовы добавлять новые продукты.
• Создайте новый продукт, как показано ниже.

Настройка образца товара

Чтобы настроить образец продукта для этого руководства, перейдите в раздел «Продукты»> «Добавить новый». Дайте продукту название «Массаж (один сеанс)» и нажмите, чтобы использовать Divi Builder.

Затем обновите следующие параметры страницы продукта и информацию о продукте:

1. В разделе Параметры страницы Divi выберите макет Без боковой панели.

2. Добавить / выбрать категорию продукта

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

4. Добавьте содержание описания.

5. В разделе «Данные о продукте» измените тип продукта на «Переменный продукт».

6. Добавьте атрибут с именем «Тип» со следующими значениями: Шведский | Горячий камень | Ароматерапия | Глубокая ткань. Обязательно выберите «Используется для вариантов».

Легко создайте свой сайт с Elementor

Elementor позволяет легко создать любой дизайн сайта с профессиональным дизайном. Прекратите платить дорого за то, что вы можете сделать сами. [Free]

7. Затем на вкладке «Варианты» в разделе «Переключатель данных о продукте» используйте раскрывающийся список для создания вариаций всех атрибутов.

8. Выберите «Установить обычные цены» в раскрывающемся меню, чтобы установить обычную цену для трех переменных.

9. В диалоговом окне введите значение «50» и выберите «ОК».

10. По завершении сохраните или опубликуйте продукт.

Теперь вы готовы приступить к разработке макета с пользовательским аккордеоном.

Создание аккордеона Product Info с динамическим контентом в Divi

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

Вот как это сделать.

Сначала щелкните, чтобы использовать Divi во внешней системе для развертывания визуального генератора. Затем удалите модуль Woo Tabs.

Затем добавьте новый модуль Accordion, чтобы заменить вкладки.

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

Введите название «О товаре».

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

Выберите «Описание продукта» из списка динамического содержимого.

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

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

• Название: Технические характеристики

Затем добавьте динамическое содержимое «Дополнительная информация о продукте» в тело.

Как только содержание второго аккордеона будет готово, добавьте новый элемент аккордеона и обновите настройки аккордеона следующим образом:

• Название: Дополнительная информация

Затем добавьте динамическое содержимое «Обзоры продуктов» в тело, чтобы встроить элемент / содержимое обзора продукта.

ПРИМЕЧАНИЕ. Убедитесь, что вы добавили хотя бы один обзор продукта, чтобы увидеть контент на действующей странице.

Соглашение о дизайне продукта и содержании с Divi

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

Откройте настройки модуля Accordion и обновите следующее:

• Цвет значка: # ff9375
• Использовать размер шрифта значка: ДА
• Размер шрифта иконки: 26px

• Переключить цвет фона: #ffffff
• Открыть текстовое название Цвет: #ff9375
• Название текста: #222222
• Название шрифта: Лато
• Название шрифта: жирный
• Стиль шрифта заголовка: TT
• Размер текста заголовка: 20px
• Пространство букв заголовка: 0.2em
• Высота строки заголовка: 2em

• Body Font: Лато
• Размер основного текста: 16px
• Рост тела: 1.8em

• Цвет текста ссылки: #ff9375

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

• Цвет текста неупорядоченного списка: # ff9375
• Тип неупорядоченного списка: Круг
• Отступ элементов неупорядоченного списка: 5%

• Ширина границы: 0px
• Ширина верхней границы: 1px
• Цвет верхней границы: #222222

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

На вкладке Advanced добавьте следующий CSS в элемент Toggle:

Теперь посмотрим на окончательный дизайн аккордеона с информацией о продукте.

Окончательные корректировки макета

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

После того, как сделано, вот окончательный результат.

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

ПРИМЕЧАНИЕ. Цвет по умолчанию для большинства элементов продукта WooCommerce в Divi наследуется от значения вторичного цвета в настройках темы. Возможно, будет проще обновить этот вторичный цвет после того, как цвета будут изменены woo.

Заключительные мысли

Как мы узнали, Woo Mods — не единственное, что можно использовать для извлечения динамической информации о продукте. Аккордеон с информацией о продукте — отличный пример того, как вы можете использовать любой модуль Divi для отображения информации о продукте уникальным и кратким образом. Не стесняйтесь исследовать новые захватывающие дизайны аккордеонов для страниц ваших продуктов. И, конечно же, вы можете использовать несколько рокер-модулей вместо аккордеона для достижения аналогичных результатов.

Источник

YITH WooCommerce Category Accordion 1.0.39

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

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

Источник

WooCommerce Category Accordion v1.2.1 — вывод категорий в виде аккордеона для WooCommerce

скачать архив для WordPress | Размер: 0.419 МБ

Плагин WooCommerce Category Accordion позволяет вам представлять категории и подкатегории продуктов WooCommerce в аккордеонах с возможностью развернуть / свернуть их.

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

Особенности:

• Переключение состояний развернутый / свернутый для аккордеона.
• Работает как виджет или шорткод.
• Активация или деактивация подсчета продуктов.
• Опция показать / скрыть пустые категории.
• Опция сортировки по ID, классу или псевдониму (slug).
• Сортировка по возрастанию / убыванию.
• Возможность исключения определенной категории.
• Выделение текущей категории.
• Выделение текущей категории продукта.
• Контроль на скоростью открытия / закрытия.
• Сортировка категорий по порядку или другим признакам.
• Опция «уровень» категории.
• Поддержка неограниченного числа категорий и подкатегорий.
• Легкость установки и настройки.
• Возможность перевода на другой язык.
• Кроссбраузерность.

Плагин WooCommerce Category Accordion предлагает простую навигацию по товарам и категориями вашего магазина.

Нашли опечатку или неточность в описании? — Выделите фрагмент текста мышкой и нажмите Ctrl + Enter

Источник