Как вывести атрибуты товара Woocommerce ?

Как вывести атрибуты товара Woocommerce ?

Здравствуйте, дорогие друзья!

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

Как добавить атрибуты к товару Woocommerce?

Атрибуты используются в Woocommerce для фильтрации и для более наглядного отображения характеристик товара.

Для их добавления  нам нужно:

  1. 1 Открываем товар для редактирования или добавляем новый.
  2. 2 Переходим на вкладку «Атрибуты» внизу страницы и нажимаем на кнопку «Добавить».
  3. 3 Задаём имя и значение, а затем нажимаем на кнопку «Сохранить атрибуты»

  4. добавление атрибута товара Woocommerce
  5. 4 Если какой то атрибут уже создавался для другого товара, то можно выбрать его из раскрывающегося списка возле кнопки «Добавить». После выбора нажимаем на кнопку «Добавить».
  6. 5 Для ранее использованного атрибута список заданных значений так же можно выбирать из раскрывающегося списка, который появляется при клике на поле «Значение(я)» или воспользоваться кнопкой «Добавить новое» для добавления своего значения.
редактирование атрибута

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

По умолчанию  Woocommerce все добавленные значения выводит на вкладке «Детали» или «Характеристики»


вывод атрибутов Woocommerce

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

Вывод атрибутов товаров Woocommerce при помощи плагина


Плагин для Woocommerce
  1. 1 Переходим в раздел «Плпагины» — «Добавить новый» в адмистративной части WordPress и в строку поиска вставляем «WooCommerce Show Attributes», а затем устанавливаем его и активируем.
  2. 2 После активации открываем раздел «Woocommerce» –  «Настройки» и здесь переходим на вкладку «Товар».
  3. 3 На этой вкладке кликаем на ссылку «Show Attributes».

  4. плагин для вывода атрибутов Woocommerce
  5. 4 Для отображения атрибутов на странице товара справа от основного изображения ставим галочку возле пункта «Show Attributes on Product Page».

  6. настройки плагина
  7. 5 Чтобы вывести их на странице категории выбираем один из предложенных вариантов из раскрывающегося списка «Show Attributes on Shop Pages»

  8. вывод атрибутов на странице магазина woocommerce

    No – не отображать.

    Show them above the price
    – вывести атрибуты  товара над ценой.

    Show them above «Add to Cart» — вывести  над кнопкой «Купить».

  9. 6 Другие настройки плагина:
  10. Show Attributes on Cart Page –  позволяет отображать их на странице корзины.

    Show Attributes on Customer Order Emails – показать атрибуты  в письме покупателю, в счетах и квитанциях.

    Show Attributes on Admin New Order Email — показать  в письме администратору, в счетах и квитанциях.

    Show Attributes on Admin Order Details Page – вывести атрибуты товара в административной части в деталях заказа.

    Так же плагин имеет ряд дополнительных настроек. Я рассмотрела только основные.

  11. 7 После задания параметров нажимаем на кнопку «Сохранить изменения» внизу страницы.

Вывод атрибутов товаров Woocommerce без плагина

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

Для этого делаем следующее:

  1. 1 Подключаемся к сайту через FTP клиент или используя веб-интерфейс в панели управления хостингом.
  2. 2 Открываем файл
  3. wp-content/plugins/woocommerce/templates/loop/price.php
  4. 3 В самом конце добавляем код:

Вместо «material» указываем слаг нужного атрибута товара.

Слаг можно посмотреть в разделе «Товары» — «Атрибуты» в столбце «Слаг».


слаг для атрибутов Woocommerce

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


вывод атрибутов на странице категоии и магазина

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

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

Успехов вам и вашим проектам!

С уважением Юлия Гусарь

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

Читайте также:

comments powered by HyperComments

2 комментария

  1. Очень интересная статья, лично для меня //impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif

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

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

//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif