13 Фев
Добавление специальной кнопки «Очистить корзину» в WooCommerce может существенно упростить процесс покупки для клиентов. Конечно, пользователи могут вручную удалить товары по одному или установить количество товаров в ноль, но наличие отдельной кнопки, выполняющей эту задачу автоматически, значительно ускоряет процесс. Особенно это актуально для B2B-магазинов, где заказы могут содержать множество позиций.
В этой статье мы рассмотрим, Как добавить кнопку Очистить корзину с помощью кода, используя jQuery для обработки кликов и AJAX для выполнения соответствующего действия в WooCommerce.
Добавление кнопки «Очистить корзину» через PHP
Приведенный ниже код добавляет кнопку «Очистить корзину» над кнопкой «Перейти к оформлению заказа«. Однако стоит учесть, что этот метод работает только для классической корзины WooCommerce (то есть при использовании шорткода Корзины), но не подходит для нового блока корзины (Cart Block).
Код для классической корзины
add_action( 'woocommerce_proceed_to_checkout', 'custom_empty_cart_button', 21 );
function custom_empty_cart_button() {
echo '<a role="button" class="empty-cart-button">Очистить корзину</a>';
wc_enqueue_js( "
jQuery('.empty-cart-button').click(function(e){
e.preventDefault();
jQuery.post('" . admin_url('admin-ajax.php') . "', { action: 'empty_cart' }, function() {
location.reload();
});
});
" );
}
add_action( 'wp_ajax_empty_cart', 'custom_empty_cart' );
add_action( 'wp_ajax_nopriv_empty_cart', 'custom_empty_cart' );
function custom_empty_cart() {
WC()->cart->empty_cart();
}Этот код выполняет следующие действия:
- Добавляет кнопку «Очистить корзину» над кнопкой «Перейти к оформлению заказа».
- Использует jQuery для отслеживания клика по кнопке и выполнения AJAX-запроса.
- Вызывает AJAX-функцию, которая очищает корзину и обновляет страницу.
Альтернативный способ для Cart Block
Если ваш магазин использует новую версию корзины на основе блоков, вышеуказанный метод не подойдет. В этом случае кнопку нужно добавлять вручную в редакторе блоков, а затем использовать другой хук.
Попробуйте заменить woocommerce_proceed_to_checkout на wp_footer, если хотите добавить кнопку через код.
Где разместить код?
Добавьте этот код в файл functions.php вашей дочерней темы или используйте плагин для вставки пользовательского кода, например Code Snippets.
Как кастомизировать Cart Block через код?
WooCommerce пока не предоставляет стандартные хуки для работы с Cart Block, но можно использовать следующий обходной путь:
Добавление хуков в Cart Block
add_filter( 'render_block', 'custom_woocommerce_cart_block_hooks', 9999, 2 );
function custom_woocommerce_cart_block_hooks( $block_content, $block ) {
$blocks = array(
'woocommerce/cart',
'woocommerce/cart-totals-block',
'woocommerce/proceed-to-checkout-block'
);
if ( in_array( $block['blockName'], $blocks ) ) {
ob_start();
do_action( 'custom_before_' . $block['blockName'] );
echo $block_content;
do_action( 'custom_after_' . $block['blockName'] );
$block_content = ob_get_contents();
ob_end_clean();
}
return $block_content;
}Теперь можно использовать хуки custom_before_woocommerce/cart-totals-block или custom_after_woocommerce/proceed-to-checkout-block для вставки элементов.
Заключение
Добавление кнопки «Очистить корзину» улучшает UX в WooCommerce, особенно для крупных заказов. Если вы используете классическую корзину, можно просто вставить PHP-код, если же у вас Cart Block — потребуется более сложный подход через хуки.
Экспериментируйте с хуками и настройками, чтобы сделать корзину удобнее для клиентов!
