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

Как задать количество товаров на странице Магазин и в категориях

Вообще есть два способа это сделать – через кастомайзер и через фильтр-хук.

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

Способ 1. В настройках

Так как узнать количество товаров на странице? Умножить Товаров в строке × Строк на странице, в данном случае получается 12.

Способ 2. Через код

Тут мы будем использовать фильтр-хук loop_shop_per_page .

Обратите внимание, что настройка «Строк на странице» исчезнет, если вы задействуете этот хук в своём плагине или теме!

add_filter( 'loop_shop_per_page', 'truemisha_products_per_page', 20 ); function truemisha_products_per_page( $per_page ) { $per_page = 9; // по умолчанию wc_get_default_products_per_row() * wc_get_default_product_rows_per_page() return $per_page; }

Если не знаете, куда отправлять код – в functions.php текущей или (лучше) дочерней темы.

Миша

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

Пишите, если нужна помощь с сайтом или разработка с нуля.

Комментарии — 7

Александр 18 Июл 2020

Михаил, добрый день!
Я использую тему «blossom-fashion».
Жестко прописано отображение товаров в мобильной версии в два столбца при просмотре магазина.
На компьютере отображается четыре столбца (эти настройки я нашел).
Скажите пожалуйста, как можно изменить настройки, чтобы на компьютере так и осталось 4-е столбца, а на телефоне отображались товары в один столбец?
С уважением, Александр

Миша 21 Июл 2020

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

Почему нет вкладки «Отображение товаров» в настройках Woocommerce?

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

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

Версия Woocommerce 3.3.5, WP – 4.9.5. На вкладке статуса плагин говорит, что нужно обновить файлы шаблонов woocommerce для темы.

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

• Вопрос задан более трёх лет назад
• 3285 просмотров

Настройки товара

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

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

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

Вот структура кода:

add_action( 'woocommerce_product_options_inventory_product_data', 'truemisha_product_options' ); function truemisha_product_options() { echo '
// выводим тут поля echo '
'; } add_action( 'woocommerce_process_product_meta', 'truemisha_save_checkboxes', 20, 2 ); function truemisha_save_checkboxes( $id, $post ){ // сохраняем значения полей // не забываем про их очистку }

Давайте теперь разбираться подробно, что к чему.

• Когда вы добавляете свои поля внутрь , то вы создаёте группу полей, они будут красиво разделены серой линией (видно на скриншоте выше).
• Для вывода полей вы конечно можете использовать обычный HTML, но я однозначно рекомендую встроенные в WooCommerce функции woocommerce_wp_text_input(), woocommerce_wp_textarea_input(), woocommerce_wp_checkbox(), woocommerce_wp_select() и woocommerce_wp_radio(), которые как раз для этой цели и предназначены!
• Как вы поняли, настройки сохраняются как обычные метаданные, поэтому используем get_post_meta() для получения (но обратите внимание, что value можно не указывать, если ключ мета-поля совпадает с id поля) и update_post_meta() для сохранения
• Вы можете заморочиться и добавить ещё одну nonce-проверку в свой код, но WooCommerce и так добавляет одну.
• Не забываем про очистку полей при сохранении, её никто не отменял, а вот про очистку при выводе – забудьте, всё уже встроено в функции вывода полей.

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

Вкладка «Основные»

• woocommerce_product_options_general_product_data – то, что использовали мы для создания группы настроек,
• woocommerce_product_options_pricing – группа полей с ценами,
• woocommerce_product_options_tax – группа полей с налогами.

Вкладка «Запасы»

• woocommerce_product_options_stock_status – первая группа полей,
• woocommerce_product_options_sold_individually – вторая группа, там где чекбокс индивидуальной продажи,
• woocommerce_product_options_inventory_product_data – создание собственной группы полей.

Вкладка «Доставка»

• woocommerce_product_options_dimensions – первая группа полей с габаритами товара,
• woocommerce_product_options_shipping – вторая группа полей.

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

Вкладка «Сопутствующие»

Тут всего один хук – woocommerce_product_options_related .

Вкладка «Дополнительно»

• woocommerce_product_options_reviews – группа полей с отзывами,
• woocommerce_product_options_advanced – если создаёте свою группу полей.

Создание своей вкладки

А что если нам не хватает стандартных владок метабокса и нужно добавить-таки свою собственную?

/* * Создание вкладки */ add_filter( 'woocommerce_product_data_tabs', 'truemisha_new_tab' ); function truemisha_new_tab( $tabs ){ //unset( $tabs[ 'general' ] ); // отключаем вкладку Основные //unset( $tabs[ 'inventory' ] ); // Запасы //unset( $tabs[ 'shipping' ] ); // Доставка //unset( $tabs[ 'linked_product' ] ); // Сопутствующие //unset( $tabs[ 'attribute' ] ); // Атрибуты //unset( $tabs[ 'variations' ] ); // Вариации //unset( $tabs[ 'advanced' ] ); // Дополнительно $tabs[ 'truemisha' ] = array( 'label' => 'Настройки Миши', 'target' => 'truemisha_tab_content', 'class' => array( 'class1', 'class2' ), 'priority' => 15, ); return $tabs; } /* * Заполнение вкладки */ add_action( 'woocommerce_product_data_panels', 'truemisha_tab_contents' ); function truemisha_tab_contents(){ echo '
'; // тут уже выводим поля echo '
'; } /* * Сохранение полей */ add_action( 'woocommerce_process_product_meta', 'бла бла бла. '

• Бонусом показал вам, как удалить стандартные вкладки настроек товара ��
• При указании параметров вкладки (строки 17-20) самый важный, понятно, это target , который должен совпадать с атрибутом ID на строке 33.
• Меняя параметр priority , можно изменить порядок расположения вашей вкладки по отношению к другим.

Вот что у меня получилось:

Наверное последний вопрос, который тут можно задать это – «А как указать произвольную иконку, например из Dashicons?» И ответ максимально банален – «При помощи CSS».

Условия отображения полей

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

Можем ли мы это как-то использовать и для своих вкладок и полей?

Вот о чём я говорю:

Да и ещё раз да! Вы можете отображать или скрывать свои вкладки настроек, поля или группы полей в зависимости от типа товара, от того, виртуальный товар или скачиваемый! ��

Для этого нужно лишь указать соответствующий CSS класс. И вот их список:

• hide_if_simple , show_if_simple – скрываем / отображаем, если простой товар,
• hide_if_grouped , show_if_grouped – если сгруппированный,
• hide_if_external , show_if_external – если внешний,
• hide_if_variable , show_if_variable – если вариативный,
• hide_if_virtual , show_if_virtual – если виртуальный,
• hide_if_downloadable , show_if_downloadable – если скачиваемый.

Также у вас есть возможность использовать несколько классов сразу!

Купить курс

• 11 видеоуроков
• Можно скачать готовый код после каждого урока
• Можно начать проходить курс сразу же после оплаты
• Единоразовый платёж
• Доступ навсегда
• Уроки актуальны в 2024-м году

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

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

В плагине WooCommerce есть несколько вариантов сортировки товаров на странице магазина. По-умолчанию, Вы найдёте 6 настроек во вкладке WooCommerce > Настройки > Продукты > Отображение (WooCommerce > Settings > Products > Display):

• Сортировка по-умолчанию (пользовательский порядок + название)
• Популярность (количество продаж)
• Средняя оценка
• Самые новые
• Цена (по-возрастанию)
• Цена (по-убыванию)

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

1. Во-первых, во вкладке WooCommerce > Настройки > Продукты (WooCommerce > Settings > Products), измените Сортировка товаров по-умолчанию (Default Product Sorting) на Настройки по-умолчанию (Default Setting) (пользовательский порядок + название):
2. Затем нажмите на кнопку Сортировка товаров (Sort Products) вверху страницы списка товаров. Теперь Вы можете начать настройку порядка отображения товаров. Эта настройка автоматически отсортирует продукты в алфавитном порядке (alphabetically) в вашем магазине. Однако, Вы можете также использовать эту настройку, для того чтобы создать пользовательский порядок ваших товаров WooCommerce:
3. Это позволит Вам перетягивать (drag and drop) товары, формируя порядок, который Вы хотите видеть на странице магазина. Обратите внимание, если Вы измените порядок товаров, полностью упорядочив их по вашему предпочтению, это отменит упорядочивание товаров в алфавитном порядке:
4. Перетягивание товаров изменит Порядок пунктов меню (Menu Order) во вкладке Данные о товарах > Дополнительные настройки (Product Data > Advanced) для каждого товара. Вы не можете более задать порядок пунктов на 0. Если Вы хотите вернуться к сортированию по-алфавиту, Вам придётся изменить номер каждого товара на 0, что займёт много времени для магазина, где много товаров:
5. Вы можете также вручную изменить порядок пунктов меню во вкладке Данные о товарах > Дополнительные настройки (Product Data > Advanced). Товары с номером отображения 0 будут отображены первыми, затем 1, 2, 3, и т.д. Вы можете использовать эту функцию для создания пользовательского порядка, или групп товаров, в которых товары будут упорядочены в алфавитном порядке. Например, если у нескольких товаров номер меню = 1, тогда они отобразятся в алфавитном порядке после товаров с номером = 0:

Вы можете также ознакомиться с детальным видео-туториалом ниже:

Эта запись была размещена в WooCommerce туториалы и помечена как category, product, sorting, WooCommerce. Добавьте в закладки постоянную ссылку.