От автора: в WooCommerce есть архивные страницы и циклы, но, бывает, нужно показать чуть больше информации на главной странице и других архивных страницах магазина. В этом уроке я покажу, как добавить в WooCommerce описание товара на архивные страницы и отобразить его под заголовком товара.
Что вам потребуется
Для работы вам потребуется:
Установка WordPress
Редактор кода
Установленный и активированный WooCommerce
Добавленные товары – я взяла стандартные данные для товаров, которые предлагает WooCommerce; более подробно в этом руководстве
Активированная тема, совместимая с WooCommerce – я использую Storefront
Прежде чем приступить, настройте WooCommerce. Для добавления краткого описания товара вам необходимо выполнить следующие 3 шага:
Создать и активировать плагин для функции
Добавить функцию вывода краткого описания товара
Определить хук в WooCommerce, в который необходимо встроить функцию
Создание плагина
Создайте новый PHP файл в папке wp-content/plugins. Я назвала свой tutsplus-product-archive-short-descriptions.php. Откройте файл в редакторе кода. В верхнюю часть файла добавьте этот код:
1 2 3 4 5 6 7 8 9 10 |
<?php /** * Plugin Name: Tutsplus Display Product Short Descriptions in WooCommerce Archive pages * Plugin URI: //code.tutsplus.com/tutorials/woocommerce-adding-the-product-short-description-to-archive-pages--cms-25435 * Description: Add product short descriptions to the loop in product archive pages (requires WooCommerce to be activated) * Version: 1.0 * Author: Rachel McCollin * Author URI: //rachelmccollin.co.uk * */ |
Эти строки настроят плагин и передадут в WordPress всю информацию для активации. Перейдите на экран plugins в панели администратора WordPress и найдите плагин:
Активируйте его. Если плагин пустой, то вы не заметите разницы. Сейчас главная страница магазина выглядит так:
Написание функции вывода краткого описания
Краткое описание товаров в WooCommerce использует выдержки, как в обычных постах. Чтобы отобразить его, достаточно отобразить выдержку к посту. Добавьте код ниже в файл плагина:
1 2 3 4 5 |
function tutsplus_excerpt_in_product_archives() { the_excerpt(); } |
Вот так просто! Теперь функцию необходимо прицепить к правильному экшену, чтобы краткое описание выводилось в правильном месте на архивных страницах.
Вставка функции в правильный экшен
Давайте взглянем на файл в WooCommerce, отвечающий за вывод контента цикла на архивные страницы. Это файл content-product.php, и лежит он в папке templates в плагине WooCommerce.
Файл содержит ряд хуков, все они используются в WooCommerce для вывода различного контента.
Мы хотим отобразить выдержку под заголовком товара, поэтому нам нужен хук woocommerce_after_shop_loop_item_title. В файле content-product.php этот хук использует 2 функции woocommerce_template_loop_rating() и woocommerce_template_loop_price() с приоритетами 5 и 10 соответственно. Нам нужно прицепить нашу функцию с более высоким приоритетом, чтобы она запускалась позже. Я возьму с запасом 40.
Под функцией добавьте:
1 |
add_action( 'woocommerce_after_shop_loop_item_title', 'tutsplus_excerpt_in_product_archives', 40 ); |
Сохраните файл плагина и обновите страницу магазина в браузере. Теперь под товарами отображается краткое описание:
Эти описания слишком длинные. На настоящем сайте я использовала бы текст покороче. Зато так четко видно, что они отображаются на архивных страницах.
Заключение
WooCommerce почти весь контент отображает с помощью хуков, что упрощает добавление нового контента. Нужно лишь написать функцию и прикрепить ее к хуку. В этом уроке вы узнали, как добавить краткое описание товара на архивные страницы товаров. Можно добавить один-два условных тега в функцию, чтобы описание отображалось только на определенных страницах.
Автор: Rachel McCollin
Источник: //code.tutsplus.com/
Редакция: Команда webformyself.
Комментарии (1)