Категории woocommerce: Отображение категорий, подкатегорий и продуктов WooCommerce в отдельных списках

Шорткоды WooCommerce

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

• Если вы попали на этот пост случайно и пока что не до конца представляете, что такое шорткоды, то вам сначала читать этот пост.
• В самой документации WooCommerce упоминается — если вдруг вы используете шорткод и что-то вроде как с ним не так, то проверьте, не обернули ли вы его в тег <pre> (возможно для этого вам понадобится сначала переключиться на вкладку HTML).

Также рекомендую мой видеокурс по созданию интернет-магазина на WooCommerce на основе готовой вёрстки 🚀

Шорткоды с подвохом — [woocommerce_cart], [woocommerce_checkout], [woocommerce_order_tracking], [woocommerce_my_account]

Я их назвал так по очень простой причине — эти шорткоды вроде бы и есть, но вы не можете их использовать 😯 (пока что, возможно в будущем это изменится).

Как вы знаете, WooCommerce создаёт несколько системных страниц и наполняет их как раз этими шорткодами, например:

Конечно, на официальной документации WooCommerce это звучит лишь как рекоммендация, но то, что я точно знаю — я пробовал юзать [woocommerce_checkout] на каких-то произвольных страницах, и у меня перестали работать платёжные шлюзы. А заглянув в код самого плагина, я понял, что оно и не должно работать.

Так что по этим шорткодам — можете попробовать, но то, что будет работать, не факт.

[recent_products] — выводит типо последние добавленные товары

Например вот такой шорткод [recent_products per_page="4" columns="4"], использованный на стандартной странице WordPress в теме StoreFront вывел следующее:

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

per_page

Какое количество товаров нужно вывести, по умолчанию: 12.

columns

На сколько колонок их разделить, по умолчанию: 4.

orderby

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

order

Сортировать по возрастанию ASC или по убыванию DESC (по умолчанию).

category

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

operator

Вот вы в предыдущем параметре указали например две категории товаров, пусть это будет category1 и sportproducts, а теперь вам нужно решить, хотите ли вы, чтобы выводимые товары присутствовали обязательно в обеих категориях AND, в одной из категорий IN (по умолчанию), либо не присутствовали в указанных категориях NOT IN.

[featured_products] — для вывода рекомендуемых товаров

Шорткод [featured_products] выводит товары в точно таком же виде, как и предыдущий [recent_products], а также имеет те же самые параметры. Единственный момент — товар должен быть отмечен, как рекомендуемый, для этого можно например нажать на звезду:

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

[product] — когда нужно вывести какой-то определённый товар

Например я использовал этот шорткод [product] и получил вот такой результат:

Если вы всё ещё не в курсе, где берётся ID для постов или товаров, то вам срочно читать этот урок. Вместо ID вы также можете передать параметр sku (артикул), который указывается на странице редактирования товара:

[products] — Для вывода определённых товаров по их ID или артикулу

Вы можете указать через запятые айдишники или артикулы товаров, например [products ids="413,500"] или [products skus="product1,product2"].

Кроме того, этот шорткод поддерживает параметры columns, orderby и order, как в шорткоде [recent_products].

[add_to_cart] — кнопка добавления товара в корзину

Шорткод выводит цену и кнопку добавления в корзину, если товар вариативный, то ссылку перехода на страницу товара.

Из обязательных параметров — либо ID товара id, либо артикул sku. Пример: [add_to_cart id="511"]. Также поддерживаются следующие параметры:

style

CSS стили, которые будут добавлены ко всему блоку, например [add_to_cart id="511" style="background-color:#eee;margin:10px 0"]

class

CSS класс или несколько классов через пробел, которые будут добавлены ко всему блоку

quantity

Количество товаров, которые нужно добавить в корзину.

show_price

Отображать цену или нет, по умолчанию — true (отображать).

[add_to_cart_url] — Выводит URL относительно текущей страницы сайта, при переходе по которому товар будет добавлен в корзину

Этот шорткод поддерживает только два параметра — либо ID товара id, либо артикул sku. Пример: [add_to_cart_url].

[product_category] — Выводит товары из определенной рубрики (или рубрик)

По сути полная копия шорткода [recent_products], разница лишь в том, что параметр order принимает значение по умолчанию ASC, а параметр orderby принимает значение по умолчанию menu_order title (сортировать сначала по порядку, а при одинаковых значениях порядка — по заголовку), ну и соответственно category — обязательный параметр. Ну ок! 😁

[product_categories] — Выводит ссылки на сами категории товаров

Например я использовал этот шорткод [product_categories hide_empty=0] для того, чтобы вывести все категории товаров на сайте, даже пустые. Так как я не добавлял миниатюр к самим категориям, то получилось у меня вот так:

Другие параметры шорткода:

number

Сколько категорий отобразить? По умолчанию: все. Эта штуковина (я про параметр) к слову работает через array_slice().

orderby

Описание параметра смотрим здесь.

order

Сортировка по возрастанию ASC (по умолчанию) или по убыванию DESC.

columns

Во сколько колонок их вывести, по умолчанию: 4.

hide_empty

Нужно ли скрыть те категории, в которых нет товаров, нужно — 1 (по умолчанию), не скрывать — 0.

parent

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

ids

Тут вы можете перечислить через запятую ID категорий.

[product_page] — по сути выводит всю страницу товара

Выводит карточку товара с изображением, кнопкой добавления в корзину и даже отзывами по ID товара [product_page id="94"] или по артикулу [product_page sku="artikul1"].

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

[sale_products] — выводит все товары, на которые в данный момент действует распродажа

У шорткода точно такие же параметры, как и у [recent_products], по умолчанию товары сортируются по алфавиту, а также немного отличается шаблон вывода товаров:

[best_selling_products] — товары, отсортированные по количеству продаж

Шорткод имеет параметры per_page, columns, category и operator, рассмотренные выше. Благодаря последним двум вы можете вывести наиболее продаваемые товары в каких-то определённых категориях.

