Отображение категорий, подкатегорий и товаров отдельными списками в WooCommerce

Отображение категорий, подкатегорий и товаров отдельными списками в WooCommerce

От автора: WooCommerce предлагает несколько вариантов отображения контента на архивных страницах: товары, категории (на главной странице магазина) или подкатегории (на страницах категорий) и товары, и категории. При настройке магазина я обычно выбираю третий вариант – WooCommerce товар списком и категории/подкатегории. Так посетители моего магазина могут выбирать товары прямо с домашней страницы или задать более четкий поиск через архив категорий товаров.

Отображение категорий, подкатегорий и товаров отдельными списками в WooCommerce

Тем не менее, у этого подхода есть один минус: категории/подкатегории отображаются вместе без какого-либо разделения. То есть если у ваших товаров изображения разных размеров, макет страницы будет выглядеть просто ужасно. И даже если изображения одного размера, но хотя бы в одной строке архивной страницы содержатся категории и товары, то кнопка «Добавить в корзину» для категорий сбивает всю верстку. Не все элементы одного размера.

В этом уроке я покажу, как отобразить категории в отдельном списке перед товарами. Для этого нам необходимо выполнить 4 шага:

Найти в WooCommerce код, отвечающий за вывод категорий и подкатегорий на архивные страницы в виде списка

WooCommerce: Быстрый старт, первые результаты

Создайте ваш интернет-магазин на WooCommerce с полного нуля уже сегодня!

Узнать подробнее

Создать плагин для нашего кода

Написать функцию вставки категорий и подкатегорий перед списком товаров

Стилизовать выводимую разметку

Прежде чем приступить вам необходимо иметь установку WooCommerce с добавленными товарами, категориями и подкатегориями.

Что вам понадобится

Для выполнения урока вам потребуется:

Установка WordPress

Редактор кода

Установленный и активированный WooCommerce

Товары – я импортировала шаблонные товары из WooCommerce

Активированная тема, совместимая с WooCommerce – я использую Storefront

Прежде чем приступить: стандартные опции

Давайте взглянем, что дает нам WooCommerce по умолчанию. Я начала с добавления изображений в категории и подкатегории товаров, так как шаблонные данные WooCommerce идут без них. Я просто использовала по одному изображению товаров для каждой категории/подкатегории (см. скриншот ниже):

Отображение категорий, подкатегорий и товаров отдельными списками в WooCommerce

Теперь давайте посмотрим, как WooCommerce отображает категории и подкатегории товаров на архивных страницах. Если еще не перешли, перейдите в WooCommerce > Settings, вкладка products, опция display. Для Shop Page Display и Default Category Display выберите show both:

Отображение категорий, подкатегорий и товаров отдельными списками в WooCommerce

Кликните save changes, чтобы сохранить настройки, и перейдите на страницу магазина. Мой выглядит так:

Отображение категорий, подкатегорий и товаров отдельными списками в WooCommerce

У меня все смотрится хорошо, так как у меня всего 3 категории товаров, а размеры категорий такие же, как у товаров. Но вот так выглядит один из архивов категорий товаров:

Отображение категорий, подкатегорий и товаров отдельными списками в WooCommerce

В этой категории содержится 2 подкатегории, поэтому первый товар расположен с ними на одной строке в сетке из трех элементов по ширине. Я хочу выделить мой категории/подкатегории, просто отделив их от списка товаров. Давайте же приступим.

Находим код WooCommerce, отвечающий за вывод категорий и товаров в архивы

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

Для отображения архивных страниц WooCommerce использует файл archive-product.php в папке templates. В этом файле лежит следующий код, который выводит категории и товары:

<?php
 /**
 * woocommerce_before_shop_loop hook
 *
 * @hooked woocommerce_result_count - 20
 * @hooked woocommerce_catalog_ordering - 30
 */
 do_action( 'woocommerce_before_shop_loop' );
?>
 
<?php woocommerce_product_loop_start(); ?>
 
 <?php woocommerce_product_subcategories(); ?>
 
 <?php while ( have_posts() ) : the_post(); ?>
 
 <?php wc_get_template_part( 'content', 'product' ); ?>
 
 <?php endwhile; // end of the loop. ?>
 
<?php woocommerce_product_loop_end(); ?>

Здесь есть функция woocommerce_product_subcategories(), которая выводит категории или подкатегории перед запуском цикла, выводящего товары.

Функция подключаемая, т.е. мы можем переписать ее в нашей теме. К сожалению это не совсем работает, так как WooCommerce содержит встроенные стили с очисткой элементов, которые появляются в начале строки со стандартным отображением.

Вместо этого мы выключим отображение категорий и подкатегорий на архивных страницах, чтобы там отображались только товары. Далее создадим новую функцию вывода категорий/подкатегорий товаров и подключим ее к экшену woocommerce_before_shop_loop. Нашей функции необходимо задать высокий приоритет, чтобы она запускалась последней.

WooCommerce: Быстрый старт, первые результаты

Создайте ваш интернет-магазин на WooCommerce с полного нуля уже сегодня!

Узнать подробнее

Обратите внимание: так как WooCommerce очищает стили каждого третьего товара в списке, то мы не сможем использовать функцию woocommerce_product_subcategories() или ее отредактированную версию для отображения категорий. Она будет чистить третью, шестую (и т.д.) категорию или товар в списке, даже при вызове этой функции для раздельного отображения категорий. Ее можно переписать, но проще написать свою функцию. Давайте создадим плагин.

Создание плагина

