Статьи

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

Январь 10, 2019
Конечный продукт
Что вы будете создавать

WooCommerce дает вам несколько вариантов того, что вы можете отобразить на своих страницах архива:

  • товары
  • категории (на главной странице магазина) или подкатегории (на страницах категорий)
  • как продукты, так и категории.

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

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

В этом уроке я покажу вам, как отображать категории в отдельном списке перед отображением продуктов.

Для этого мы выполним четыре шага:

  1. Определите код, который WooCommerce использует для вывода категорий и подкатегорий на страницах архива.
  2. Создайте плагин для нашего кода.
  3. Напишите функцию для размещения категорий или подкатегорий перед списком товаров.
  4. Стиль вывода.

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

Что вам нужно

Чтобы следовать, вам нужно:

  • Разрабатываемая установка WordPress.
  • Редактор кода.
  • WooCommerce установлен и активирован.
  • Добавленные продукты — я импортировал фиктивные данные о продуктах, которые поставляются с WooCommerce; Подробнее о том, как это сделать, см. в этом руководстве .
  • Активирована тема, совместимая с WooCommerce — я использую Storefront .

Прежде чем мы начнем: параметры по умолчанию

Давайте посмотрим на то, что WooCommerce дает нам по умолчанию.

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

Экран категорий товаров в админке WordPress с добавленными изображениями категорий

Теперь давайте посмотрим, как WooCommerce отображает категории и продукты на страницах архива.

Если вы этого еще не сделали, перейдите в раздел WooCommerce> Настройки , выберите вкладку « Продукты », а затем выберите параметр « Показать» . Для каждого из параметров отображения страницы магазина и отображения категории по умолчанию выберите Показать оба :

Экран настроек отображения продукта WooCommerce

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

Главная страница магазина без изменений

Поскольку это происходит из-за того, что у меня есть три категории продуктов, а изображения моей категории имеют такой же размер, что и изображения продуктов, это выглядит довольно аккуратно. Но вот один из архивов категории продуктов:

Страница архива категории Музыка без изменений

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

Идентификация кода, который WooCommerce использует для вывода категорий и продуктов в архивах

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

Файл, который WooCommerce использует для отображения страниц архива, представляет собой archive-product.php , который находится в папке templates .

Внутри этого файла вы можете найти этот код, который выводит категории и продукты:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
<?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;
 
<?php woocommerce_product_loop_end();

Так что есть woocommerce_product_subcategories() которая выводит категории или подкатегории перед запуском цикла, который выводит продукты.

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

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

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

Итак, давайте создадим плагин, который делает это.

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

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

Откройте ваш файл и добавьте в него этот код:

01
02
03
04
05
06
07
08
09
10
11
<?php
/**
 * Plugin Name: Tutsplus display WooCommerce products and categories/subcategories separately in archive pages
 * Plugin URI: https://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> Настройки , перейдите на вкладку « Продукты » и выберите « Показать» . Для каждого из параметров отображения страницы магазина и отображения категории по умолчанию выберите Показать продукты . Сохраните ваши изменения.

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

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

В вашем файле плагина добавьте это:

1
2
3
4
5
function tutsplus_product_subcategories( $args = array() ) {
     
    }
}
add_action( ‘woocommerce_before_shop_loop’, ‘tutsplus_product_subcategories’, 50 );

Теперь добавьте этот код внутри функции:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
$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>’;
 
}

Давайте посмотрим, что делает эта функция:

  • Он идентифицирует текущий запрашиваемый объект и определяет его идентификатор как $parentid .
  • Он использует get_terms() для идентификации терминов с текущим запрашиваемым элементом в качестве их родителя. Если это главная страница магазина, она вернет категории верхнего уровня; если это архив категорий, он вернет подкатегории.
  • Затем он проверяет, есть ли какие-либо термины, прежде чем открывать цикл foreach и элемент ul .
  • Для каждого термина создается элемент li , а затем woocommerce_subcatgeory_thumbnail() изображение категории с помощью woocommerce_subcatgeory_thumbnail() , за которым следует имя категории в ссылке на его архив.

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

Главная страница магазина - категории раздельные, но слишком большие, с маркерами для списка и т. Д.

Категории отображаются, но им нужно немного стиля. Давайте сделаем это дальше.

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

Чтобы мы могли добавить стили, нам нужна таблица стилей внутри нашего плагина, которую нам нужно поставить в очередь.

В папке вашего плагина создайте папку с именем css , а внутри style.css создайте файл с именем style.css .

Теперь, в вашем файле плагина, добавьте это выше функции, которую вы уже создали:

01
02
03
04
05
06
07
08
09
10
11
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 использует мобильные стили, поэтому мы тоже будем использовать их.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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.

Теперь проверьте свою главную страницу магазина снова. Вот мой:

Главная страница магазина Категории выше продуктов и оформлены последовательно в сетке

Вот архив категории Музыка :

Музыкальный архив Две подкатегории находятся над 3 широкими сетками товаров

А вот как это выглядит на маленьких экранах:

Категории на более узких экранах полной ширины не в сетке

Резюме

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

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

Если вы в настоящее время открываете магазин, который хотите расширить, или ищете дополнительные плагины для изучения в связи с WooCommerce, не стесняйтесь посмотреть, какие плагины доступны на Envato Market .

128
Share: