Как вывести товары woocommerce списком

Как вывести товары woocommerce на главной или в произвольном месте

Воспользуйтесь навигацией по странице чтоб перейти к чтению нужной вам информации. В п.1 я описываю как новичкам вывести страницу магазин на главной, а в п.2 информация о том как выводить товар woocommerce в произвольном месте, например на главной:

Выводим все товары woocommerce на главной

к менюЭто самый простой вариант, я скажу о нем только пару слов в виде инструкции и пойдем выводить товар в произвольном месте у виде блока.

1) В админке заходим в раздел «woocommerce» — «настройка» — «товары» — «отображение», как на скине:

там есть поле «Страница Магазина» для него нужно выбрать страницу под магазин, если там уже есть значение то достаточно просто запомнить название страницы (в 99% там значение прописанное автоматом).

2) Заходим в настройки ВП — «Чтение» и в блоке «На главной странице отображать» ставим отметку «Статическую страницу (выберите ниже) » как на кликабельном скине ниже и в выпадающем списке выбираем ту страницу, которую мы запомнили в п.1.

Вот и все, наслаждаемся мы только узнали как вывести товары на главной woocommerce.

Как у woocommerce вывести товары в произвольном месте

к менюВот эта задачка по интереснее будет. Предположим что нам нужно на странице показать 4 товара с рубрики woocommerce Акция с сохранением общего стиля сайта. Для этого нам нужно создать рубрику акция и посмотреть ее ярлык, смотрите на скине ниже:

у меня ярлык называется «akciya».

И воспользоваться волшебным шорткодом:

Учтите, если мы вставляем это в пхп то нужно писать вот так:

per_page — количество товаров

orderby — сортировка товаров по (title, date)

order — сортировка значений сверху вниз или снизу вверх (asc, desc)

category — ярлык категории

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

Думаю нет смысла описывать параметры.

И последнее как у woocommerce вывести товары по ид в произвольном порядке в произвольном месте? — используем шорткод

где ids — это все ид товаров которые нужно показать.

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

Т.е. в карточке товара и на странице магазина все хорошо, товары и миниатюры отображаются, но если вставлять в произвольное место , то — нет.

Добрый день! Да все отлично, но только проблема в том что, список товаров выводится, а вот миниатюры -нет.

Источник

Как вывести все категории (рубрики) товаров WooCommerce в WordPress?

Я думаю, что многие согласятся со мной, что WooCommerce – это отличное решение для CMS WordPress, с помощью которого можно организовать свой собственный интернет-магазин.

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

Одноуровневый вывод всех категорий (рубрик) товаров WooCommerce в любом месте сайта в WordPress

Начнем с самого простого примера – одноуровневого меню со всеми категориями, где есть хотя бы 1 товар.

Вид функции (вставляется в файл functions.php, который находится в папке темы сайта):

Этот код вы вставляете в нужное вам место темы сайта. Важные моменты я пометил в функции.

Основные типы сортировок:

1. id или term_id – по ID.
2. name – по названию.
3. slug – по альтернативному названию.
4. description – по описанию.
5. meta_value – по значению произвольного поля.
6. none – не сортировать.

По умолчанию – name.

Допустимые порядки сортировки:

1. ASC – от меньшего к большему (по порядку – 1, 2, 3 или a, b, c и т.д.);
2. DESC – от большего к меньшему (в обратном порядке – 3, 2, 1 или c, b, a и т.д.).

По умолчанию – ASC.

Многоуровневый (древовидный) вывод всех категорий (рубрик) товаров WooCommerce в любом месте сайта в WordPress

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

Вставляете так же в файл functions.php, и использование (вывод):

Вставляете в нужное место в тему вашего сайта. Допустимые настройки вывода – как и в первом варианте.

Стилизацию меню в этой статье я не рассматриваю, думаю, ее вы можете сделать и сами.

Общий класс меню первого уровня – «main_categories_list», второго и последующего – «sub_categories_list» + «sub_categories_list_N», где N – уровень вложения. Цепляетесь за них и настраиваете вид так, как вам нужно.

Источник

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 в отдельных списках

Russian (Pусский) translation by Marat Amerov (you can also view the original English article)

WooCommerce дает вам несколько вариантов того, что вы можете отображать на своих страницах коллекций:

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

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

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

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

Чтобы сделать это, мы выполним четыре шага:

1. Определите код, используемый WooCommerce для вывода категорий и подкатегорий на странице коллекции.
2. Создайте плагин для нашего кода.
3. Напишите функцию для размещения категорий или подкатегорий перед списками продуктов.
4. Стиль вывода.

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

Что вам понадобится

Чтобы двигаться дальше, вам понадобятся:

• Установка WordPress для разработки.
• Редактор кода.
• Установка и активация WooCommerce.
• Добавленные продукты: я импортировал данные фиктивного продукта, которые поставляются с WooCommerce; для получения подробной информации о том, как это сделать, см. это руководство.
• Активная совместимая с WooCommerce тема — я использую Storefront.

Перед началом работы: параметры по умолчанию

Давайте посмотрим, что WooCommerce дает нам по умолчанию.

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

Теперь давайте посмотрим, как WooCommerce отображает категории продуктов и продукты на страницах коллекций.

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

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

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

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

Идентификация кода WooCommerce использующего выходные категории и продукты в коллекции

Первый шаг — определить, как WooCommerce выводит категории и подкатегории. Итак, давайте углубиться в исходный код WooCommerce, чтобы найти соответствующую функцию.

Файл WooCommerce использует для отображения страниц коллекций archive-product.php , который находится в папке templates .

Внутри этого файла вы можете найти код, который выводит категории и продукты:

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

Функция подключаемая, что означает, что мы можем переопределить ее в нашей теме. К сожалению, это не совсем так, поскольку WooCommerce имеет встроенный стиль для очистки элементов, который будет отображаться в начале строки с отображением по умолчанию.

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

Я скопировал точные ширины и отступы из стиля, используемого WooCommerce.

Теперь проверьте свою главную страницу магазина. Вот моя:

Вот коллекция категории Music:

И вот как это выглядит на маленьких экранах:

Резюме

Категории продуктов — отличная функция WooCommerce, но способ отображения не всегда идеален. В этом уроке вы узнали, как создать плагин, который выводит категории продуктов или подкатегории отдельно из списков продуктов, а затем вы ввели списки категорий.

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

Если вы в настоящее время запускаете магазин, который хотите расширить, или вы ищете дополнительные плагины для изучения, связанные с WooCommerce, не стесняйтесь посмотреть, какие плагины доступны на Envato Market.

Источник