Легко создайте настраиваемую страницу продукта в WooCommerce: от начального уровня до продвинутого

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

Зачем нужно настраивать страницы продуктов вручную (то есть создавать их индивидуально, в соответствии с особенностями бренда или потребностей пользователей)?

Стандартная страница товара в WooCommerce обладает полным набором функций, однако имеет следующие ограничения:
Однотипный дизайн: многие магазины, использующие одну и ту же тематику, выглядят одинаково, что затрудняет создание узнаваемости бренда.
Жесткая структура: порядок и способ представления информации являются фиксированными (заголовок, галерея, аннотация, описание, отзывы и т. д.) и могут не соответствовать логическому процессу презентации некоторых продуктов.
Ограниченные функциональные возможности: стандартная страница не подходит для продуктов, требующих интеграции видеоуроков, просмотрщиков 3D-моделей, калькуляторов конфигураций в режиме реального времени и расширенных настроек, таких как гравировка текста или загрузка изображений.
Недостаточная оптимизация производительности и пользовательского опыта: стандартная страница может загружать все модули, в то время как настраиваемая страница может загружать их по мере необходимости, обеспечивая более быструю загрузку и улучшенный путь взаимодействия с пользователем.

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

Рекомендуемое чтение Полное руководство по разработке и оптимизации производительности электронной коммерческой веб-сайта на платформе WooCommerce.。

Основные методы настройки пользовательских страниц товаров в WooCommerce

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

Ультахост (UltaHost) – хостинг-провайдер, предоставляющий услуги хостинга для сайтов, построенных на платформе WordPress.

Гарантия возврата средств в течение 30 дней, неограниченная пропускная способность интернет-канала и объем баз данных, бесплатная защита от DDoS-атак. При покупке на срок 3 лет предоставляется скидка в размере 501 ТБ до 4 ТБ.

страница доступа

Использование страницного конструктора и настройки темы

Это самый подходящий способ для начинающих, не имеющих опыта программирования. С помощью популярных инструментов для создания сайтов (таких как Elementor Pro, Divi, WPBakery) и специальных модулей для работы с системой WooCommerce вы сможете легко и наглядно переставлять и настраивать элементы страницы товаров, используя интерфейс на основе принципа «перетаскивания».

Например, при использовании Elementor Pro…Single ProductМаленькие элементы интерфейса позволяют свободно размещать на холсте изображения из каталога товаров, заголовки, цены, кнопки для добавления товаров в корзину, краткие описания, метаданные и многое другое. Вы также можете создавать “шаблоны для отдельных товаров”, которые не соответствуют стандартной структуре интерфейса, и применять их к конкретным товарам или к целым категориям товаров.

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

Замена содержимого шаблонного файла с помощью подтемы

Это самый классический и гибкий подход для разработчиков. WooCommerce использует шаблонные файлы для отображения всех своих пользовательских интерфейсов; эти шаблоны находятся в определенной папке на сервере.plugins/woocommerce/templates/Эти элементы находятся в каталоге. Для безопасной их модификации согласно рекомендациям WordPress лучше всего использовать подтемы (subthemes).

Рекомендуемое чтение Как создать мощный онлайн-магазин в WordPress с использованием плагина WooCommerce。

Основные шаги включают в себя:
1. Создайте папку в каталоге тем (theme directory).woocommerceПапка.
2. Извлеките исходный шаблонный файл, который необходимо изменить (например, главный файл страницы отдельного продукта).single-product.phpили с более высокой степенью детализацииsingle-product/title.phpКопируйте это в вашу подтему.woocommerceВнутри каталога.
3. Внесите необходимые изменения в код в файле-копии.

Например, чтобы изменить местоположение отображения цен на товарах, вы можете скопировать соответствующий код и внести необходимые изменения.single-product/price.phpФайлы. Этот метод обеспечивает полный контроль над кодом и позволяет достичь наилучшей производительности.

Использование хуков (Actions & Filters) в WooCommerce

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

hosting.com Общий хостинг

Высокая производительность благодаря процессорам AMD EPYC, SSD-накопителям NVMe и LiteSpeed, круглосуточная экспертная поддержка, передовые меры безопасности, включая SSL, защиту от грубой силы, вредоносных программ и DDoS, экономия до 73%

страница доступа

