В WooCommerce можно настроить отображение товаров в интернет-магазине по-разному, в зависимости от структуры вашего сайта и предпочтений пользователей. Отображение товаров может включать различные настройки, такие как количество товаров на странице, фильтры, сортировка, отображение в виде сетки или списка, а также настройки карточки товара. Рассмотрим различные аспекты, как вы можете настроить отображение товаров в WooCommerce. 1. Основные настройки отображения товаров WooCommerce предоставляет базовые настройки для управления отображением товаров на страницах магазина и категорий. Эти параметры можно изменить через панель администрирования. Шаги для настройки отображения товаров: Перейдите в WooCommerce > Настройки > Продукты. Откройте вкладку Отображение. Здесь вы найдете следующие параметры: Отображение страницы магазина: Выберите, что показывать на странице магазина — Товары, Категории или Товары и категории. Отображение по умолчанию на странице категории: Настройте отображение товаров в категориях — Товары, Категории или Товары и категории. Количество товаров на странице: Установите количество товаров, отображаемых на странице. Это можно настроить через Настройки > Чтение или в вашей теме. Сортировка товаров по умолчанию: Выберите, как сортировать товары по умолчанию (например, по популярности, по дате добавления, по рейтингу или цене). Нажмите Сохранить изменения, чтобы применить настройки. 2. Изменение количества отображаемых товаров на странице По умолчанию WooCommerce отображает определенное количество товаров на странице магазина и в категориях. Это количество можно изменить как через настройки WordPress, так и с помощью кастомного кода или плагинов. Изменение количества товаров через настройки WordPress: Перейдите в Настройки > Чтение. В разделе Количество элементов на странице укажите желаемое количество товаров, которое должно отображаться на странице магазина. Изменение количества товаров с помощью кода: Если ваша тема не поддерживает изменение количества товаров через интерфейс настроек, вы можете добавить следующий код в файл functions.php вашей темы: add_filter( 'loop_shop_per_page', 'custom_shop_products_per_page', 20 ); function custom_shop_products_per_page( $products_per_page ) { return 12; // Укажите количество товаров на странице, например, 12 } Этот код задает количество товаров на странице магазина. 3. Изменение отображения товаров: сетка или список WooCommerce по умолчанию отображает товары в виде сетки, но вы можете добавить возможность переключаться между отображением товаров в виде списка или сетки. Использование плагина для переключения между сеткой и списком: Установите и активируйте плагин Grid/List View for WooCommerce (бесплатный). После активации плагин добавит переключатель между видами отображения товаров (сетка или список) на странице магазина и категорий. Настройте параметры отображения через интерфейс плагина, чтобы лучше соответствовать стилю вашего магазина. 4. Настройка карточки товара Карточка товара содержит основную информацию о продукте: изображение, цену, описание, отзывы и кнопку "Добавить в корзину". Вы можете настроить, какие элементы будут отображаться в карточке товара, используя стандартные настройки WooCommerce или кастомный код. Пример настройки карточки товара: Изменение порядка элементов на странице товара: Вы можете изменить порядок отображения элементов на странице товара с помощью хуков WooCommerce. Добавьте следующий код в файл functions.php вашей темы: remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 ); add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 25 ); // Изменение позиции цены Этот код перемещает отображение цены ниже описания товара. Удаление ненужных элементов из карточки товара: Если вы хотите убрать элементы, такие как рейтинги, артикулы или вкладки с отзывами, можно использовать следующий код: remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 ); // Убирает рейтинг remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 ); // Убирает артикул и категории 5. Добавление фильтров товаров Фильтры помогают пользователям находить нужные товары, например, по цене, атрибутам или категориям. В WooCommerce доступны базовые фильтры, такие как фильтрация по цене и категориям. Использование виджетов для добавления фильтров: Перейдите в Внешний вид > Виджеты. Добавьте виджеты фильтров WooCommerce, такие как Фильтр товаров по атрибутам, Фильтр товаров по цене или Фильтр по категориям, в боковую панель или любую другую область виджетов. Настройте виджеты для правильной фильтрации товаров. Использование плагинов для расширенной фильтрации: Если вам нужна более продвинутая фильтрация, например, AJAX-фильтры, можно использовать плагины: WOOF — Products Filter for WooCommerce (бесплатный и платный) YITH WooCommerce Ajax Product Filter (бесплатный и платный) 6. Использование коротких кодов для отображения товаров WooCommerce предоставляет мощные короткие коды для отображения товаров на страницах. Это может быть полезно для создания специальных страниц или выделения популярных товаров. Примеры коротких кодов: Отображение товаров из определенной категории: [products category="odezhda" limit="4" columns="4"] Этот код отображает 4 товара из категории "Одежда" в 4 колонки. Отображение популярных товаров: [products limit="4" columns="4" best_selling="true"] Этот код отображает 4 самых популярных товара. Отображение товаров по меткам: [products tag="novinki" limit="4" columns="4"] Этот код отображает 4 товара с меткой "Новинки". 7. Изменение стилей отображения товаров с помощью CSS Если вы хотите настроить внешний вид отображения товаров (например, изменить размеры изображений, шрифты или отступы), вы можете добавить пользовательские стили через CSS. Пример CSS для изменения стиля товаров: .woocommerce ul.products li.product { border: 1px solid #ddd; padding: 20px; margin-bottom: 20px; } .woocommerce ul.products li.product h2 { font-size: 18px; color: #333; } .woocommerce ul.products li.product .price { color: #e74c3c; font-weight: bold; font-size: 16px; } Этот код добавляет обводку к товарам, изменяет цвет и размер заголовков и делает цену более заметной. WooCommerce предлагает множество возможностей для настройки отображения товаров, включая выбор количества товаров на странице, сортировку, фильтрацию, а также настройку внешнего вида карточки товара и самого каталога. Вы можете использовать встроенные инструменты, такие как виджеты и короткие коды, а также плагины и кастомный код, чтобы сделать процесс покупки для ваших клиентов удобным и интуитивным.