Полное руководство по разумному использованию образцов вариантов WooCommerce [2022]

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

Чем проще вы сделаете покупателям выбор товаров, тем выше конверсия.

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

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

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

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

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

Прочитав это руководство, вы сможете:

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

Итак, давайте углубимся в это.

Когда и зачем использовать разные образцы вариаций?

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

Образцы цветовых вариаций

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

Затем вы можете использовать образцы цветовых вариаций, чтобы ваши клиенты могли выбирать из вариантов.

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

Увидите разницу сами:

Дефолт

Использование образцов цветовых вариаций

Как видите, цвета хорошо видны. Так человеку будет проще и практичнее сделать выбор.

Образцы вариантов изображения

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

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

Вот как это становится удивительно:

Дефолт

Использование образцов вариантов изображения

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

Подсказка:
Всегда идеально иметь изображение со всеми вариантами вместе в качестве избранного изображения для продукта. Если у вас его нет, используйте изображение самого популярного варианта в качестве рекомендуемого изображения.

Образцы вариантов этикетки

Некоторые факторы, такие как размер или длина, трудно изобразить визуально.

Например, если вы продаете футболку размеров L (большой), M (средний) и S (маленький), у вас нет возможности визуально показать фактические размеры.

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

Вот как это все еще будет иметь значение:

Дефолт

Использование образцов вариантов этикетки

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

Образцы текстовых вариаций

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

Например, допустим, вы продаете шапку детского, подросткового и взрослого размера.

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

Преимущество здесь в том, что все доступные варианты будут перечислены перед покупателем, и он/она сможет сделать выбор, просто нажав на кнопку(и).

Вот предварительный просмотр:

Дефолт

Использование образцов текстовых вариаций

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

Как вы видели, изменение вариантов меню на образцы делает его намного более привлекательным и привлекательным.

Теперь, если вы хотите реализовать эти достопримечательности, вы можете легко сделать это с помощью плагина Variation Swatches For WooCommerce.

Образцы вариаций для WooCommerce

Variation Swatches for WooCommerce — это простой плагин, с помощью которого вы можете легко изменить базовый раскрывающийся список вариантов на образцы кнопок. Это займет всего несколько кликов.

Позвольте мне дать вам пошаговое руководство о том, как легко настроить образцы вариаций в своем интернет-магазине с помощью образцов вариаций для WooCommerce.

Как изменить раскрывающийся список на образцы кнопок для вариантов WooCommerce?

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

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

Вот как вы можете сделать это шаг за шагом.

1. Сначала установите и активируйте Variation Swatches для WooCommerce.

На панели администратора вы получите новое меню под названием «Образцы». Нажмите здесь.

Вы попадете на панель инструментов плагина.

2. Установите базовый стиль и дизайн образца

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

Кроме того, вы сможете установить размер шрифта.

Настройте эти параметры по своему усмотрению.

3. Перейдите на вкладку «Элементы управления»

Нажмите на вкладку «Управление» слева.

На вкладке «Управление» будет много параметров.

4. Включите раскрывающийся список для образцов кнопок

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

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

Выбор раскрывающегося списка по умолчанию

Образцы кнопок для вариантов

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

Как настроить образцы цвета WooCommerce для цветовых вариаций

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

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

Чтобы настроить образцы цветов, выполните следующие действия.

1. Включите раскрывающийся список для образцов кнопок

Сначала выполните шаги, чтобы включить раскрывающийся список кнопок, как описано ранее.

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

2. Перейдите к созданным вами атрибутам

Термины вариации обычно группируются в атрибуты.

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

С правой стороны вы можете увидеть список созданных атрибутов, которые у вас есть.

3. Измените желаемый атрибут как тип цвета

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

Вы получите варианты «Редактировать» или «Удалить». Нажмите «Изменить», и вы попадете на страницу «Редактировать атрибут».

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

Нажмите на него и выберите опцию «Цвет».

