Як додати кнопку «Очистити кошик» у 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, очистить кошик та одразу перенаправить користувача назад на звичайну сторінку кошика.