Woocommerce вывод категорий на главной

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

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

Вставлять шорткод рекомендуется в текстовый редактор, предварительно переключившись в режим “Текст” во избежании форматирования элементов кода.

Вывод товаров

Последние продукты

Определяет вывод последних добавленных товаров в базу данных WooCommerce.

Рекомендуемые продукты

Функция выводит товары обозначенные как “рекомендуемые” непосредственно в редактировании товарной позиции. Количество продуктов и сортировка определяется аргументами (см. ниже).

Продукт

Отображение одиночного товара по ID или SKU (артикл).

Продукты

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

Страница продукта

Полная страница продукта по ID или SKU со всей введенной информацией о нем.

Распродажа продуктов

Вывод товаров со скидкой.

Лидеры продаж

Список товаров, имеющих лучшие продажи по данным заказов в WooCommerce.

Популярные продукты

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

Продукты по атрибуту

Каждый вариативный товар должен иметь как минимум один атрибут с разными значениями. Мы можем вывести необходимое количество товаров по выбранному значению из заданного атрибута.

Более подробно про создание вариативного товара вы можете узнать по ссылке.

Сопутствующие товары

Вывод товарных категорий

Товарная категория

Вывод одиночной товарной категории по ярлыку (slug).

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

Установите аргумент parent в значение 0 для вывода только родительских категорий. Собственный выбор категорий обеспечивается аргументом ids.

Вывод элементов WooCommerce

Корзина товаров

Оформление заказа

Отслеживание заказа

Информация о статусе заказанных товаров.

Личный кабинет

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

Аргументы

• per_page – количество товаров;
• columns – количество столбцов в одном ряду;
• orderby – сортировка по заданному значению (date, title, name, rand);
• order – порядок сортировки (desc, asc, rand).

1,702 просмотров всего, 1 просмотров сегодня

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

Как вывести товары из определенной категории на главную страницу

Есть два варианта решения вопроса:

• с помощью шорткода,
• с помощью кода.

Первый вариант – вывод товаров из категории с помощью шорткода

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

[product_category category=" poleznaya-informaciya"]

Где poleznaya-informaciya – это слаг категории wordpress.

Если же нужно расположить его в php-коде в шаблоне страницы, то нужно воспользоваться следующим кодом:

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

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

Второй вариант – вывод товаров из категории с помощью кода

$loop = new WP_Query( array(
‘post_type’ => ‘product’, // указываем, что выводить нужно именно товары
‘posts_per_page’ => 4, // количество товаров для отображения
‘orderby’ => ‘date’, // тип сортировки (в данном случае по дате)
‘product_cat’ => ‘vstraivaemaya-texnika’, // указываем слаг нужной категории
));

Пример полного кода:

Ниже показано каких результатов можно добиться:

После интересной заметки о наличии товара в Woocommerce рассмотрю задачу, связанную с подкатегориямии в магазине. Изначально хотел написать более масштабный пост по категориям, но позже решил сузить тему чтобы вас не запутывать. В плагине есть опция с 3-мя способами как можно показывать продукцию в разделах: 1) только товары; 2) подкатегории; 3) совместить оба варианта. В ранних версиях она находилась в меню «Настройки» — «Товары» — «Отображение», позже перенесли в настройщик темы.

Многие используют последний метод дабы посетитель мог самостоятельно выбирать что делать: переходить в нужный архив или сразу просматривать все товары в одном месте. Его и разберем. Разработчикам, кстати, может также пригодиться сниппет позволяющий скрыть категорию и товары из Woocommerce каталога.

К сожалению, в шаблоне WooCommerce для страницы каталога все элементы выводятся «слитно» — и продукция, и разделы размещены в совместном блоке кода.

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

Хак вывода подкатегорий WooCommerce

1. Первым делом заходим в раздел «Внешний вид» — «Настройки» — «WooCommerce», где для опции «На странице категории» выбираем показ только самой продукции:

Если у вас более ранние версии модуля магазина, то данная опция находится непосредственно в его настройках во вкладке «Товары» — «Отображение»:

2. Открыв файл archive-product.php в папке wp-content/plugins/woocommerce/templates, увидите как формируется структура страницы архива магазина.

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

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

3. Вам нужно добавить в файл функций (для темы магазина это вероятнее всего custom-function.php) следующие строки:

В данном коде определяется ID объекта из query запроса и осуществляется поиск всех элементов магазина, для которых он является родительским. Дальше в блоке foreach задается как именно вы хотите вывести подкатегории в WooCommerce. Здесь:

• woocommerce_subcategory_thumbnail — отвечает за миниатюру (если нужно);
• название $term->name оборачивается в ссылку (тег А);
• можете поменять классы стилей в элементах списка.

Сохраняете файл, загружаете его обратно на FTP и проверяете как все работает.

4. Изначально оформление будет смотреться немного коряво, поэтому вам придется добавить стили (в main-style.css, style.css или другой файл):

Это лишь пример оформления от автора сниппета, изменяйте его как угодно под свою тему. Строки после min-width:768px отвечают за меньшие версии экрана. После внесения правок, смотрите результат. Не забывайте, кстати, следить за правильным размером изображений товара WooCommerce дабы фотки не получались размытыми.

5. Если вам нужно чтобы отображались даже те подкатегории, где нет продукции, добавьте дополнительный параметр в $args при вызове функции get_terms (третья строка в коде):

$args = array( ‘parent’ => $parentid, ‘hide_empty’ => false );

Я тестировал данный пример на реальном сайте — все работает отлично. Возможно, какими-то хитрыми CSS методами получится все реализовать без дополнительной функции либо данная фишка исправлена в новой WooCommerce 3.0 (я тестировал на ветке 2.6.x), но, как бы там ни было, этот пример будет хорошей практикой начинающим WordPress разработчикам.

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