Сортировка происходит по произвольному полю total_sales.

[top_rated_products] — товары с наивысшим рейтингом

И тут снова полный набор параметров, как у шорткода [recent_products], но сортировка происходит по пользовательскому рейтингу.

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

По умолчанию выводится 4 случайных товара в 4 колонки ( [related_products per_page="4" columns="4" orderby="rand"], больше кстати у шорткода нет параметров ), которые указаны в разделе сопутствующие товары в Апсейле:

Если ничего не указано, то шорткод ничего не выведет.

[product_attribute] — позволяет вывести все товары с определенным значением какой-либо атрибута

То, что у нас есть параметры per_page, columns, category и operator, про которые я уже неоднократно упоминал выше, вы уже наверное догадались — повторю, что они подробно описаны в шорткоде [recent_products].

Также у нас имеется ещё два параметра: attribute — ярлык атрибута, и filter — значение этого атрибута, причем вы можете указывать несколько значений через запятую.

Пример:

[product_attribute attribute="color" filter="red,blue"]

Выводим товары с атрибутом цвета равным красному или синему.

Миша

Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.

Если вам нужна помощь с сайтом или разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда будем рады вам помочь!

Как вывести категорию товаров Woocommerce в нужном месте?

Woocommerce показывает каталог товаров (витрину) на странице — /shop/, которая создаётся автоматически при установке плагина.

Здесь выводятся все товары, которые вы добавляете в магазин. Вот я разместил пару моделей iPhone — 5ю и 7ю.

Если товаров много, то пользователю не очень удобно, искать в длинном перечне. Потому товары обычно разделяют на категории. Woocommerce предоставляет таксономию категорий товаров, и каждая категория получает от WordPress свою страницу — архив категории.

Что делать, если хочется вывести категорию в другом месте (вернее не только на странице архива)?

Woocommerce поддерживает специальный shortcode для вывода списка товаров определенной категории.

product_category

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

[product_category category=»phones»]

В шоткоде можно использовать следующие атрибуты:

shortcodes woocommerce

Написать комментарий

Данная запись опубликована в 14.07.2017 18:11 и размещена в wordpress.
Вы можете перейти в конец страницы и оставить ваш комментарий.

Мало букафф? Читайте есчо !

Создание таблиц в статьях на WordPress

Июнь 27, 2017 г.

WP из коробки хоть и содержит визуальный редактор HTML, но с минимальным набором инструментов. Таблицы вы создавать можете, только если напишите HTML код …

Читать

Как улучшить категории Woocommerce без плагинов

/**Дополнительное описание для категорий Woocommerce **/

add_action( ‘product_cat_edit_form_fields’, ‘wpm_taxonomy_edit_meta_field’, 10, 2 );

function wpm_taxonomy_edit_meta_field($term) {

$t_id = $term->term_id;

$term_meta = get_option( «taxonomy_$t_id» );

$content = $term_meta[‘custom_term_meta’] ? wp_kses_post( $term_meta[‘custom_term_meta’] ) : »;

$settings = array( ‘textarea_name’ => ‘term_meta[custom_term_meta]’ );

?>

<tr>

<th scope=»row» valign=»top»><label for=»term_meta[custom_term_meta]»>Дополнительное описание</label></th>

<td>

<?php wp_editor( $content, ‘product_cat_details’, $settings ); ?>

</td>

</tr>

<?php

}

add_action( ‘edited_product_cat’, ‘save_taxonomy_custom_meta’, 10, 2 );

add_action( ‘create_product_cat’, ‘save_taxonomy_custom_meta’, 10, 2 );

function save_taxonomy_custom_meta( $term_id ) {

  if ( isset( $_POST[‘term_meta’] ) ) {

    $t_id = $term_id;

    $term_meta = get_option( «taxonomy_$t_id» );

    $cat_keys = array_keys( $_POST[‘term_meta’] );

    foreach ( $cat_keys as $key ) {

      if ( isset ( $_POST[‘term_meta’][$key] ) ) {

        $term_meta[$key] = wp_kses_post( stripslashes($_POST[‘term_meta’][$key]) );

      }

    }

    update_option( «taxonomy_$t_id», $term_meta );

  }

}

/**Вывод второго описания категорий Woocommerce **/

add_action( ‘woocommerce_after_shop_loop’, ‘wpm_product_cat_archive_add_meta’, 50 );

function wpm_product_cat_archive_add_meta() {

  $t_id = get_queried_object()->term_id;

  $term_meta = get_option( «taxonomy_$t_id» );

  $term_meta_content = $term_meta[‘custom_term_meta’];

  if ( $term_meta_content != » ) {

    if ( is_tax( array( ‘product_cat’, ‘product_tag’ ) ) && 0 === absint( get_query_var( ‘paged’ ) ) ) {

      echo ‘<div>’;

      echo apply_filters( ‘the_content’, $term_meta_content );

      echo ‘</div>’;

    }

  }

}

Как создать категории товаров для WooCommerce и настроить SEO

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

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

Создаем категории в WooCommerce

На самом деле ничего сложного в данной задаче нет. Усилий потребуется минимум. Но перед тем, как начнем, установите любой SEO-плагин. От себя рекомендую Rank Math SEO. Инструкция по настройке сего инструмента оставляю здесь.

А для WooCommerce с помощью этого плагина можете сделать вообще замечательные вещи. Например, убрать префиксы /product/ и другие раздражающие вещи без возни с кодом.

Теперь переходим к делу. Для начала нужно зайти в админку сайта → навестись на «Товары» в правом меню → перейти в «Категории».

Как видите, здесь вполне стандартный редактор. В нем нет ничего странного. Абсолютно такой же, как и для блога. Далее, конечно же, все просто.

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

1. Вводим название категории.

2. Вводим ярлык. Это часть url, которая следует после префиксов.

3. Добавляйте описание. Оно потом будет выводиться в мета.

