WooCommerce: автоматическое изменение стоимости товара при выборе вариантов

Проблема: цена не меняется при выборе варианта товара

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

Диагностика проблемы

• Проверьте, что у вариаций в настройках товара в WooCommerce прописаны цены.
• Если цена зависит от дополнительных пользовательских атрибутов, не связанных с вариациями, убедитесь, что скрипты обновления цены подключены.
• Проверьте консоль браузера на наличие JS-ошибок, мешающих обновлению цены.
• Убедитесь, что шаблон темы корректно поддерживает вариации и использует стандартные хуки WooCommerce.

Пошаговое решение

1. Автоматическое изменение цены для вариаций

Если вариации созданы стандартно, но цена не меняется, проверьте, что в шаблоне вызывается скрипт обновления цены:

wp_enqueue_script('wc-add-to-cart-variation');

Добавьте в functions.php вашей темы или дочерней темы:

function enqueue_wc_variation_script() {
    if (is_product()) {
        wp_enqueue_script('wc-add-to-cart-variation');
    }
}
add_action('wp_enqueue_scripts', 'enqueue_wc_variation_script');

2. Изменение цены при выборе дополнительных опций (не вариаций)

Если нужно менять цену динамически по дополнительным опциям, не являющимся вариациями, примените следующий подход с AJAX и фильтром woocommerce_get_price_html.

Пример: добавим чекбоксы с дополнительной стоимостью, меняющую цену товара на странице товара.

// Вставка дополнительных опций на страницу товара
add_action('woocommerce_before_add_to_cart_button', 'extra_options_markup');
function extra_options_markup() {
    echo '<label><input type="checkbox" name="extra_gift_wrap" value="10"> Подарочная упаковка (+10 руб)</label>';
}

// Обработка цены с учетом выбранных опций
add_filter('woocommerce_get_price_html', 'change_price_based_on_extra_options', 10, 2);
function change_price_based_on_extra_options($price_html, $product) {
    if (!is_product()) return $price_html;

    if (isset($_POST['extra_gift_wrap']) && $_POST['extra_gift_wrap'] == '10') {
        $price = $product->get_price() + 10;
        $price_html = wc_price($price);
    }
    return $price_html;
}

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

Проверка результата

• Выберите разные вариации товара и посмотрите, меняется ли цена на странице без перезагрузки.
• Если добавлены дополнительные опции, переключайте чекбоксы и убедитесь, что цена обновляется корректно.
• Проверьте консоль браузера — отсутствие ошибок JavaScript.

Частые ошибки и их исправление

• Не подключен скрипт обновления вариаций — убедитесь, что wc-add-to-cart-variation подключен.
• Нестандартный шаблон товара — проверьте, что шаблон темы использует хуки WooCommerce для вариаций.
• AJAX не работает — проверьте правильность JS-кода, пути AJAX-запроса и nonce-проверок.
• Цена не обновляется после выбора опций — убедитесь, что обработка данных из формы происходит корректно и результат отображается.

Практические советы по производительности и безопасности

• Для динамического обновления цены используйте локализацию скрипта и nonce для защиты AJAX-запросов.
• Оптимизируйте количество запросов — делайте обновление цены на клиенте без постоянных AJAX-запросов, если возможно.
• Используйте стандартные хуки WooCommerce, чтобы не ломать совместимость с обновлениями.

Сравнение вариантов решения