Здравствуйте, друзья!
Сегодня я хочу поделиться с вами небольшим, но полезным кодом для вашего магазина на WooCommerce. Данный код позволяет отображать подкатегории вместе с количеством товаров в них над списком товаров на странице категории. Таким образом, пользователи смогут увидеть подкатегории в самом начале и посетить их, не прокручивая через все товары.
Итак вступление:
WooCommerce — один из самых популярных плагинов для интернет-магазинов на платформе WordPress, предоставляющий гибкие возможности по настройке и управлению магазинами. Однако иногда возникает необходимость дополнительной кастомизации отображения элементов на сайте. В этой статье я покажу вам, как разделить подкатегории и товары на странице категории.
История кода началась, когда клиенту сайта на WordPress + WooCommerce потребовалось отображать на страницах категорий не только товары, но и дочерние категории. В настройках WooCommerce есть такая возможность и клиент естественно ей воспользовался и какого его было удивление, когда категории были смешаны с товарами, т.е. шли сначала категории, кстати у него были они без изображений, а затем следом, без переноса или какого-то явного разделения шли товары. Конечно ему это не понравилось. Так вот как убрать изображения для категорий — это отдельная тема, решается быстро. А с второй задачей, а именно разделить подкатегории и товары на странице категории.
В интернете есть решения, но они требуют изменения шаблона WooCommerce или изменения темы. Но хотелось отойти от таких изменений, т.к. WooCommerce может обновить свои шаблоны и нужно постоянно отслеживать какие-то новшества, совместимость, и тема была тоже обновляемая, что могло переписать при обновлении код. В общем я оформил в виде плагина, чтобы владелец мог в случае чего отключить изменения. Для вас же представлю код, который нужно вставить в functioins.php вашей темы (как сделать плагин, найдите статью на этом сайте или в интернете).
Вот сам код:
// Показать подкатегории вверху страницы категории раздельно от товаров
// Разделяем товары от подкатегорий
add_action( 'woocommerce_before_shop_loop', 'wplife_show_category_subcategories', 10 );
function wplife_show_category_subcategories() {
$show_categories = get_option('woocommerce_category_archive_display');
if (!$show_categories == 'both') { // Режим показа категорий и товаров отключен
// проверяем, находимся ли мы на странице категории Woo
if ( is_product_category() ) {
// получаем текущую категорию
$current_category = get_queried_object();
// проверяем, есть ли у текущей категории подкатегории
$subcategories = get_terms( array(
'taxonomy' => 'product_cat',
'parent' => $current_category->term_id,
'hide_empty' => true,
) );
if ( $subcategories ) {
echo '<ul class="products">';
foreach ( $subcategories as $subcategory ) {
// Получаем количество товаров в подкатегории
$subcategory_info = get_term($subcategory->term_id, 'product_cat');
$product_count = $subcategory_info->count;
$count_text = _n( '%s product', '%s products', $product_count, 'woocommerce' );
echo '<li class="product-category product"><a href="'.get_term_link($subcategory).'"><h2 class="woocommerce-loop-category__title">'.$subcategory->name.' <mark class="count">'.sprintf($count_text, $product_count).'</mark></h2></a></li>';
}
echo '</ul>';
}
}
}
}Итак, давайте разберемся, как это работает.
add_action( 'woocommerce_before_shop_loop', 'wplife_show_category_subcategories', 10 );Здесь мы добавляем действие woocommerce_before_shop_loop, которое позволяет нам вставить наш код перед началом вывода списка товаров в магазине. Функция wplife_show_category_subcategories будет вызвана, и ей передается приоритет 10.
function wplife_show_category_subcategories() {
$show_categories = get_option('woocommerce_category_archive_display');
Внутри функции мы получаем текущую настройку отображения подкатегорий и товаров.
if (!$show_categories == 'both') { // Режим показа категорий и товаров отключенМы проверяем, включен ли режим, когда нужно показывать и подкатегории, и товары одновременно. Если это условие истинно, код будет выполняться дальше.
if ( is_product_category() ) {Теперь мы проверяем, находимся ли мы на странице одной из категорий товаров WooCommerce.
$current_category = get_queried_object();Здесь мы получаем данные текущей категории.
$subcategories = get_terms( array(
'taxonomy' => 'product_cat',
'parent' => $current_category->term_id,
'hide_empty' => true,
) );Получаем массив подкатегорий, принадлежащих текущей категории.
if ( $subcategories ) {Если подкатегории существуют, код продолжит выполнение.
echo '<ul class="products">';Создаем блок со списком элементов.
foreach ( $subcategories as $subcategory ) {
// Получаем количество товаров в подкатегории
$subcategory_info = get_term($subcategory->term_id, 'product_cat');
$product_count = $subcategory_info->count;
$count_text = _n( '%s product', '%s products', $product_count, 'woocommerce' );Здесь мы проходимся по каждой подкатегории, получаем информацию о ней, количество товаров и подготовливаем текст с числом товаров, используя функцию WooCommerce _n().
echo '<li class="product-category product"><a href="'.get_term_link($subcategory).'"><h2 class="woocommerce-loop-category__title">'.$subcategory->name.' <mark class="count">'.sprintf($count_text, $product_count).'</mark></h2></a></li>';
Выводим ссылку на подкатегорию с названием и количеством товаров в ней.
}
echo '</ul>';
}
}
}
}
Закрываем блок и функцию.
Теперь вы знаете, как добавить код для отображения подкатегорий на странице категории товаров в вашем магазине на WooCommerce с количеством товаров в них. Надеюсь, что эта статья была полезной для вас.
Код будет работать, если в настройках WooCommerce для отображения категорий, вы выберете «отображать категории и товары». Классы я постарался сохранить стандартные от WooCommerce. Тестировал на теме Astra.
Всего доброго и удачных продаж!