Представляем дополнение WooCommerce Variation Swatches для ProductX

Опубликовано: 2022-06-02

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

Но в этом посте я собираюсь обсудить только надстройку Variation Swatches для ProductX . Это помогает сделать переменные продукты более привлекательными и удобными для пользователя. Однако ProductX также предлагает несколько надстроек и множество функций.

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

Содержимое скрыть
1 Что такое переменный продукт?
2 Что такое образцы вариантов WooCommerce
3 Зачем использовать образцы вариаций
4 Представляем аддон Variation Swatches для ProductX
5 Начните использовать аддон Variable Swatches.
6 Преобразование раскрывающихся списков в образцы
7 Создание образцов с атрибутами цвета и размера
8 Создание образцов изображений
9 Заключение

Что такое переменный продукт?

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

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

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

Что такое образцы вариантов WooCommerce

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

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

Зачем использовать образцы вариаций

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

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

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

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

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

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

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

Посмотреть демо

Представляем аддон Variation Swatches для ProductX

ProductX — это комплексное решение WooCommerce для тонкой разработки интернет-магазинов. Он имеет множество функций и несколько полезных дополнений. И WooCommerce Variation Swatches — одно из лучших дополнений ProductX.

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

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

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

Начните использовать аддон Variable Swatches.

Чтобы начать использовать аддон Variation Swatches, вам просто нужно установить плагин ProductX на свой сайт. Вы можете установить его из каталога плагинов WordPress. Затем вам нужно включить аддон. Для этого:

  • Перейдите к продуктуX
  • Нажмите на раздел «Дополнения».
  • Включите надстройку «Образцы вариаций»; это все
Turn on Variations Swatches Addon
Включите аддон Variations Swatches.

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

Преобразование раскрывающихся списков в образцы

Convert Dropdowns to Swatches
Преобразование раскрывающихся списков в образцы

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

Dropdown to Swatches
Выпадающий список образцов

Однако он не показывает цвета; это только показывает название цветов. Это потому, что цветам не присвоены имена. Разве мы не можем сделать это без особых усилий.

Product Attribute Type Selection
Выбор типа атрибута продукта
  • Перейдите в раздел атрибутов продукта.
  • Измените тип атрибута на цвет.
  • И Назначьте желаемые цвета в качестве значений.
Assign Desired Colors as Attribute Value
Назначьте желаемые цвета в качестве значения атрибута

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

Создание образцов с атрибутами цвета и размера

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

Вы можете создать новые атрибуты или просто изменить тип и настроить существующие атрибуты. Итак, мы должны создать и настроить Атрибут Цвета и Атрибут Размера. Затем мы должны настроить их с желаемыми значениями.

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

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

Add Attribute for Variations
Добавить атрибут для вариантов

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

Теперь перейдите в раздел «Вариации» и нажмите «Создать варианты со всеми атрибутами». Подожди немного; WooCommerce автоматически настроит варианты.

Create variations from all attributes
Создание вариантов из всех атрибутов

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

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

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

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

Color Swatches

Создание образцов изображений

Если вас не устраивают образцы цветов, вы также можете создавать изображения. Для этого перейдите в атрибут продукта. Затем измените тип атрибута цвета на изображение и назначьте изображения вместо цветов. Далее процесс такой же. Вы добавляете значение атрибута к любому продукту. Однако, если вы управляете полосами изображений из глобального атрибута, вам необходимо добавить в атрибут несколько изображений для нескольких продуктов. Итак, что делать? Не волнуйся. У ProductX также есть решение для этого.

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

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

Image Swatches

Вывод

Это все, что касается надстройки WooCommerce Variation Swatches для ProductX. Теперь вы можете начать использовать аддон и создавать красивые образцы. Если вы столкнетесь с какими-либо трудностями при создании образцов вариаций, не стесняйтесь комментировать ниже.

Нравится эта статья? Распространить слово
  • PostX Celebration - Up to 35% OFF

    PostX отмечает более 20 тысяч активных установок! [Отпразднуйте с нами!]

  • Gaming News Layout Banner

    Представляем шаблон новостей PostX Gaming [Кое-что для геймеров!]

  • how_to_change_add_to_cart_button_text

    Как изменить текст кнопки «Добавить в корзину» в WooCommerce?

  • Make WooCommerce Products Available for Pre-Orders

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