4. Выберите тип отображения. В данном случае я создаю главную категорию, потому выбрал тип «Подкатегории». Также здесь можно выводить только товары, а также есть комбинированный способ отображения.

5. Загружаем изображение.

6. Нажимаем кнопку «Добавить категорию».

7. Готово!

Ну ладно, почти готово. Давайте адекватно заполним метатеги.

На скриншоте отметил, куда следует нажать, чтобы попасть в редактор метатегов. Далее прокрутите ниже, пока не наткнетесь на раздел Rank Math (у других SEO-плагинов может быть иначе). Нажмите кнопку «Редактировать сниппет».

В этом окне вы можете ввести произвольные title и description. Если желаете, чтобы все генерировалось автоматически, то в правом меню найдите раздел Rank Math и наведите на него курсор → перейдите в раздел «Заголовки и метаданные».

Пролистайте чуть вниз и найдите раздел «Категории товаров».

Сделайте тоже самое, что и на скриншоте, расположенном ниже. В «Категория SEO-заголовок добавьте такой формат:

%term% %sep% %sitename%

А в «Метаописание категории» формат следует указать такой:

%term_description%

Все, теперь названия и описания, которые вы указывали при формировании категорий, автоматически становятся title и description.

Все отлично

Теперь вы умеете создавать категории и подкатегории для товаров в WooCommerce. Дальнейшая работа особых проблем для вас не составит. Спокойно делайте интернет-магазин.

Стильный виджет категории товаров Woocommerce !

На чтение 2 мин.

Привет ! Я продолжаю поиски интересных и полезных плагинов для онлайн-магазина Woocommerce. Сегодня я хочу представить вам плагин — XO10 — WooCommerce Categories widget, который добавит на ваш сайт стильный виджет категории товаров. В данном виджете будет отображаться список категорий товаров. Виджет имеет гибкие настройки, вы сможете выбрать стиль отображения категорий, размер миниатюры, расположение миниатюры и т.д.

Установить плагин вы сможете прямо из админ-панели wordpress. Перейдите на страницу: Плагины — Добавить новый, введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.

После установки и активации плагина, перейдите на страницу Виджетов, там у вас появится новый виджет XO10 WooCommerce Categories. Перетащите виджет в сайдбар, откройте виджет, чтобы его настроить.

— Заголовок, укажите заголовок для виджета.

— Сортировка, укажите тип сортировки.

— Можете сделать, чтобы категории отображались в виде выпадающего списка.

— Look — Effects, выберите стиль показа категорий.

— Effect options (optional), оставьте без изменений.

— List HTML class attribute (optional), оставьте без изменений.

— List HTML ID attribute (optional), оставьте без изменений.

— Можете включить функцию иерархии.

— Можете включить показ только дочерних категорий, то есть подкатегорий.

— Можно скрыть пустые категории.

— Text/Image display, можно выбрать расположение миниатюры и текста категории.

— Image width in px, можно указать ширину миниатюры (изображение) в пикселях.

— Image height in px, можно указать высоту миниатюры в пикселях.

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

— Position of product counts, где показывать счётчик, справа или слева.

— Bracket type for product counts, выберите скобки для счётчика, в которых будет отображаться количество товаров.

— Сохраните настройки.

Всё готово ! После сохранения настроек виджет с категориями появится в вашем

Woocommerce не отображаются категории

darkhan

Форумчанин

lifter76

Новичок

lifter76

Новичок

В общем плагин хороший, но глючный у меня слов нет. НЕРВОВ НЕ ХВАТАЕТ! Где найти ответ.

Ну не хотят новые категории отображаться хоть тресни! Товар есть, его видно, но в категорию его переходишь – категории не видно!

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

Можно всё снести к чертям и заново поставить, всё будет работать до каког-то времени, так уже было три раза. ГДЕ возникает ОШИБКА?

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

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

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

Привет ! Мы продолжаем создавать свой интернет-магазин с помощью Супер плагина Woocommerce ! Сегодня вы узнаете как сделать отображение категорий товаров на странице “Магазин”. То есть, на главной странице интернет-магазина будут отображаться не анонсы товаров, а анонсы категорий в виде изображения, названия и количества товаров в данной категории. Вы сможете сделать отображение и категорий и товаров. Сначала будут отображаться анонсы категорий, а потом товаров. Можно сделать отображение только категорий.

В админ-панели WordPress, перейдите на страницу: 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. Сохраните изменения.

Теперь ваша страница магазина будет выглядеть примерно так:

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

Теперь добавьте этот код внутри функции:

Давайте посмотрим, что делает эта функция:

• Она идентифицирует текущий запрошенный объект и определяет его >$parentid .
• Она использует get_terms() для определения условий с текущим запрошенным элементом в качестве родителя. Если это главная страница магазина, она вернет категории верхнего уровня; если это коллекция категории, она вернет подкатегории.
• Затем она проверяет наличие каких-либо условий, прежде чем открывать цикл foreach и элемент ul .
• Для каждого условия она создает элемент li , а затем выводит изображение категории с помощью woocommerce_subcatgeory_thumbnail() , за которым следует название категории в ссылке на ее коллекцию.

Теперь сохраните файл и обновите главную страницу магазина. У меня выглядит так:

Отображаются категории, но им нужен стиль. Давайте следующим сделаем это.

Стилизация списков категорий

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

В своей папке плагина создайте папку css и внутри нее создайте файл с именем style.css .

Теперь, в вашем файле плагина, добавьте это выше функции, которую вы уже создали:

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

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

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

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

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

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

Резюме

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

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

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

Создание новых категорий товаров в WooCommerce

Здравствуйте друзья! В этот уроке вы узнаете как добавлять новые категории товаров в интернет-магазин WooCommerce.

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

Как добавить новые категории товаров в WooCommerce

Переходим в Товары -> Категории.

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

