Плагин WooCommerce WordPress: показ категорий, подкатегорий и товаров отдельным списком

Плагин WooCommerce WordPress: показ категорий, подкатегорий и товаров отдельным списком

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

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

Товары

Категории (на главной странице магазина) или подкатегории (на страницах категорий)

Товары и категории.

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

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

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

Определить, какой участок кода плагина WooCommerce отвечает за вывод категорий и подкатегорий на страницах архива.

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

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

Прописать стили.

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

Что нам потребуется

В работе нам потребуются:

Установленный WordPress.

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

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

Добавленные товары – я добавил ненастоящие данные о товарах из плагина WooCommerce; как это сделать, смотрите по ссылке.

Совместимая с WooCommerce тема – я использую Storefront.

Перед тем как начать: Настройки по умолчанию

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

Теперь взглянем, как WooCommerce отображает категории товаров и сами товары на страницах архива. Если вы еще этого не сделали, то перейдите WooCommerce > Settings, выберите вкладку Products, выберите опцию Display. Для опций Shop Page Display и Default Category Display поставьте Show both.

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

Так как у меня всего три категории и изображения товаров и категорий одного размера, то все выглядит довольно аккуратно. А ниже уже показана одна из категорий:

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

Определяем какой участок кода 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_before_shop_loop. Необходимо убедиться в том, что используется высокий приоритет, что функция запускается сразу после уже прикрепленных к хуку функций.

Обратите внимание: так как 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. Сохраните изменения. Теперь ваша страница магазина должна выглядеть примерно так:

В файле плагина добавьте следующий код:

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() выводятся изображения категорий. Следом идет название категории в ссылке на архив.

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

Категории показываются, но осталось добавить немного стилей. Сделаем это.

Стили для списка категорий

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

function tutsplus_product_cats_css() {
 
    /* регистрируем стили */
    wp_register_style( 'tutsplus_product_cats_css', plugins_url( 'css/style.css', __FILE__ ) );
     
    /* ставим в очередь */
    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;
    }
     
}

Ширину и внешние отступы я взял из стилей плагина. Обновите еще раз главную страницу. Вот так получилось у меня:

Категория Music:

На маленьких экранах страница выглядит так:

Заключение

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

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

Автор: Rachel McCollin

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

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

Интернет-магазин на WordPress

Прямо сейчас посмотрите курс по созданию интернет-магазина на WordPress!

Смотреть курс

Метки: ,

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

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

Комментарии (2)

  1. Марина

    А можете подсказать как работает функция woocommerce_product_subcategories()? мне нужно вывести alt и title для картинок подкатегорий, никак не могу разобраться где это прописать, везде уже перелазила. А писать плагин из-за такой ерунды, мне кажется не эстетично)))

  2. Андрей

    Подскажите по какой причине, после установки плагина, при переходе на следующую страницу товаров, добавляется еще одно поле категорий?
    Спасибо! gera.kiev.ua/shop

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

Ваш 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