Плагин 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. В файле находится следующий код, который отвечает за вывод категорий и товаров:

Итак, перед запуском цикла на вывод товаров у нас есть функция 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. Откройте файл и добавьте следующий код:

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

Пишем свою функцию

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

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

Код ниже добавьте в функцию:

Разберем, что делает наша функция:

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

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

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

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

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

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

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

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

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

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

Категория Music:

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

Заключение

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

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

Автор: Rachel McCollin

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

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

Метки: ,

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

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

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