Как добавить поле с вариантами в вывод товара WooCommerce для удобства выбора

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

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

Стандартные атрибуты товаров и вариации подходят не всегда, особенно если нужна простая настройка, не влияющая на вариативность товара. Например, вы продаёте книгу и хотите добавить опцию "Подарочная обёртка" с вариантами "Нет", "Бумага", "Коробка" — это не вариация товара, а дополнительный выбор.

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

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

Добавление поля с вариантами на страницу товара WooCommerce

Для добавления поля используем хук woocommerce_before_add_to_cart_button. В нём выведем HTML выпадающего списка с вариантами.

function wpbuy_add_custom_select_field() {
    echo '<label for="wpbuy_custom_option">Выберите опцию:</label>';
    echo '<select name="wpbuy_custom_option" id="wpbuy_custom_option" required>';
    echo '<option value="">--Выберите--</option>';
    echo '<option value="none">Без обёртки</option>';
    echo '<option value="paper">Бумажная обёртка</option>';
    echo '<option value="box">Подарочная коробка</option>';
    echo '</select>';
}
add_action('woocommerce_before_add_to_cart_button', 'wpbuy_add_custom_select_field');

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

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

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

function wpbuy_save_custom_option_cart_item_data($cart_item_data, $product_id, $variation_id) {
    if (isset($_POST['wpbuy_custom_option'])) {
        $cart_item_data['wpbuy_custom_option'] = sanitize_text_field($_POST['wpbuy_custom_option']);
        $cart_item_data['unique_key'] = md5(microtime().rand()); // для разделения позиций с разными опциями
    }
    return $cart_item_data;
}
add_filter('woocommerce_add_cart_item_data', 'wpbuy_save_custom_option_cart_item_data', 10, 3);

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

Отображение выбранного варианта в корзине и заказе

Чтобы покупатель видел выбранную опцию в корзине, на странице оформления заказа и в письмах, нужно добавить мета-данные к отображаемой информации. Используем фильтр woocommerce_get_item_data:

function wpbuy_display_custom_option_cart($item_data, $cart_item) {
    if (isset($cart_item['wpbuy_custom_option'])) {
        $options = [
            'none' => 'Без обёртки',
            'paper' => 'Бумажная обёртка',
            'box' => 'Подарочная коробка',
        ];
        $value = isset($options[$cart_item['wpbuy_custom_option']]) ? $options[$cart_item['wpbuy_custom_option']] : $cart_item['wpbuy_custom_option'];
        $item_data[] = array(
            'key' => 'Опция',
            'value' => $value,
            'display' => '',
        );
    }
    return $item_data;
}
add_filter('woocommerce_get_item_data', 'wpbuy_display_custom_option_cart', 10, 2);

Так опция будет видна покупателю на всех этапах оформления.

Сохранение и отображение опции в админке заказов

Чтобы опция была видна в админке WooCommerce, добавим её в данные заказа при создании заказа из корзины, используя хук woocommerce_add_order_item_meta:

function wpbuy_add_custom_option_order_item_meta($item_id, $values, $cart_item_key) {
    if (isset($values['wpbuy_custom_option'])) {
        $options = [
            'none' => 'Без обёртки',
            'paper' => 'Бумажная обёртка',
            'box' => 'Подарочная коробка',
        ];
        $value = isset($options[$values['wpbuy_custom_option']]) ? $options[$values['wpbuy_custom_option']] : $values['wpbuy_custom_option'];
        wc_add_order_item_meta($item_id, 'Опция', $value);
    }
}
add_action('woocommerce_add_order_item_meta', 'wpbuy_add_custom_option_order_item_meta', 10, 3);

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

Пример использования плагина для упрощения задачи

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

Однако ручной код даёт максимальную гибкость и контроль.

Резюме и рекомендации

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

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