• Акционные хуки (Action Hooks): используются для добавления контента в определенные места. Например, для этого можно воспользоваться…woocommerce_before_single_productНа верхней части страницы продукта нужно добавить баннер с использованием элемента формата “хук” (hook).

    add_action( 'woocommerce_before_single_product', 'my_custom_product_banner' );
    function my_custom_product_banner() {
        echo '<div class="custom-banner">Специальная акция с ограниченным сроком действия!</div>';
    }

• Фильтрующие хуки (Filter Hooks): используются для изменения выводимых данных. Например, для этого могут применяться различные алгоритмы обработки информации.woocommerce_product_tabsФильтры предназначены для изменения или удаления разделов на странице товара (таких как описание, отзывы, дополнительная информация).

    add_filter( 'woocommerce_product_tabs', 'my_custom_product_tabs' );
    function my_custom_product_tabs( $tabs ) {
        // 移除“附加信息”标签页
        unset( $tabs['additional_information'] );
        // 添加一个自定义标签页
        $tabs['custom_tab'] = array(
            'title'    => __( '使用教程', 'textdomain' ),
            'priority' => 50,
            'callback' => 'my_custom_tab_content'
        );
        return $tabs;
    }

Этот метод позволяет сосредоточить пользовательский код внутри подтем (subtopics).functions.phpПри обновлении системы WooCommerce изменения, внесенные в файлы или пользовательские плагины, не будут утеряны.

Создать совершенно новый пользовательский шаблон страницы.