В папке wp-content/plugins создайте новую папку с уникальным названием. Я назвала свою папку tutsplus-separate-products-categories-in-archives. В ней создайте новый файл с уникальным названием. Я использовала то же самое имя tutsplus-separate-products-categories-in-archives.php. Откройте файл и вставьте следующий код:

<?php
/**
 * Plugin Name: Tutsplus display WooCommerce products and categories/subcategories separately in archive pages
 * Plugin URI: http://code.tutsplus.com/tutorials/woocommerce-display-product-categories-subcategories-and-products-in-two-separate-lists--cms-25479
 * Description: Display products and catgeories / subcategories as two separate lists in product archive pages
 * Version: 1.0
 * Author: Rachel McCollin
 * Author URI: http://rachelmccollin.co.uk
 *
 *
 */

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

Написание своей функции

Теперь давайте напишем свою функцию. Но перед этим выключите отображение категорий в панели администратора. Перейдите WooCommerce > Settings во вкладку Products и выберите опцию Display. Для опций Shop Page Display и Default Category Display установите Show products. Сохраните изменения.

Теперь ваша страница магазина должна выглядеть примерно так:

Отображение категорий, подкатегорий и товаров отдельными списками в WooCommerce

В файл плагина вставьте этот код:

function tutsplus_product_subcategories( $args = array() ) {
 
 }
}
add_action( 'woocommerce_before_shop_loop', 'tutsplus_product_subcategories', 50 );
 

Внутрь функции вставьте этот код:

$parentid = get_queried_object_id();
 
$args = array(
 'parent' => $parentid
);
 
$terms = get_terms( 'product_cat', $args );
 
if ( $terms ) {
 
 echo '<ul class="product-cats">';
 
 foreach ( $terms as $term ) {
 
 echo '<li class="category">'; 
 
 woocommerce_subcategory_thumbnail( $term );
 
 echo '<h2>';
 echo '<a href="' .  esc_url( get_term_link( $term ) ) . '" class="' . $term->slug . '">';
 echo $term->name;
 echo '</a>';
 echo '</h2>';
 
 echo '</li>';
 
 
 }
 
 echo '</ul>';
 
}

Что делает эта функция:

Функция определяет текущий запрошенный объект и сохраняет его ID в переменную $parentid.

Функция get_terms() определяет родительские термины у текущего запрошенного объекта. Если это домашняя страница, вернутся категории верхнего уровня; если это архив категорий, вернутся подкатегории.

Затем проверка, есть ли какие-либо термины перед открытием цикла foreach и тега ul.

Под каждый термин создается отдельный тег li, а функция woocommerce_subcatgeory_thumbnail() выводит изображения категорий. Следом идет название категории в ссылке на архив.

Сохраните файл и обновите страницу магазина. Моя главная страница выглядит так:

Отображение категорий, подкатегорий и товаров отдельными списками в WooCommerce

Категории отображаются, но им нужно написать стили. Приступим.

Стилизация списков категорий

Теперь необходимо добавить стили. В наш плагин необходимо добавить файл стилей, который нужно поставить в очередь. В папке плагина создайте папку CSS, внутри создайте файл style.css. Код ниже добавьте в файл плагина перед созданной нами функцией:

function tutsplus_product_cats_css() {
 
 /* register the stylesheet */
 wp_register_style( 'tutsplus_product_cats_css', plugins_url( 'css/style.css', __FILE__ ) );
 
 /* enqueue the stylsheet */
 wp_enqueue_style( 'tutsplus_product_cats_css' );
 
}
 
add_action( 'wp_enqueue_scripts', 'tutsplus_product_cats_css' );

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

ul.product-cats li {
 list-style: none;
 margin-left: 0;
 margin-bottom: 4.236em;
 text-align: center;
 position: relative;
}
ul.product-cats li img {
 margin: 0 auto; 
}
 
@media screen and (min-width:768px) {
 
 ul.product-cats {
 margin-left: 0;
 clear: both;
 }
 ul.product-cats li {
 width: 29.4117647059%;
 float: left;
 margin-right: 5.8823529412%;
 }
 ul.product-cats li:nth-of-type(3) {
 margin-right: 0;
 }
 
}

Я взяла значения ширины и внешних отступов прямо из стилей WooCommerce. Откройте главную страницу еще раз. Моя выглядит так:

Отображение категорий, подкатегорий и товаров отдельными списками в WooCommerce

Архив категории music:

Отображение категорий, подкатегорий и товаров отдельными списками в WooCommerce

Вот так страница отображается на маленьких экранах:

Отображение категорий, подкатегорий и товаров отдельными списками в WooCommerce

Заключение

Категории товаров WooCommerce – замечательный инструмент. Однако они не всегда идеально отображаются на экране. В этом уроке вы узнали, как создать плагин для вывода категорий и подкатегорий отдельно от списка товаров. Также вы добавили стили к списку категорий.

Данный код можно использовать для вывода списка категорий и подкатегорий в любом месте на странице (к примеру, ниже списка товаров). Для этого необходимо прикрепить нашу функцию отображения категорий к экшену в файле шаблона WooCommerce.

Автор: Rachel McCollin

Источник: https://code.tutsplus.com/

Редакция: Команда webformyself.

WooCommerce: Быстрый старт, первые результаты

Создайте ваш интернет-магазин на WooCommerce с полного нуля уже сегодня!

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

WooCommerce: быстрый старт, первые результаты

Создайте свой первый интернет-магазин на WooCommerce с полного нуля!

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree