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

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

Думаете, почему образцы невероятны, верно?

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

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

Я предполагаю, что у вас установлена ​​тема OceanWP. Чтобы включить образцы в ваших переменных продуктах, сначала установите плагин WooCommerce Variation Swatches .

Живая демонстрация | Скачать плагин WooCommerce Variation Swatches

Установка образцов вариантов WooCommerce

Вы также можете загрузить плагин WooCommerce Variation Swatches с серверной части вашего сайта. Выберите «Начать установку плагинов» из главного уведомления администратора.

Установите и активируйте плагин WooCommerce Variation Swatches и Ocean Extra .

Если вы не получили всплывающее уведомление об установке плагина swatches, перейдите в « Плагины» >> «Добавить новый» . Найдите образцы вариантов WooCommerce в поле поиска. Установите и активируйте плагин WooCommerce Variation Swatches от Emran Ahmed .

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

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

После установки плагина Woocommerce Variation Swatches and Photos в вашей теме OceanWP. Пришло время настроить этот плагин для ваших вариативных продуктов. Есть два способа установить этот плагин.

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

В этом уроке я собираюсь описать оба способа.

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

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

До

После

Шаг 01: Редактирование атрибута

Перейдите в Продукты >> Атрибуты . Все существующие глобальные атрибуты перечислены в разделе атрибутов. После установки плагина WooCommerce Variation Swatches добавляется поле Type . По умолчанию он будет отображать выбор под заголовком « Тип ».

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

Для демонстрационных целей были созданы атрибуты Fabrics, Pattern и Label . Добавьте тип атрибута « Цвет » для атрибута « Узор », тип атрибута « Изображение » для атрибута « Ткань » и тип атрибута « Кнопка » для атрибута « Ярлык ».

Чтобы установить тип атрибута цвета в атрибут Pattern , щелкните Edit .

Выберите Тип цвета из раскрывающегося списка типов.

Вернуться Продукты >> Атрибуты . Отредактируйте атрибут ткани , например атрибут узора .

Вернуться Продукты >> Атрибуты снова. Отредактируйте атрибут Label, такой как атрибут Fabrics и Pattern .

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

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

Варианты для атрибута Label выглядят нормально, но варианты для атрибута Pattern должны определять цвета, а варианты для атрибута Fabrics должны добавлять изображения.

Шаг 02: Редактирование вариантов

Чтобы определить цвета как вариации внутри атрибута Pattern . Перейдите в раздел Продукты >> Атрибуты . Выберите Настроить термины из атрибута Patterns .

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

Для демонстрации выберите ссылку « Изменить » для зеленого варианта.

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

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

После обновления вариантов атрибута шаблона отредактируйте атрибут Fabrics , выбрав « Настроить термины как атрибут шаблона ».

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

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

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

Настройка образцов вариаций для новых переменных продуктов

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

Шаг 01: Создайте глобальные атрибуты и варианты

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

Когда атрибут цвета, изображения и этикетки Pattern , Fabrics , Label и Size создан успешно, он создает список атрибутов слева.

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

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

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

Создайте варианты Chambray, Corduroy и Embossed для атрибутов изображения, и они появятся слева.

Создайте варианты для атрибутов Radio и Label, таких как варианты изображения и цвета.

Шаг 02: Отображение образцов на странице с переменным продуктом

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

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

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

Теперь перейдите на вкладку «Вариации ». Нажмите на раскрывающийся список « Добавить вариант» . Здесь возникает два варианта. Первый — « Добавить вариант» , а второй — « Создать варианты из всех атрибутов».

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

Вывод

Я попытался охватить каждый шаг по установке плагина WooCommerce Variation Swatches в тему OceanWP. Дайте мне знать в поле для комментариев, если вам нужна дополнительная помощь.