Плагин 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:

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

  1. Марина

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

  2. Андрей

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

  3. Kladproraba

    Здравствуйте! Подскажите, будьте добры, как решить проблему: у внешнего/партнёрского товара нет возможности добавлять отзывы в магазине kladproraba.com, блок с отзывами «прячется», эта проблема только с внешним товаром, сторонние плагины например -YITH WooCommerce Advanced Reviews не решили проблему, ответа на этот вопрос пока не существует, как решить проблему? Буду очень признателен за помощь!

  4. Антон Сергеевич

    Буду очень признателен, если подскажете, как перевести «результаты поиска» на русский язык?!

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

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