От автора: в плагине 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. В файле находится следующий код, который отвечает за вывод категорий и товаров:
1 2 3 4 5 6 7 8 9 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; // 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. Откройте файл и добавьте следующий код:
1 2 3 4 5 6 7 8 9 10 11 |
<?php /** * Plugin Name: Tutsplus display WooCommerce products and categories/subcategories separately in archive pages * Plugin URI: //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: //rachelmccollin.co.uk * * */ |
Вам нужно всего лишь исправить данные об авторе и другие детали. Сохраните файл и активируйте плагин через панель администратора WordPress.
Пишем свою функцию
Теперь давайте напишем свою функцию. Но перед этим отключите отображение категорий в панели администратора. Перейдите WooCommerce > Settings во вкладку Products и выберите опцию Display. Для опций Shop Page Display и Default Category Display установите Show products. Сохраните изменения. Теперь ваша страница магазина должна выглядеть примерно так:
В файле плагина добавьте следующий код:
1 2 3 4 5 |
function tutsplus_product_subcategories( $args = array() ) { } } add_action( 'woocommerce_before_shop_loop', 'tutsplus_product_subcategories', 50 ); |
Код ниже добавьте в функцию:
1 2 3 4 5 6 7 8 9 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>'; } |
Разберем, что делает наша функция:
Функция определяет текущий запрошенный объект и сохраняет его ID в переменную $parentid.
Функция get_terms() используется для определения родительских терминов у текущего запрошенного объекта. Если это домашняя страница, вернутся категории верхнего уровня; если это архив категорий, вернутся подкатегории.
Затем проверяется, есть ли какие-либо термины перед открытием цикла foreach и тега ul.
Под каждый термин создается отдельный тег li, и при помощи функции woocommerce_subcatgeory_thumbnail() выводятся изображения категорий. Следом идет название категории в ссылке на архив.
Сохраните файл и обновите страницу магазина. Моя главная страница выглядит так:
Категории показываются, но осталось добавить немного стилей. Сделаем это.
Стили для списка категорий
Теперь необходимо добавить стили. В наш плагин необходимо добавить файл стилей, который нужно поставить в очередь. В папке плагина создайте папку CSS, а внутри нее создайте файл style.css. Код ниже добавьте в файл плагина перед созданной нами функцией:
1 2 3 4 5 6 7 8 9 10 11 |
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, а значит, и мы будем ее придерживаться.
1 2 3 4 5 6 7 8 9 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; } } |
Ширину и внешние отступы я взял из стилей плагина. Обновите еще раз главную страницу. Вот так получилось у меня:
Категория Music:
На маленьких экранах страница выглядит так:
Заключение
Категории товаров плагина WooCommerce отличная вещь. Однако то, как они отображаются не всегда смотрится хорошо. В этом уроке вы узнали, как создать плагин, который будет выводить категории и подкатегории отдельно от списка товаров. Также вы добавили стили к списку категорий.
Данный код можно использовать для вывода списка категорий и подкатегорий в любом месте на странице (к примеру, ниже списка товаров). Для этого необходимо прикрепить нашу функцию отображения категорий к экшену в файле шаблона WooCommerce.
Автор: Rachel McCollin
Источник: //code.tutsplus.com/
Редакция: Команда webformyself.
Комментарии (7)