После того как вы указали в соответствующем поле название и указали родительскую категорию (необходимо), не забудьте нажать кнопку «Добавить новую категорию товаров». После этого категория будет создана и доступна в выборе категорий при добавлении товара.

Если вы настроили правильно ЧПУ для WooCommerce — указывать ярлык не нужно. Он будет генерироваться сам, и сразу латиницей.

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

Например если у вас интернет-магазин бытовой техники — вначале создаем категорию «Бытовая техника» без родительской категории, а при добавлении последующих категорий относящихся к бытовой технике (например Холодильники, Стиральные машины, Пылесосы) указываем родительскую категорию «Бытовая техника».

На изображении ниже вы увидите пример добавления категории «Пылесосы» в категорию «Бытовая техника»:

Теперь при добавлении нового товара у вас будет выбор созданных категорий с правильной иерархией.

Пример выбора категории «Холодильники», которая относиться к «Бытовой технике»

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

И еще раз напомню, если у вас возникнут какие-либо вопросы — смело задавайте их в комментариях!

Спасибо за внимание!

Здравствуйте друзья! В этот уроке вы узнаете как добавлять новые категории товаров в интернет-магазин WooCommerce. Новые категории можно добавлять непосредственно и при добавлении самого товара, но в данном уроке мы рассмотрим более классический вариант добавления. Как добавить новые категории товаров в WooCommerce Переходим в Товары -&gt; Категории. В открывшемся окне мы видим поля для заполнения, в которых необходимо указать название новой категории и выбрать родительскую категорию если необходимо. После того как вы указали в соответствующем поле название и указали родительскую категорию (необходимо), не забудьте нажать кнопку «Добавить новую категорию товаров». После этого категория будет создана и доступна в выборе категорий при добавлении товара. Если&hellip;

Проголосуйте за урок

100

Оценка

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

Рейтинг: 4.37 ( 12 голосов )
100

WooCommerce — Как показать категории на странице магазина (с видео)

Последнее обновление — 8 июля 2021 г.

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

Вы можете изменить отображение страницы магазина в магазине WooCommerce с помощью настройщика WooCommerce.

Отображение страницы магазина

На панели администратора WordPress перейдите в Внешний вид> Настройка> WooCommerce , чтобы получить доступ к настройкам, и нажмите «Каталог продуктов». Здесь вы увидите вариант отображения страницы магазина. В раскрывающемся списке есть три варианта: показать продукты, показать категории, показать категории и продукты.

Здесь вы можете выбрать вариант отображения на странице магазина.

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

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

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

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

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

Третий вариант отображает на странице магазина как категории, так и товары.

Отображение страницы категории

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

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

Вы также найдете три варианта изменения отображения страницы категории.

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

На странице категории вы увидите только товары, если выберете первый вариант.

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

Вместо продуктов отображайте все подкатегории на странице категории.

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

И подкатегории, и продукты могут отображаться вместе на странице категории.

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

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

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

Вы можете изменить количество товаров в строке, а также количество строк, отображаемых на странице магазина.

Макет вложенной категории

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

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

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

Надеюсь, эта статья помогла вам понять, как отображать категории на страницах вашего магазина WooCommerce.

Дополнительная литература

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

Предыдущая статья в этой серии поможет вам понять различные типы продуктов, которые вы можете создать в WooCommerce.Прежде чем мы перейдем к изучению того, как создавать каждый тип продукта, важно знать, как эффективно организовать свои продукты. Почему?

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

Это хорошо для поисковой оптимизации (SEO) — Выполнение SEO для веб-сайта электронной коммерции очень сложно, поскольку дублированный контент сбивает Google с толку. Если вы вкладываете значительные средства в SEO для привлечения органического трафика, создание хорошей структуры веб-сайта имеет решающее значение для ранжирования. Хорошая структура сайта увеличивает вероятность того, что Google поймет ваш сайт и покажет его пользователям, выполняющим поиск по релевантным ключевым словам.

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

Настроить WooCommerce Категории продуктов:

Этот параметр позволяет классифицировать товары по категориям, например: мужчины — женщины — дети. Можно создать подкатегории в родительской категории, например, в категории «Женщины» есть верхняя, нижняя, пляжная одежда, куртка… .категории.

Откройте Продукты >> Категории , вы увидите список категорий справа и поля для добавления новой категории слева.

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

с допустимым URL-адресом.

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

Вы можете перетаскивать категории, чтобы переместить их в нужное положение на веб-сайте:

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

Как категории представлены в вашем магазине, зависит от темы.Ниже приведен пример того, как категории и подкатегории представлены на домашней странице магазина WooCommerce:

Настроить WooCommerce Теги продукта:

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

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

Создание тегов товаров аналогично созданию категорий:

В листе продукта вы найдете модуль Теги продукта прямо под модулем Категории продуктов. Просто введите теги, которые хотите присвоить вашему продукту:

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

Категории продуктов, теги и атрибуты WooCommerce

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

Следовательно, очевидно, что это один из самых популярных вариантов, поскольку в 2020 году это ведущая в мире платформа электронной коммерции с долей рынка 28,24 процента.

Лучшая платформа для сервисного бизнеса

Почему WooCommerce?

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

Но, даже если вы еще не являетесь владельцем магазина WooCommerce, эта статья заставит вас захотеть его иметь! (Здесь смайлик lol.)

Настройте свой интернет-магазин с помощью WooCommerce

(Полное руководство)

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

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

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

Категория продуктов

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

В этой статье мы обсудим:

Зачем нужна категория продуктов WooCommerce?

Если мы посчитаем причины для классификации ваших продуктов WooCommerce, вы увидите ниже:

1. Пользователи легко находят и сканируют товары
2. Группирует ваши продукты на основе свойств
3. Позволяет настраивать фильтры для продуктов
4. Повышает качество обслуживания клиентов, что дает вам лучшую обратную связь с ними
5. Оптимизирует структуру вашего магазина WooCommerce
6. Обеспечивает лучшую позицию в SERP (страницы результатов поисковой системы)
7. Необходим для долгосрочной работы вашего магазина WooCommerce