Для ситуаций, требующих радикальных изменений, вы можете создать совершенно новый шаблон страницы для WordPress. Обычно этот процесс включает в себя следующие шаги:
1. Создайте в подтеме новый PHP-файл, например…template-custom-product.phpИ укажите имя шаблона в заголовке файла.
2. Используйте.WP_QueryИли напрямую с использованием глобальных переменных (например,$productЗагрузить текущие данные о продукте.
3. Полностью самостоятельно создавать код на HTML, CSS и JavaScript для отображения всей страницы, при этом вызывая необходимые функции системы WooCommerce (например, функции, связанные с обработкой заказов, товаров и пользовательских данных).wc_get_product(), do_action('woocommerce_before_add_to_cart_button')Это необходимо для обеспечения нормального функционирования ключевых элементов интерфейса, таких как корзина для покупок и система проверки наличия товаров на складе.
4. Назначьте этот шаблон конкретному продукту в интерфейсе управления WordPress или с помощью кода.

Это самый сложный, но в то же время наиболее гибкий метод, подходящий для создания высоко настроенных интерактивных страниц, таких как “Конфигуратор продуктов” или “Бронирование услуг”.

Рекомендуемое чтение Однооконный руководство: Создание собственного веб-сайта на платформе WooCommerce с нуля。

Практический пример: добавление пользовательских полей и их отображения с помощью хуков

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

Перед кнопкой добавления товара в корзину необходимо добавить поле ввода.

Мы будем использовать…woocommerce_before_add_to_cart_buttonИспользуйте «крючки» (hooks) для вставки текстового поля в интерфейс.

Общий хостинг InterServer

Общий хостинг $2.50 USD в месяц, первый месяц $0.1 USD промо-код tryinterserver, 461 скрипт облачных приложений, установка в один клик.

страница доступа

add_action( 'woocommerce_before_add_to_cart_button', 'display_custom_text_field' );
function display_custom_text_field() {
    global $product;
    // 仅对特定产品ID或产品类型启用
    if ( $product->get_id() == 123 ) {
        echo '<div class="custom-field">
                <label for="custom_text">Отпечатанный текст:</label>
                <input type="text" id="custom_text" name="custom_text" placeholder="Введите текст, который вы хотите отпечатать." maxlength="50">
              </div>';
    }
}

Сохранить пользовательские данные в корзину покупок

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

add_filter( 'woocommerce_add_cart_item_data', 'save_custom_text_field_data', 10, 3 );
function save_custom_text_field_data( $cart_item_data, $product_id, $variation_id ) {
    if ( isset( $_POST['custom_text'] ) && ! empty( $_POST['custom_text'] ) ) {
        $cart_item_data['custom_text'] = sanitize_text_field( $_POST['custom_text'] );
        // 确保购物车中同一商品但文字不同时，被视为不同项目
        $cart_item_data['unique_key'] = md5( microtime().rand() );
    }
    return $cart_item_data;
}

Отображать эти данные на странице корзины покупок и странице оформления заказа.

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

add_filter( 'woocommerce_get_item_data', 'display_custom_text_on_cart_and_checkout', 10, 2 );
function display_custom_text_on_cart_and_checkout( $item_data, $cart_item ) {
    if ( isset( $cart_item['custom_text'] ) ) {
        $item_data[] = array(
            'name'  => '印制文字',
            'value' => wc_clean( $cart_item['custom_text'] )
        );
    }
    return $item_data;
}

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

Параметры производительности и рекомендации по оптимальной практике

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

• Управление скриптами и стилями: загружаются только необходимые файлы CSS и JavaScript на странице продукта. Для этого можно использовать соответствующие инструменты или методы.wp_enqueue_script()иwp_enqueue_style()Функция, а также соответствующие компоненты (или инструменты) для её использования.is_product()Условные теги.
• Оптимизация изображений: Если настраиваемая страница содержит большое количество изображений или интерактивных медиафайлов, обязательно используйте реагирующие изображения (респонсивные форматы), правильный формат изображений (например, WebP) и технологии ленивой загрузки (lazy loading).
• Стратегия кэширования: Для страниц, которые являются высокодинамичными или содержат персонализированные данные пользователей (например, как в приведённом выше примере с футболками), необходимо осторожно настроить стратегию кэширования, чтобы избежать отображения одинакового контента для всех пользователей. Можно рассмотреть использование фрагментарного кэширования или динамического загрузки персонализированных элементов с помощью технологии Ajax.
• Приоритет для мобильных устройств: обеспечьте, чтобы пользовательский интерфейс и его элементы отображались и функционировали идеально на мобильных устройствах.
• Удобство обслуживания кода: пользовательские функции следует организовывать в отдельных подтемах (subtopics) проекта.functions.phpИли используйте специальные пользовательские плагины, добавляя к ним четкие комментарии. Избегайте прямой модификации родительской темы или основных файлов системы WooCommerce.
• Тестирование: Провести полное тестирование в разработочной среде, включая функциональные тесты, тестирование на различных браузерах и тестирование на мобильных устройствах, после чего развернуть продукт в производственной среде.

резюме

Настройка страниц товаров в WooCommerce представляет собой процесс, который варьируется от незначительных изменений до полной переработки дизайна и функционала. Для большинства пользователей лучший способ начать работу — использовать инструменты для создания страниц или шаблоны (page builders/hooks), которые позволяют достичь значительных изменений с минимальными затратами времени и усилий на обучение. Однако разработчикам, стремящимся к максимальной производительности, уникальному пользовательскому опыту или сложным функциям, необходимо обратить внимание на структуру шаблонов и создание собственных вариантов оформления страниц. Независимо от выбранного подхода ключевым принципом остается соблюдение простоты кода и обеспечение высокой производительности веб-сайта. С помощью методов, описанных в этой статье, вы сможете с уверенностью начать создание страниц товаров, более соответствующих имиджу вашего бренда и способствующих повышению конверсий.

Часто задаваемые вопросы

Влияет ли насколько сложно настроена страница продукта на скорость работы веб-сайта?

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

После обновления плагина WooCommerce мои пользовательские настройки будут утеряны?

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

Можно ли настроить страницы исключительно для конкретных продуктов или категорий?

Конечно, это возможно. В вашем пользовательском коде вы можете использовать функции условного вывода для реализации этого. Например, можно воспользоваться такими функциями, как…is_product()、is_product_category('t-shirts')Или проверьте ID продукта.$product->get_id() == 123Для ограничения области действия пользовательских функций используются определённые правила. Инструменты по созданию страниц также обычно предоставляют возможность настройки этих правил, что позволяет применять пользовательские шаблоны к конкретным категориям, тегам или отдельным продуктам.

Как настроить страницу для продукта с возможностью изменения вариантов (включая различные стили)?

Логика настройки изменчивых товаров более сложна, поскольку необходимо учитывать взаимосвязи между выбором вариантов дизайна, изменениями цен, сменой изображений и другими параметрами. WooCommerce предоставляет специальные шаблоны для работы с такими товарами.single-product/add-to-cart/variable.phpА также ряд событий на JavaScript (например,…)found_variation、reset_dataРекомендуется в первую очередь использовать хенки (hooks) и официально предоставленные JS-события для расширения функционала, либо применять хорошо оттестированные профессиональные плагины для решения сложных задач по настройке продукта.