Woocommerce как настроить категории товаров

Отображение категорий, подкатегорий и продуктов 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.

Источник

Настройки Товары WooCommerce, урок 11

Вводная часть

В прошлом уроке (общая настройка WooCommerce) мы начали подробно настраивать плагин интернет магазина WooCommerce. Здесь настроим пункт «Товары», который отвечает за показ, измерение, учет и складирование товаров.

Подробно настройки товары WooCommerce

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

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

Кроме этого платформа WooCommerce интернациональна, а единицы измерений товаров в разных странах могут быть разные. Это учли авторы плагина. Например, вес в России измеряется в килограммах, а вес в Англии измеряют в фунтах.

Хотя настройки Товары это скорее технический пункт настроек, выставить все параметры нужно правильно.

Четыре подпункта настроек товаров WooCommerce

Настройка товары, несложный пункт настроек, который имеет четыре подпункта: Основные | Отображение | Запасы | Скачиваемые товары.

Настройки Товара | Основные

Единица измерения веса: указываем килограмм или грамм;

Единица измерения габаритов: указываем сантиметр или метр или миллиметр.

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

Для фильтрации негативных и конкурентных отзывов, есть пункт фильтрации отзывов от проверенных пользователей.

Настройки-Товара | Отображение

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

В настройках предусмотрено четыре варианта главной страницы магазина:

• Витрина;
• Корзина;
• Мой аккаунт (в смысле покупателя);
• Оформление заказа.

Практика показывает, что большинство интернет магазинов начинаются с витрины. Её и выбираем.

Примечание: Не нужно нагружать главную страницу (витрину) магазина всем, чем только можно. Сделаем её минимальной, информативной, с количеством ссылок не более 99 штук.

Пункт: Страница Магазина: В одном из прошлых уроков, мы готовили плагин WooCommerce к работе и создали отдельную страницу магазина, на вкладке Страницы>>>Добавить новую, назвав её Витрина.

В пункте настроек Страница Магазина выбираем страницу магазина «Витрина» из слайдера.

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

Пункт: На странице магазина. Здесь указываем, что именно показывать на витрине магазина. Можно показать товары, можно категории товара или товар с категориями.

Устанавливаю: Для снижения нагрузки на сервер устанавливаю Товар. То есть, получим стандартную витрину магазина с картинками товаров расположенные рядами с описаниями (если их создать). Если товаров очень много, и много категорий товаров ставим Категории.

На странице категории: Аналогично, задаем, что показывать на странице категорий товаров: Подкатегории, Товары или Подкатегории с товарами.

Устанавливаю: Подкатегории с товарами.

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

Выбранная сортировка распространиться на витрину и категории товаров.

Устанавливаю: По умолчанию, то есть товар будет показан произвольно или по алфавиту.

Пункт: Добавить в поведение корзины. Этим пунктом настроек мы задаем поведение магазина при добавлении товара в корзину. Можно сразу перенаправить покупателя в корзину (не делаем), можно включить для Ajax кнопку добавления в корзину в архивах (что делаем).

Группа настроек Изображение товаров

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

• Изображение товара это картинка товара в категориях (витрине);
• Изображение единичного товара это картинка на карточке товара;
• Миниатюра это ряды товаров в галереях.

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

Настройки Товары | Запасы

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

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

Здесь же есть пункт настроек о показе запасов (остатков) покупателям. Пункт Видимость закончившихся товаров.

Настройки Товар| Скачиваемые товары

Плагин WooCommerce универсальный магазин и позволяет торговать не только реальными товарами, но и товарами виртуальными. Этот пункт настроек именно для них.

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

Источник