Затем нажмите кнопку «Обновить» ниже.

4. Установите образцы цветов для вариантов условий

После того, как вы установили тип атрибута «Цвет», теперь вы можете назначать образцы цвета вариантным терминам в этом атрибуте.

Вернитесь в « Панель инструментов»> «Продукты»> «Атрибуты », и справа от атрибута (вы только что установили тип цвета) вы получите возможность «Настроить термины».

Нажмите «Настроить условия», и вы попадете на следующую страницу:

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

Наведите указатель мыши на один цветовой термин, и вы найдете опцию «Редактировать».

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

Нажмите «Выбрать цвет», и вы получите возможность назначить цвет.

Выберите подходящий цвет и снова нажмите «Выбрать цвет».

Затем нажмите кнопку «Обновить» ниже.

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

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

Использование образцов цветовых вариаций

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

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

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

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

1. Включите раскрывающийся список для образцов кнопок

Сначала выполните шаги, чтобы включить раскрывающийся список кнопок, как описано ранее.

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

2. Перейдите к созданным вами атрибутам

Термины вариации обычно группируются в атрибуты.

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

С правой стороны вы можете увидеть список созданных атрибутов, которые у вас есть.

3. Назначьте желаемый атрибут в качестве типа изображения

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

Вы получите варианты «Редактировать» или «Удалить». Нажмите «Изменить», и вы попадете на страницу «Редактировать атрибут».

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

Нажмите на него и выберите опцию «Изображение».

Затем нажмите кнопку «Обновить» ниже.

4. Установите образцы цветов для вариантов условий

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

Вернитесь в « Панель инструментов»> «Продукты»> «Атрибуты » и справа от атрибута (вы только что установили тип изображения) вы получите возможность «Настроить условия».

Нажмите «Настроить условия», и вы попадете на следующую страницу:

Здесь вы можете либо добавить термины для вариантов, либо справа вы можете увидеть варианты терминов, которые у вас уже есть (под этим атрибутом).

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

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

Нажмите «Загрузить/Добавить изображение», и вы можете либо загрузить изображение, либо выбрать изображение из своей медиатеки.

Выберите подходящее изображение и нажмите кнопку «Обновить» ниже.

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

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

Использование образцов вариантов изображения

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

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

И, как вы видели ранее, образцы меток более броские по сравнению с обычным выбором в раскрывающемся списке.

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

1. Включите раскрывающийся список для образцов кнопок

Сначала выполните шаги, чтобы включить раскрывающийся список кнопок, как описано ранее.

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

2. Перейдите к созданным вами атрибутам

Термины вариации обычно группируются в атрибуты.

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

С правой стороны вы можете увидеть список созданных атрибутов, которые у вас есть.

3. Назначьте желаемый атрибут в качестве типа метки

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

Вы получите варианты «Редактировать» или «Удалить». Нажмите «Изменить», и вы попадете на страницу «Редактировать атрибут».

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

Нажмите на нее и выберите опцию «Ярлык».

Затем нажмите кнопку «Обновить» ниже.

4. Установите образцы этикеток для вариантов условий

После того, как вы установили тип атрибута «Ярлык», теперь вы можете назначать образцы меток вариантным терминам в этом атрибуте.

Вернитесь в « Панель инструментов»> «Продукты»> «Атрибуты », и справа от атрибута (вы только что установили тип метки) вы получите возможность «Настроить термины».

Нажмите «Настроить условия», и вы попадете на следующую страницу:

Здесь вы можете либо добавить термины для вариантов, либо справа вы можете увидеть варианты терминов, которые у вас уже есть (под этим атрибутом).

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

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

Введите метку, которую вы хотите отобразить.

Затем нажмите кнопку «Обновить» ниже.

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

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

Использование образцов вариантов этикетки

Вывод

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

И самое приятное то, что это очень легко реализовать, и это можно сделать всего за несколько кликов с помощью плагина Variation Swatches для WooCommerce.

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