Вы здесь, чтобы включить образцы изображений атрибутов продукта WooCommerce для переменных продуктов в теме Flatsome?

Большой! Вы находитесь в нужном месте.

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

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

Как включить изображения атрибутов WooCommerce в теме Flatsome

Установка образцов вариантов атрибутов WooCommerce и плагина для фотографий аналогична установке других плагинов WordPress в теме Flatsome. Просто загрузите его и активируйте через Плагины >> Добавить новый . И выполните следующие шаги, чтобы настроить его.

Шаг 01: Создайте атрибут изображения

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

Оставьте поле Slug пустым. Система автоматически генерирует слаг атрибута. Выберите изображение из раскрывающегося списка Тип атрибута. Нажмите кнопку « Добавить атрибут », чтобы сохранить изменения.

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

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

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

В демонстрационных целях мы добавим три варианта. Рами , Кожа и Шерсть .

Чтобы создать вариант, вставьте заголовок варианта в поле « Имя» . Оставьте поле slug пустым, чтобы система автоматически сгенерировала его. Загрузите варианты изображений со своего компьютера или Media Libra, нажав кнопку Загрузить/Добавить изображение .

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

Как и список атрибутов. список вариантов изображения будет создан следующим образом.

Шаг 03: Включите вариацию атрибута в переменном продукте

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

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

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

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

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

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

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

Помните ! Не забудьте добавить цену в каждую вариацию, иначе вариации не будут видны в интерфейсе продукта.

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

Простые настройки

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

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

Расширенные настройки

Чтобы обеспечить максимальную гибкость, плагин WooCommerce Attribute Image Swatches предлагает несколько расширенных настроек, чтобы дать вам больше. Настройки позволяют контролировать ширину , высоту и размер шрифта вариаций образцов. Удивительная часть, которую мы опубликуем, — это опция « Поведение атрибутов» , позволяющая разумно представить варианты, которых нет в наличии. Атрибут Поведение может делать стандартные варианты размытия, скрытия и пересечения.

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

Настройка всплывающей подсказки и образца на страницах магазина/архива

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

Включить всплывающую подсказку

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

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

Включить образцы на страницах магазина

Чтобы включить образцы изображений на страницах магазина. Перейдите на страницу Архив/Магазин . Установите флажок Показывать в архиве , чтобы отображать образцы изображений на странице магазина/архива. Даже в теме Flatsome вы можете включить образцы до и после добавления в корзину кнопки в магазине в настройках Архивировать положение образцов. Кроме того, вы можете исключительно управлять размером образца варианта изображения из этих настроек.

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

Вывод:

Эта технология повысит удобство использования и конверсию вашего сайта. Если у вас возникнут проблемы при установке плагина образцов вариантов продукта WooCommerce в теме Flatsome, сообщите мне об этом в комментарии ниже. мы постараемся вам помочь. Если вам нужна какая-либо тема в желаемом требовании. Дайте мне знать в комментарии. мы постараемся рассказать об этом в следующем уроке.