Научитесь добавлять отзывы в свой магазин WooCommerce

Сейчас

Теги продуктов, атрибуты и категории продуктов наверняка помогут вам в грамотном управлении вашим магазином WooCommerce.Итак, давайте начнем со всех аспектов, связанных с категорией продуктов WooCommerce.

Категория продуктов WooCommerce

Что такое категории в WooCommerce?

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

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

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

Вот примеры подкатегорий:

Добавление / создание / редактирование категории продуктов WooCommerce

Как добавить категорию продукта WooCommerce?

Есть 2 способа добавить новую категорию, или, я бы сказал, 1,5 способа, потому что второй способ кратковременный.

Вы можете управлять категориями продуктов WooCommerce с левой панели бэкэнда вашего веб-сайта WordPress. Шаги по созданию категорий продуктов WooCommerce:

• Перейдите на панель управления.
• Перейдите в Продукты> Категории.
• Здесь вы можете добавлять, удалять или редактировать категорию продуктов WooCommerce.

Теперь вы можете добавить необходимые данные. Вы увидите следующие поля:

Имя: Здесь вы можете добавить желаемое имя в категорию продуктов WooCommerce. Это имя будет видно покупателям. Например, одежду.

Slug: Это может быть необязательное поле.Он определяет URL-адрес страницы категории вашего продукта. Если вы настраиваете это поле, помните, что оно должно содержать только дефисы, цифры и строчные буквы. В случае с одеждой он будет переведен на www.yoursite.com/product-category/clothes.

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

Описание: Некоторые темы отображают описание по умолчанию. Здесь вы можете добавить подробную информацию о своей категории продуктов WooCommerce.

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

• Стандартный будет использовать тему по умолчанию.
• Подкатегории напрямую отображают подкатегории.
• Продукты покажет все ваши продукты.
• Оба будут отображать продукты ниже подкатегорий вместе.

Загрузить / добавить изображение: С помощью этой опции вы можете установить эскизы для своей категории или подкатегории продукта WooCommerce. В некоторых темах есть страницы, на которых отображаются изображения категорий продуктов WooCommerce.

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

Категория отображается в соседнем окне, где вы можете увидеть список всех категорий продуктов WooCommerce на странице «Добавить продукт».

Услуги по разработке продуктов WooCommerce

Начать сейчас

Другой способ добавить новую категорию продуктов WooCommerce:

• Перейти к продуктам> Добавить продукт

При добавлении нового продукта вы можете увидеть панель справа, где вы можете напрямую выбрать « Добавить новую Категория продукта » и создать столько новых категорий продуктов WooCommerce, сколько захотите.И это был короткий укус.

Примечание : есть категория по умолчанию под названием «Без категории», которая содержит несколько ваших продуктов, потому что они не были отнесены к какой-либо категории продуктов WooCommerce. Также его нельзя удалить.

Повторный заказ категории товаров WooCommerce

Шаблон домашней страницы Storefront по умолчанию отображает изображения категорий продуктов WooCommerce в шаблоне домашней страницы.

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

Шаги для повторного заказа категории WooCommerce:

• Перейти на панель управления> Продукты> Категории
• Список всех категорий продуктов WooCommerce появится справа
• Найдите значок = в конце названия категории, перетащите и отсортируйте их соответственно

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

Добавляя теги, вы даете возможность вашим покупателям найти желаемый товар. Например, если вы продаете одежду и у вас много принтов Marvel, «Звездных войн» или других тематических изданий, вы можете создать для них ярлыки и сделать их удобными для тех, кто заинтересован в их покупке.

Таким образом, они попадают на все товары, связанные с такими тегами.

Не только это. Подобно добавлению тегов в блоги вашего веб-сайта WordPress, вы можете повысить рейтинг своих продуктов WooCommerce в Google с помощью тегов продуктов WooCommerce.Следовательно, теги работают как прекрасный источник для множителя внутренних ссылок вашего продукта WooCommerce.

Добавление / создание / редактирование тегов продуктов WooCommerce

Как добавить теги продуктов WooCommerce?

Добавление тега продукта WooCommerce аналогично добавлению категории продукта WooCommerce.

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

Заполните следующие данные:

Имя: Здесь вы добавите имя тега, который хотите создать.

Slug: Вы также можете добавить это поле для версий, удобных для URL.

Описание: Опишите свой тег. Это снова необязательно, так как не отображается во всех темах.

Нажмите синюю кнопку с названием « Добавить новый тег », и ваш тег будет создан.

• Перейти к Продукты> Добавить продукты . Вы можете проверить свои теги на правой панели под категориями продуктов.

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

Удаление тегов продуктов WooCommerce

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

• Перейти к продуктам> Все продукты> Редактировать продукт
• Найдите мета-поле тегов продуктов WooCommerce на этой странице.

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

Атрибуты продукта WooCommerce

Что такое атрибуты продукта WooCommerce?

Атрибут продукта WooCommerce — это еще один способ сгруппировать ваши продукты WooCommerce. Они определяют некоторые дополнительные функции ваших продуктов WooCommerce.

Эти дополнительные сведения улучшат работу ваших клиентов и дадут более четкое представление о ваших продуктах WooCommerce.

Например, платье может иметь следующие атрибуты:

Цвет : зеленый, черный, фиолетовый, красный
Размер : L, XL, XXL, S, M, XS
Materia l: Хлопок, лен, шелк, жоржет

Для WooCommerce этот тип данных имеет два использования:

1. Через виджет WooCommerce

   С помощью «Фильтровать продукты по атрибуту» вы можете выбрать определенный атрибут.Кроме того, когда вы добавляете этот виджет на боковую панель вашего магазина WooCommerce, ваши клиенты WooCommerce могут фильтровать товары на основе этих атрибутов.

2. Через переменные продукты

   Определите атрибуты продуктов для создания переменных продуктов WooCommerce. Атрибуты продукта WooCommerce помогут различать варианты ваших продуктов WooCommerce.

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

