Как добавить кнопку «Очистить корзину» в WooCommerce

По умолчанию в WooCommerce удалять товары из корзины можно только по одному. Но если их много, это долго и неудобно. Чтобы улучшить интерфейс, можно добавить кнопку для полной очистки корзины. Это делается при помощи небольшого фрагмента кода.

Способ будет немного отличаться в зависимости от того, какая корзина используется на сайте:

• классическая корзина — создаётся с помощью шорткода [woocommerce_cart];
• блочная корзина — создаётся с помощью блока «Корзина» в редакторе блоков.

Куда вставлять код

В разных инструкциях в интернете вы могли видеть, что сниппет нужно вставить в файл functions.php. Это специальный файл активной темы, через который можно добавлять на сайт свои функции и менять стандартное поведение WordPress. Способ рабочий, но не самый удобный: если вы редактируете обычную тему напрямую, после её обновления файл перезапишется и ваши сниппеты пропадут.

Избежать этой проблемы можно с помощью дочерней темы или плагина по типу «Code Snippets». Плагин делает то же самое, только вместо одного длинного файла на хостинге вы работаете в отдельном разделе в админке WordPress. В нём сниппеты отображаются как записи или страницы: у каждого есть название, описание, настройки и выключатель, чтобы приостановить работу сниппета без удаления.

Про работу с плагином «Code Snippets» у нас есть небольшая отдельная инструкция. Если вы раньше не работали с такими фрагментами кода, лучше сначала открыть эту статью, а потом вернуться к примерам ниже.

Статья на тему 👀
Как пользоваться плагином Code Snippets

Для классической корзины

Если страница «Корзина» на вашем сайте состоит из шорткода [woocommerce_cart], добавьте на сайт такой сниппет:

// Добавляем кнопку в классическую корзину.
add_action( 'woocommerce_cart_actions', 'hostiq_add_empty_cart_button' );

function hostiq_add_empty_cart_button() {
	$url = add_query_arg( 'empty-cart', '1', wc_get_cart_url() );

	echo '<a class="button" href="' . esc_url( $url ) . '">Очистить корзину</a>';
}

// Очищаем корзину после перехода по специальной ссылке.
add_action( 'template_redirect', 'hostiq_empty_cart' );

function hostiq_empty_cart() {
	if (
		! is_cart() ||
		! isset( $_GET['empty-cart'] ) ||
		'1' !== sanitize_text_field( wp_unslash( $_GET['empty-cart'] ) )
	) {
		return;
	}

	WC()->cart->empty_cart();

	wp_safe_redirect( wc_get_cart_url() );
	exit;
}

Этот сниппет делает две вещи. Первая часть добавляет кнопку в классическую корзину. Вторая очищает корзину, если пользователь переходит на её страницу с параметром ?empty-cart=1.

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

Кнопка выводится в той же области, где находится стандартная кнопка «Обновить корзину», и использует стандартный класс button. Поэтому её внешний вид обычно будет соответствовать остальным кнопкам WooCommerce на сайте.

Для блочной корзины

Если страница «Корзина» на вашем сайте состоит из блок «Корзина» и отображается в редакторе как и другие страницы на сайте, используйте более короткую версию сниппета:

// Очищаем корзину после перехода по специальной ссылке.
add_action( 'template_redirect', 'hostiq_empty_cart' );

function hostiq_empty_cart() {
	if (
		! is_cart() ||
		! isset( $_GET['empty-cart'] ) ||
		'1' !== sanitize_text_field( wp_unslash( $_GET['empty-cart'] ) )
	) {
		return;
	}

	WC()->cart->empty_cart();

	wp_safe_redirect( wc_get_cart_url() );
	exit;
}

После добавления кода откройте страницу корзины в редакторе WordPress и добавьте блок «Кнопки», например, сразу под заголовком страницы, над содержимым корзины. Чтобы кнопка не перетягивала на себя внимание, её можно сделать с контуром вместо заливки.

В качестве ссылки укажите адрес страницы корзины и добавьте в конец ?empty-cart=1. Например, если страница корзины находится по адресу https://example.com/cart/, ссылка для кнопки должна быть https://example.com/cart/?empty-cart=1.

В результате при нажатии на кнопку пользователь перейдёт по специальной ссылке. Сниппет распознает параметр empty-cart, очистит корзину и сразу перенаправит пользователя обратно на обычную страницу корзины.