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

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

Основы работы с хуками WooCommerce в корзине

Хуки (actions и filters) — это механизмы, позволяющие вмешиваться в работу WooCommerce без изменения исходного кода плагина. Для изменения корзины в реальном времени чаще всего используются следующие хуки:

• woocommerce_before_cart и woocommerce_after_cart — позволяют вставлять контент до и после списка товаров в корзине.
• woocommerce_cart_item_quantity — фильтр для изменения отображения количества товара.
• woocommerce_add_to_cart_validation — фильтр для проверки и изменения логики добавления товара в корзину.
• woocommerce_cart_item_price — позволяет изменить цену товара в корзине.

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

Добавление товара в корзину по клику без перезагрузки страницы

Часто нужно сделать кнопку, которая добавляет товар в корзину и сразу обновляет вид корзины на странице. Рассмотрим пример, как это сделать.

В файл functions.php вашей темы добавим обработчик AJAX:

add_action('wp_ajax_wp-lessons_add_to_cart', 'wp_lessons_add_to_cart_callback');
add_action('wp_ajax_nopriv_wp-lessons_add_to_cart', 'wp_lessons_add_to_cart_callback');

function wp_lessons_add_to_cart_callback() {
    $product_id = intval($_POST['product_id']);
    if ($product_id > 0) {
        WC()->cart->add_to_cart($product_id);
        wp_send_json_success(array(
            'cart_hash' => WC()->cart->get_cart_hash(),
            'cart_count' => WC()->cart->get_cart_contents_count(),
        ));
    } else {
        wp_send_json_error('Invalid product ID');
    }
    wp_die();
}

Далее на фронтенде с помощью JavaScript отправим AJAX запрос при клике на кнопку:

jQuery(document).on('click', '.wp-lessons-add-to-cart', function(e) {
    e.preventDefault();
    var productId = jQuery(this).data('product-id');
    jQuery.ajax({
        url: wc_add_to_cart_params.ajax_url,
        method: 'POST',
        data: {
            action: 'wp-lessons_add_to_cart',
            product_id: productId
        },
        success: function(response) {
            if (response.success) {
                // Обновим виджет корзины, например через триггер WooCommerce
                jQuery(document.body).trigger('wc_fragment_refresh');
                alert('Товар добавлен в корзину!');
            } else {
                alert('Ошибка: ' + response.data);
            }
        }
    });
});

В HTML кнопка должна иметь класс и data-атрибут с ID товара:

<button class="wp-lessons-add-to-cart" data-product-id="123">Добавить в корзину</button>

Изменение цены товара в корзине с помощью фильтра

Иногда нужно динамически изменить цену товара в корзине, например, применить скидку по определённым условиям. Используем фильтр woocommerce_cart_item_price:

add_filter('woocommerce_cart_item_price', 'wp_lessons_change_cart_item_price', 10, 3);
function wp_lessons_change_cart_item_price($price_html, $cart_item, $cart_item_key) {
    $product = $cart_item['data'];
    if ($product->get_id() == 123) { // ID товара
        // Например скидка 10%
        $regular_price = $product->get_regular_price();
        $discounted_price = $regular_price * 0.9;
        $price_html = wc_price($discounted_price);
    }
    return $price_html;
}

Этот код изменит отображаемую цену товара с ID 123 в корзине, показывая цену со скидкой 10%.

Удаление товара из корзины по нажатию кнопки без перезагрузки

Чтобы сделать удобное удаление товара из корзины с помощью AJAX, воспользуемся следующим примером:

Добавим JavaScript обработчик:

jQuery(document).on('click', '.wp-lessons-remove-cart-item', function(e) {
    e.preventDefault();
    var cartItemKey = jQuery(this).data('cart-item-key');
    jQuery.ajax({
        url: wc_add_to_cart_params.ajax_url,
        method: 'POST',
        data: {
            action: 'wp-lessons_remove_cart_item',
            cart_item_key: cartItemKey
        },
        success: function(response) {
            if (response.success) {
                jQuery(document.body).trigger('wc_fragment_refresh');
                alert('Товар удалён из корзины');
            } else {
                alert('Ошибка удаления');
            }
        }
    });
});

Обработчик на PHP:

add_action('wp_ajax_wp-lessons_remove_cart_item', 'wp_lessons_remove_cart_item_callback');
add_action('wp_ajax_nopriv_wp-lessons_remove_cart_item', 'wp_lessons_remove_cart_item_callback');

function wp_lessons_remove_cart_item_callback() {
    $cart_item_key = sanitize_text_field($_POST['cart_item_key']);
    if ($cart_item_key && WC()->cart->remove_cart_item($cart_item_key)) {
        wp_send_json_success();
    } else {
        wp_send_json_error();
    }
    wp_die();
}

Кнопка удаления должна содержать ключ товара из корзины:

<a href="#" class="wp-lessons-remove-cart-item" data-cart-item-key="<?php echo $cart_item_key; ?>">Удалить</a>

Использование плагина Clearfy Pro для оптимизации работы корзины WooCommerce

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

Например, Clearfy Pro позволяет управлять AJAX обновлением корзины, что снижает нагрузку на сервер и улучшает UX.

Заключение по работе с хуками WooCommerce

Использование хуков WooCommerce — мощный способ динамически управлять корзиной и процессом покупки. Ключ к успеху — понимание, когда и какой хук использовать. При необходимости можно комбинировать PHP и JavaScript (AJAX) для создания удобного и интерактивного интерфейса.

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

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