Добавление / создание / редактирование атрибутов продукта WooCommerce

Как добавить атрибуты продукта WooCommerce?

На панели администратора WordPress:

• Перейти к продуктам> Атрибуты

Заполните поля появившейся формы.

Имя: Добавьте имя атрибута продукта WooCommerce, который вы хотите создать.

Slug: Это будет версия имени тега вашего продукта, удобная для URL.

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

Например, если «зеленый» является одним из атрибутов вашего продукта в цвете, и вы включили архивы, вы можете добавить http://yourstore.com/pa_color/green/ в свое меню, чтобы отображалась только зеленая одежда. (pa означает атрибут продукта)

Порядок сортировки по умолчанию: Здесь вы найдете параметры в раскрывающемся меню:

• С Custom ordering , настраивая термины, вы можете сортировать теги, перетаскивая термины в списке.
• Если значения являются числами, выберите « Имя (числовое) ». Он будет отсортирован по числовым значениям.
• ‘ Name ’ отсортирует термины в алфавитном порядке.
• « ID термина » относится к уникальному названию продуктов в таблице терминов.

Теперь нажмите синюю кнопку « Добавить атрибут », и атрибуты будут созданы. В таблице справа будут показаны атрибуты, но значения атрибутов добавляться не будут.

Добавление терминов в атрибуты продукта WooCommerce:

• Перейдите в раздел «Продукты»> «Атрибуты»> «Настроить условия»

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

Щелкните « Add New [Attribute_Name] » и создайте. Вы можете добавить несколько терминов и значений атрибутов, повторив этот процесс.

Добавление глобальных атрибутов WooCommerce к продуктам

Добавление созданных атрибутов к вашим товарам:

• Перейти к продуктам> Добавить продукт
• Вкладка «Найти атрибуты» в «Данных о продукте».

Здесь вы найдете все атрибуты продукта WooCommerce и выберите один из раскрывающегося меню.

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

Вот и мы!

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

Бесплатная консультация для электронной коммерции / WooCommerce Business

Получить консультацию

Как отображать категории WooCommerce в вашем меню — Max Mega Menu

В этой статье мы рассмотрим шаги, необходимые для отображения категорий WooCommerce в вашем меню.

Шаг 1. Включите категории WooCommerce

Перейдите к Внешний вид> Меню и разверните раздел «Параметры экрана» в правом верхнем углу страницы. Включите «Категории продуктов» и «Теги продуктов».

Создайте пункт меню «Магазин», затем добавьте категории продуктов в качестве пунктов подменю.

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

Сохраните меню.

Наведите курсор на пункт меню «Магазин» и нажмите синюю кнопку мегаменю. Установите «Режим отображения подменю» на «Мега-меню — Макет сетки».

Макет сетки будет автоматически заполнен элементами подменю (в данном случае нашими категориями продуктов). Разложите эти элементы в 4 столбца.

Наше меню теперь выглядит так:

Шаг 4: Добавление значков в категории

На этом этапе мы добавим пользовательские значки в наши пункты меню WooCommerce.Эта функция является частью Max Mega Menu Pro. Пользователи бесплатного плагина могут вместо этого выбрать дашиконы.

Наведите указатель мыши на пункт меню «Nokia» и нажмите синюю кнопку мегаменю.

На вкладке «Настройки» установите для параметра «Положение значка» значение «Сверху» и сохраните настройки.

На вкладке «Значок» выберите пользовательский значок и установите соответствующий размер.

Сохраните пользовательский значок и повторите этот шаг для остальных категорий продуктов.

После добавления значков наше меню выглядит так:

Шаг 5. Стилизация текста

Текст под каждым значком необходимо выровнять по центру.Мы используем стандартные пункты меню для отображения категорий в меню, поэтому мы можем использовать параметры, встроенные в редактор тем. Перейдите в Мега-меню > Темы меню> Мега-меню и прокрутите вниз до раздела «Пункты меню второго уровня». Здесь вы можете установить параметры шрифта.

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

Результат

Как добавить категории продуктов WooCommerce в меню

Хотите включить категории продуктов в свое меню? Вы пришли в нужное место.В этом посте мы покажем вам 2 различных метода добавления категорий продуктов WooCommerce в меню .

Зачем добавлять категории товаров в меню?

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

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

Здесь вы узнаете, как добавить категории продуктов WooCommerce в меню, чтобы улучшить навигацию по сайту. Например, предположим, что покупатель хочет приобрести мобильный телефон Samsung в вашем интернет-магазине.Разве не было бы замечательно, если бы они могли перейти в раздел мобильных телефонов Samsung прямо из меню и легко найти продукт, который они ищут? Лучшая навигация поможет вам улучшить качество обслуживания клиентов и повысить коэффициент конверсии.

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

Как добавить категории продуктов WooCommerce в меню

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

1. Из админки WordPress
2. С плагином

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

1) Из панели управления WordPress

Самый простой и удобный для новичков способ включить категории товаров WooCommerce в меню. Не требует дополнительных инструментов и занимает всего несколько минут. Сначала войдите в свою панель управления WordPress и перейдите в Внешний вид> Меню .

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

Создание меню

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

• Страницы
• Посты
• Категории
• конечных точек WooCommerce
• Продукты
• Категории продуктов

Не видите опцию товаров и категорий WooCommerce? Не волнуйся. Они скрыты, поэтому вам просто нужно отобразить их. Перейдите к настройкам параметров экрана и установите соответствующие флажки, как показано ниже.

Затем откройте раздел категорий WooCommerce и проверьте доступные категории в вашем интернет-магазине.На вкладке Просмотреть все вы сможете увидеть все доступные категории.

Вы можете выбрать все категории и добавить их в свое меню или включить определенные категории.

Добавление категорий продуктов в меню

Для этой демонстрации мы добавим все категории в меню.

