WooCommerce: решение проблем с отображением стоимости вариативных товаров в Elementor

Диагностика проблемы: почему цена вариативного товара не обновляется или отображается некорректно

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

Основные признаки проблемы:

• Цена на странице товара статична и не обновляется при смене вариации.
• Цена отображается некорректно, например, минимальная или максимальная, а не цена выбранной вариации.
• Кастомные виджеты или динамические теги Elementor не учитывают выбранную вариацию.

Почему так происходит?

Элементы Elementor по умолчанию не подписаны на события JS WooCommerce, которые обновляют цену в DOM при выборе вариации. Часто кастомные шаблоны или динамические поля обращаются к базовой цене товара, а не к цене вариации. Также темы и плагины могут влиять на поведение скриптов обновления.

Пошаговое решение: как корректно отобразить цену вариативного товара в Elementor

1. Используем стандартный виджет WooCommerce Price

Первый и самый простой способ — использовать встроенный виджет «Цена» из набора WooCommerce в Elementor Pro. Он автоматически обновляет цену при выборе вариаций.

2. Если нужен кастомный вывод цены — подключаем JavaScript обновления

При кастомном выводе цены нужно слушать событие woocommerce_variation_select_change или found_variation и обновлять блок цены вручную.

jQuery(function($){
  $('.variations_form').on('found_variation', function(event, variation) {
    var price_html = variation.price_html;
    $('.custom-price').html(price_html);
  });
});

В этом примере .custom-price — CSS-класс блока с ценой, который вы создаёте в Elementor через HTML-виджет или кастомный блок.

3. Добавляем PHP-функцию для вывода минимальной цены при загрузке страницы

Чтобы корректно показать цену до выбора вариации, используйте в functions.php:

function get_variation_price_html( $product_id ) {
  $product = wc_get_product( $product_id );
  if ( $product && $product->is_type( 'variable' ) ) {
    return $product->get_price_html();
  }
  return '';
}

В Elementor через shortcode выводите минимальную цену: [variation_price id="123"], где 123 — ID товара. Для этого добавьте шорткод:

add_shortcode('variation_price', function($atts) {
  $atts = shortcode_atts(['id' => 0], $atts, 'variation_price');
  return get_variation_price_html(intval($atts['id']));
});

Проверка результата после внедрения

После внедрения решения проверьте:

• Открытие страницы вариативного товара в Elementor.
• Выбор различных вариантов товара — цена должна обновляться в реальном времени.
• Отсутствие JavaScript ошибок в консоли браузера.

Если вы используете кастомный JS, убедитесь, что скрипты подключены корректно и не конфликтуют с другими плагинами.

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

• Цена не обновляется: забыли подключить JS-слушатель found_variation или селектор блока цены указан неверно.
• Страница кешируется: кэш плагинов (например, WP Rocket) блокирует динамическое обновление цены. Добавьте исключения для страниц товаров.
• Конфликты с темой или плагинами: проверьте, не отключены ли стандартные скрипты WooCommerce (обычно wc-add-to-cart-variation), которые отвечают за динамическое обновление вариаций.
• Цена отображается базовая: убедитесь, что используете правильный метод get_price_html(), а не get_regular_price().

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

• Подключайте кастомные JS-функции через wp_enqueue_script с зависимостью от jquery и wc-add-to-cart-variation.
• Минимизируйте количество кастомных шорткодов и скриптов, используйте стандартный функционал WooCommerce и Elementor.
• Для производительности исключите страницы с вариативными товарами из агрессивного кэширования.
• Проверяйте консоль браузера на ошибки после обновления темы и плагинов.

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