Woocommerce вариации. Делаем красивое отображение вариаций товара

Сегодня очередной пост про woocommerce. Очень уж он стал популярный в сфере интернет-торговли. Очень много магазинов как в рунете, так в во всей сети сделаны в связке вордпресс+вукоммерс. Буквально на днях я затрагивал тему атрибутов, а именно отображение цены «от». Сегодня хочется рассказать как сделать красивое отображение атрибутов в вариациях.

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

На помощь в этом деле нам приходит плагин WooCommerce Variation Swatches. Без проблем его можете найти в поиске по репозиторию непосредственно из админки вашего сайта. Ну так вот, находим, устанавливаем.

Далее переходим в раздел Товары-Атрибуты на вашем сайте. Выбираем «изменить» у нужного атрибута и там у нас в редактировании добавилось поле «Тип», в котором несколько видов отображение атрибута. В моём случае (вернее в случае моего клиента) я выставил тип label, чтобы происходило отображение вот таким образом:

Вы можете поэксперементировать с настройками в атрибутах. Кому-то будет актуально выводить как «цвет» и соответственно в настройках вариаций вы сможете добавлять цвета. Будет красиво и функционально.

Вот и всё) Не забываем делиться статьёй и подписываться на обновления моего блога)

С уважением, фрилансер-вебмастер Александр Шульгинов

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

Также всегда можете обратиться ко мне за консультацией

e-mail: shonalex@yandex.ru

Skype: webojam

Viber, WhatsApp: +79043998634

Подпишитесь на рассылку

Чтобы быть в курсе обновлений блога, новостей по вордпресс и сайтостроительству

1 комментарий. Оставить новый

  • Добрый день. А как вывести список доступных размеров под фото товара в общем каталоге? Неудобно при просмотре товаров (одежда) постоянно проваливаться в карточку.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Заполните поле
Заполните поле
Пожалуйста, введите корректный адрес email.

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

Обо мне

Работаю с сайтами с 2010 года.
Более 500 выполненных проектов
Специализируюсь преимущественно на сайтах-визитках, блогах и небольших интернет магазинах.
Подробнее

Меню