После этого вы можете настроить элементы в разделе «Меню». Вы можете изменить положение элемента, создать подменю, выбрать, где их отображать, и многое другое.

Если вы хотите настроить свое меню еще больше, ознакомьтесь с разделом Параметры экрана .Там вы увидите Расширенные свойства меню , которые вы можете применить к своим пунктам меню.

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

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

2) Добавьте категории продуктов в меню с помощью QuadMenu

В этом разделе мы покажем вам, как включить категории продуктов в меню с помощью QuadMenu. QuadMenu — отличное мега-меню freemium, которое позволяет легко создавать и управлять различными типами меню.У этого плагина есть бесплатная версия с основными функциями, которые вы можете скачать здесь, и 3 премиальных плана с расширенными функциями, которые начинаются от 15 долларов США (единовременный платеж).

Кроме того, вы можете интегрировать QuadMenu с любой темой WordPress, включая OceanWP, Avada, Divi, Astra, GeneratePress и многие другие. В этой демонстрации мы покажем вам, как добавить категории продуктов WooCommerce в меню с помощью темы GeneratePress.

Установка и активация

Сначала установите и активируйте QuadMenu на своем сайте.Для этого перейдите в раздел Plugins , найдите QuadMenu и нажмите Install .

Затем вам необходимо установить надстройку QuadMenu GeneratePress. Если вы используете другую тему, например Divi или Avada, вам необходимо установить специальное расширение для вашего магазина WooCommerce. Вы можете ознакомиться со всеми расширениями здесь.

После активации расширения вы будете перенаправлены в настройки плагина. Оттуда вы сможете настроить плагин, меню и основные настройки.Бесплатная версия QuadMenu поставляется с основными функциями, которые позволяют легко добавлять категории продуктов в меню. Для этого перейдите в настройки Default Theme , где вы сможете увидеть все основные параметры конфигурации. Вы можете выбрать три разных варианта макета для меню и выбрать выравнивание. Кроме того, вы можете создавать липкие меню, тени мобильного меню, переключать, заголовок, значок, кнопку и параметры типографики, а также включать анимацию. Например, давайте посмотрим, как изменить семейство шрифтов в меню.

Сначала перейдите в раздел Typography .

QuadMenu по умолчанию поставляется со всеми шрифтами Google, поэтому выберите любой понравившийся шрифт из раскрывающегося списка.

Затем вы также можете изменить размер шрифта и межбуквенный интервал. Если вас устраивают изменения, нажмите Сохранить . Кроме того, вы также можете добавлять анимацию. Просто перейдите в раздел Animations и выберите эффекты, которые вы хотите применить к тексту, субтитрам, значку и другим элементам.

Несколькими щелчками мыши вы сможете поднять стандартное меню WordPress на другой уровень.Теперь, если вы хотите пойти дальше, вам потребуются более продвинутые функции. Для этого вам понадобится премиум-версия QuadMenu.

Установка и активация версии Premium QuadMenu

Премиум-версию QuadMenu можно приобрести в официальном магазине всего за 15 долларов США. После этого войдите в свою учетную запись QuadLayers и загрузите файлы плагинов. Кроме того, получите информацию о лицензировании на панели управления вашей учетной записи. После этого установите плагин в свой магазин и активируйте его.

Затем перейдите в раздел License и проверьте свой лицензионный ключ.

QuadMenu доступно на:

• Сайт QuadLayers
• Envato
• Элегантная рыночная площадь

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

Теперь давайте продолжим и посмотрим, как настроить меню WordPress.

Включение QuadMenu

Сначала перейдите в Внешний вид> Меню , как мы делали в предыдущем методе, и добавьте категории продуктов в свое меню. Перед сохранением меню установите флажок QuadMenu Dev в разделе «Настройки меню ». Это важный шаг, поэтому обязательно установите соответствующий флажок.

После сохранения меню проверьте пункты меню.При наведении указателя мыши на элементы вы увидите новое меню под названием QuadMenu , как показано ниже.

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

Вкладка Default содержит основные параметры, которые вы настраиваете в разделе меню, поэтому мы рекомендуем вам сосредоточиться на вкладках General и Icon . На вкладке «Общие» вы увидите параметры для настройки:

• Субтитры
• Значок
• Поплавок
• Настройка размера дисплея
• Выпадающий поплавок

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

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

Выбрав понравившиеся значки, проверьте веб-сайт через интерфейс, и вы увидите значки в своем меню.

Изменение стиля

А теперь давайте продолжим и настроим наше меню еще немного, используя настройки темы QuadMenu . Хорошая новость в том, что вы можете настроить множество элементов, не написав ни единой строчки кода.

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

Итак, в интерфейсе вы увидите, что теперь цвет фона синий.

Если после сохранения изменений вы не видите их во внешнем интерфейсе, просто очистите кеш WordPress и повторно примените изменения. Вот как вы можете использовать QuadMenu для редактирования меню WooCommerce.

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

Заключение

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

1. Из панели управления WordPress
2. Использование QuadMenu

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

С другой стороны, QuadMenu — очень мощный и простой в использовании плагин для создания и управления меню. Он позволяет вам полностью контролировать свое меню, добавлять собственные значки шрифтов, шрифты Google, изменять цвета, макет и многое другое. Кроме того, с помощью QuadMenu вы можете легко создавать мегаменю, которые очень хорошо подходят для магазинов с большим количеством товаров. Поэтому, если вы хотите внести множество изменений и вывести свои меню на новый уровень, QuadMenu — отличный выбор.

Знаете ли вы другие способы добавления категорий товаров в меню? Возникли ли у вас какие-либо проблемы при использовании руководства? Дайте нам знать в комментариях ниже!

Управление категориями продуктов • Учебник WooCommerce

Обновлено 10 декабря 2015 г.

Категоризация ваших продуктов — это наиболее удобный способ для ваших клиентов просматривать продукты, которые вы предлагаете в своем магазине oline Store.В следующих нескольких строках этого руководства мы покажем вам, как именно вы должны создавать категории продуктов и управлять ими в своем интернет-магазине.

