Страница товара в WooCommerce играет ключевую роль в онлайн-магазине, так как именно здесь покупатель принимает решение о покупке. Страница содержит полную информацию о товаре, его цену, фотографии, описание, отзывы и кнопку "Добавить в корзину". Вы можете настроить страницу товара для улучшения пользовательского опыта и адаптировать её под ваш бизнес. Рассмотрим, как можно настроить и улучшить страницу товара в WooCommerce. 1. Стандартная структура страницы товара По умолчанию WooCommerce выводит следующие элементы на странице товара: Название товара Галерея изображений Цена товара Описание товара (краткое и полное) Кнопка "Добавить в корзину" Список категорий и тегов Отзывы Дополнительная информация (атрибуты, связанные товары и т.д.) 2. Настройка страницы товара WooCommerce позволяет настраивать и изменять элементы страницы товара без необходимости глубокого вмешательства в код. Однако для более сложных изменений можно использовать хуки, кастомные шаблоны или плагины. Использование хуков WooCommerce использует хуки для отображения различных элементов страницы товара. С помощью этих хуков вы можете добавлять, удалять или перемещать элементы. Пример изменения порядка элементов на странице товара: // Перемещение цены выше описания remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 ); add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 5 ); Пример полного списка хуков для страницы товара: woocommerce_before_single_product_summary — перед основным контентом продукта. woocommerce_show_product_images — для отображения изображений товара. woocommerce_single_product_summary — выводит информацию о товаре (название, цена, описание, кнопка "Добавить в корзину"). woocommerce_after_single_product_summary — после основного контента (связанные товары, описание и т.д.). Удаление ненужных элементов Если вы хотите удалить какой-то элемент, например, рейтинг или теги, можно использовать следующий код: // Удаляем рейтинг товара remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 ); // Удаляем метки товара (теги) remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 ); 3. Кастомизация шаблона страницы товара Если вам нужно полностью изменить структуру страницы товара, вы можете создать собственные шаблоны. Шаги для изменения шаблона: В вашей активной теме создайте папку woocommerce (если её ещё нет). Скопируйте файл шаблона товара из плагина WooCommerce: wp-content/plugins/woocommerce/templates/single-product.php. Вставьте его в папку вашей темы: wp-content/themes/your-theme/woocommerce/single-product.php. Теперь вы можете изменять структуру и стили шаблона под свои нужды. Пример изменения шаблона: Вы можете переставить блоки на странице товара или добавить свои поля. 4. Использование плагинов для настройки страницы товара Если вы не хотите редактировать код вручную, существуют плагины, которые позволяют настраивать страницу товара через интерфейс. Популярные плагины для кастомизации страницы товара: Elementor + Elementor WooCommerce Builder (платный и бесплатный) ? Elementor — это визуальный конструктор, который позволяет редактировать страницы товаров, добавляя кастомные блоки, кнопки, виджеты и т.д. ? WooCommerce Builder расширяет возможности Elementor для кастомизации страниц продуктов. WooCommerce Product Add-Ons (платный) ? Этот плагин позволяет добавлять дополнительные поля на странице товара, такие как выпадающие списки, текстовые поля, чекбоксы и т.д. ? Отлично подходит для кастомизации продуктов, например, при продаже товаров с возможностью персонализации. WooCommerce Customizer (бесплатный) ? Плагин позволяет настроить страницы товаров через интерфейс без изменения кода. Вы можете редактировать кнопки, текстовые метки и другие элементы. YITH WooCommerce Zoom Magnifier (бесплатный и платный) ? Плагин добавляет функцию увеличения изображения товара при наведении курсора. Это улучшает визуальное восприятие продукта, что особенно полезно для интернет-магазинов с высококачественными изображениями. WOOF — Products Filter for WooCommerce (бесплатный и платный) ? Плагин позволяет добавлять продвинутые фильтры для поиска товаров, что помогает покупателям легче находить нужные товары. 5. Оптимизация SEO страницы товара Чтобы улучшить видимость ваших товаров в поисковых системах, нужно настроить SEO. Вот основные рекомендации: Оптимизация заголовка товара: Заголовок должен содержать ключевые слова, которые покупатели могут использовать для поиска этого товара. Чистый URL: Убедитесь, что URL товара содержит название продукта или ключевые слова. Описание товара: Добавьте уникальное и подробное описание продукта. Используйте ключевые слова естественным образом. Оптимизация изображений: Названия файлов изображений должны быть осмысленными и содержать ключевые слова. Также добавьте alt текст для каждой картинки. Отзывчивость: Убедитесь, что страница товара хорошо отображается на мобильных устройствах, так как это влияет на SEO. 6. Добавление отзывов и рейтингов Отзывы клиентов и рейтинги играют важную роль в повышении доверия к вашему магазину и товарам. WooCommerce предоставляет встроенную систему отзывов, которую можно настроить. Включите отзывы в настройках WooCommerce: WooCommerce > Настройки > Продукты. Убедитесь, что включена опция "Разрешить отзывы о товарах". Вы можете модерировать отзывы вручную через админ-панель. Пример включения системы отзывов: add_filter( 'woocommerce_product_tabs', 'woocommerce_product_reviews_tab' ); function woocommerce_product_reviews_tab( $tabs ) { $tabs['reviews']['title'] = __( 'Отзывы', 'woocommerce' ); $tabs['reviews']['callback'] = 'woocommerce_product_reviews_tab'; return $tabs; } 7. Связанные товары и перекрёстные продажи WooCommerce автоматически выводит связанные товары, товары из тех же категорий или теги на странице товара, чтобы стимулировать перекрёстные продажи. Вы можете настроить, какие продукты будут выводиться в блоке "Похожие товары". Установка связанных товаров: Для установки связанных товаров вручную откройте нужный продукт в админке. В блоке Сопутствующие товары можно указать, какие товары отображать в блоках Сопутствующие товары и Вместе с этим товаром покупают. Страница товара в WooCommerce может быть настроена по вашему усмотрению с помощью встроенных инструментов, хуков, изменения шаблонов и плагинов. Улучшение страницы товара, добавление уникального контента, отзывов и связанных товаров способствует увеличению продаж и улучшению пользовательского опыта.