WooCommerce: как сделать автоматическое изменение цен при акциях на базе Elementor

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

В стандартном WooCommerce цены товаров при акциях меняются только если указаны специальные цены (sale price). Однако, если вы хотите, чтобы цены на страницах, созданных в Elementor, автоматически обновлялись с учетом текущих акций и скидок, часто возникает проблема: цена отображается без учета скидок или кэшируется старое значение.

Основные причины:

• Кэширование Elementor или плагинов кэширования блокируют обновление цен.
• Использование нестандартных виджетов или динамических тегов в Elementor, которые не учитывают логику WooCommerce для скидок.
• Отсутствие правильного хука для обновления цены в AJAX или динамическом контенте.

Пошаговое решение: автоматическое обновление цен с учетом акций в Elementor

1. Используем стандартный динамический тег WooCommerce для цены

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

2. Отключаем кэширование для областей с динамическими ценами

Если у вас на сайте используется кэширование (плагины типа WP Rocket, LiteSpeed Cache, или серверное), убедитесь, что страницы с товарами и виджеты Elementor, где отображается цена, исключены из кэширования. Это можно сделать через настройки плагинов.

3. Добавляем AJAX-обновление цены для динамических страниц

Если вы используете кастомные фильтры или акции, можно добавить AJAX-подгрузку цены, чтобы при изменении параметров (например, вариаций товара или выбора скидок) цена автоматически обновлялась.

Пример AJAX-подгрузки цены:

jQuery(document).ready(function($){
  $('.product-variation-selector').on('change', function(){
    var productId = $(this).data('product-id');
    $.ajax({
      url: wc_add_to_cart_params.ajax_url,
      type: 'POST',
      data: {
        action: 'get_product_price',
        product_id: productId
      },
      success: function(response){
        $('.product-price-container').html(response.data.price_html);
      }
    });
  });
});

В functions.php темы добавьте обработчик AJAX:

add_action('wp_ajax_get_product_price', 'get_product_price_callback');
add_action('wp_ajax_nopriv_get_product_price', 'get_product_price_callback');

function get_product_price_callback() {
    $product_id = intval($_POST['product_id']);
    $product = wc_get_product($product_id);
    if (!$product) {
        wp_send_json_error();
    }
    $price_html = $product->get_price_html();
    wp_send_json_success(['price_html' => $price_html]);
}

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

1. Создайте или отредактируйте продукт в WooCommerce, установите обычную и акционную цену.

2. На странице с продуктом, созданной через Elementor, убедитесь, что отображается акционная цена.

3. Если используется AJAX-обновление (например, при выборе вариаций), меняйте варианты и смотрите, как цена обновляется без перезагрузки страницы.

4. Очистите кэш сайта и браузера, чтобы убедиться, что новые цены подгружаются корректно.

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

• Цена не меняется при смене вариаций в Elementor: проверьте, что используете правильные динамические теги и что AJAX-обработчик подключен и работает.
• Старая цена показывается из-за кэша: отключите кэширование для страниц с товарами или настройте исключения в плагинах кэширования.
• PHP ошибка при добавлении AJAX-обработчика: проверьте, что в функции get_product_price_callback правильно проверяется валидность ID продукта.
• Цены отображаются некорректно в Elementor Pro: убедитесь, что динамический тег "Product Price" выбран из категории WooCommerce, а не пользовательский HTML.

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

• Всегда проверяйте входные данные в AJAX-запросах, например, используйте intval() и sanitize_text_field(), чтобы предотвратить инъекции.
• Используйте nonce для AJAX-запросов, чтобы защитить от CSRF-атак.
• Для улучшения производительности минимизируйте количество AJAX-запросов, объединяя логику обновления цены при изменении нескольких параметров.
• Используйте кэширование WooCommerce transient для часто запрашиваемых данных, если цена не меняется часто.

Сравнение вариантов реализации автоматического обновления цены