Для полного управления категориями товаров в вашем магазине:

Шаг 1 Добавьте новую категорию

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

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

• Имя — Актуальное название категории
• Slug — Слаг для URL, который будет использоваться этой категорией
• Родительский — Если эта категория должна иметь родительскую категорию
• Описание — Описание данной категории
• Тип отображения — Как должны отображаться элементы категории
• Миниатюра — Любая миниатюра, которую вы хотите использовать для созданной категории

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

Шаг 2: изменение и удаление существующих категорий

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

Чтобы отредактировать категорию, вам нужно будет навести курсор на любую категорию, которую вы хотите отредактировать, а затем щелкнуть ссылку Edit .

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

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

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

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

Поздравляем! Теперь вы знаете, как полностью управлять категориями в своем интернет-магазине на базе WooCommerce!

Категории продуктов, теги и атрибуты

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

При создании интернет-магазина у компании есть несколько вариантов для платформ электронной коммерции. Очень популярным выбором является плагин WooCommerce для WordPress с ориентировочной долей рынка 26,5% . Для предприятий электронной коммерции WooCommerce предлагает легкую и простую разработку и развертывание интернет-магазинов. Во всех случаях оптимизированный хостинг WooCommerce значительно увеличивает шансы на успех магазина.

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

Есть несколько способов продвижения интернет-магазина. Традиционная тактика включает специальные предложения скидок и таргетированную рекламу. Проблема в том, что все эти хорошо известные традиционные тактики не работают в наш век поисковых систем.Чтобы добиться успеха в цифровом мире, магазины должны следовать нескольким эффективным рекомендациям для успешной работы в поисковой выдаче.

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

Категории

Все продукты с похожими характеристиками сгруппированы по соответствующим категориям.

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

WooCommerce позволяет создавать категории и управлять ими для правильной классификации всего инвентаря. На левой панели панели управления WordPress перейдите к Продукты> Категории . Появится экран, похожий на следующий снимок экрана:

Позвольте мне объяснить несколько важных полей на этом экране.

• Имя: Это название категории, которая будет видна посетителям.
• Slug: Это понятное для SEO имя, которое будет использоваться в структуре URL страницы категории.
• Родительский: Вы можете создавать подкатегории в WooCommerce. Если у вас есть категория с именем Рубашки , вы можете создать подкатегорию с именем Рубашки поло . В данном случае рубашки являются родительской категорией рубашек поло .
• Описание: Это поле содержит описание категории. По умолчанию он не отображается. Однако некоторые темы отображают описание на странице.
• Тип отображения: С помощью этой опции вы можете выбрать способ отображения вашей категории.Существует четыре способа отображения категории: по умолчанию, продукты, подкатегория или и то, и другое.
• Миниатюра: Вы можете установить миниатюру для своей категории продукта.

После создания категории легко добавить продукт и проверить, правильно ли настроена категория.

Чтобы добавить продукт в категорию, перейдите на панель администратора WordPress> Продукты> Добавить продукт

Введите данные о вашем продукте.Справа вы можете увидеть опцию , чтобы выбрать категорию для этого продукта.

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

Теги

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

Чтобы установить теги для продукта, перейдите к Продукты> Теги.

Теперь вы можете добавить новый тег на следующей панели.

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

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

На этом снимке экрана вы можете увидеть категории и теги, присвоенные продукту.

Атрибуты

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

Продолжим пример с рубашкой.Представьте, что инвентарь рубашки имеет следующие атрибуты:

Цвет : зеленый, красный

Размер : S, M, L, XL

Теперь я добавлю эти атрибуты к продукту. Из панели администратора WordPress перейдите к Продукты> Атрибуты . Появится экран, похожий на следующий снимок экрана.

В этом примере я добавил атрибут Цвет .

Некоторые важные поля в этой форме есть.

• Имя: Это имя атрибута.
• Slug: Понятное имя SEO, которое используется в URL-адресе.
• Включить архив: Включите, если вы хотите, чтобы этот атрибут имел архивы товаров в магазине.
• Тип: Есть два варианта — Выбрать : отобразится раскрывающееся меню для уже созданных тегов. Текст: Здесь пользователь должен вручную ввести имя атрибута.
• Порядок сортировки по умолчанию: Теги можно сортировать в соответствии с заказным порядком, именем, именем (числовым) и идентификатором термина.

После добавления атрибута он будет отображаться на правой боковой панели. Есть два способа установки атрибутов. Вы можете либо щелкнуть значок Settings для вновь созданного атрибута, либо добавить его непосредственно на страницу продукта.

Щелкните Настройки .

Появится новая форма. Заполните поля и добавьте название цвета.В этом примере я добавлю Green.

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

Теперь вы можете присвоить этот атрибут одному или нескольким товарам. Перейти к добавить продукт или отредактировать существующий продукт. Установите атрибут и его условия, выполнив следующие действия.

Нажмите Добавить , и откроется еще одно текстовое поле для установить условия .Поскольку я добавил термин Green, он появится в раскрывающемся меню.

Второй способ — добавить термин, нажав кнопку Добавить новый

Вы могли видеть, что для этого продукта настроен цвет Red .

Чтобы убедиться, что термин Red был добавлен в список атрибутов Color , перейдите к атрибутам и подтвердите, что Red добавлен успешно.

Вы также можете добавить атрибут (ы) прямо из вкладки Продукт . Теперь я добавлю еще один атрибут Size и установлю термин S, M, L, XL напрямую со страницы Product . Вот как это сделать.

P.S: Чтобы добавить сразу несколько терминов, используйте вертикальный разделитель (|).

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

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

Если вы добавите атрибут из Продукты > Атрибуты , он будет постоянно доступен для назначения всем продуктам. Однако, если вы добавите атрибут напрямую, он будет установлен только для этого конкретного продукта.