Редактируем меню личного кабинета WooCommerce (как добавить / удалить пункт)

В блоге я рассматривал около десятка задач по навигации на сайте: были списки ссылок, хлебные крошки, работа с пунктами меню админки и т.п. Сегодня чуть более экзотическая ситуация, которая случается не так часто, но все же имеет место быть. Речь пойдет о личном кабинете покупателя в WooCommerce, где также используется элемент навигации. Будем учиться его модифицировать — а именно добавлять новые пункты либо скрывать ненужные. Вторая задача встречается почаще, но мы уделим внимание обеим.

Итак, плагин магазина WooCommerce разрешает зарегистрироваться при покупке (и не только) дабы просматривать историю заказов, сохранять определенную информацию о себе и дальше при желании ее менять. Визуально это выглядит приблизительно так:

Включение/выключение опции находится в настройках модуля в разделе «Учетные записи». Вы можете вообще убрать создание аккаунтов либо сделать это только при совершении покупки.

Также следует отметить, что под личный кабинет покупателя в WooCommerce требуется создать отдельную страницу, которую во вкладке «Дополнительно» вы выбираете для соответствующей функции:

Теперь рассмотрим парочку вопросов по теме…

Как убрать пункт из меню личного кабинета

В принципе, для реализации даже не надо никакого кода — просто переходите в знакомый уже нам раздел «Дополнительно», где будет параметр «Конечные точки учётной записи» (Account endpoints).

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

Теоретически, есть метод скрытия элемента меню с помощью сниппета для файла functions.php через специальную функцию unset.

add_filter ( 'woocommerce_account_menu_items', 'misha_remove_my_account_links' );
function misha_remove_my_account_links( $menu_links ){
 
	unset( $menu_links['edit-address'] ); // Addresses
	//unset( $menu_links['dashboard'] ); // Dashboard
	//unset( $menu_links['payment-methods'] ); // Payment Methods
	//unset( $menu_links['orders'] ); // Orders
	//unset( $menu_links['downloads'] ); // Downloads
	//unset( $menu_links['edit-account'] ); // Account details
	//unset( $menu_links['customer-logout'] ); // Logout
 
	return $menu_links;
}

После выполнения данного примера в аккаунте пользователя исчезнет ссылка «Адреса». Если вы хотите избавиться от еще каких-то страниц, раскомментируйте соответствующие строки (уберите символы //).

Важно понимать, что применение хака без удаления конечных точек «endpoints» лишь скрывает определенный раздел, но физически по прямому URL-адресу он остается доступен.

Новый пункт в личном кабинете

Предыдущий и следующий хаки взяты из этой статьи блога разработчика Misha Rudrastyh. Если нам просто надо вставить произвольный линк в навигацию, то код для файла функций выглядит следующим образом:

add_filter ( 'woocommerce_account_menu_items', 'misha_one_more_link' );
function misha_one_more_link( $menu_links ){
 
	// we will hook "anyuniquetext123" later
	$new = array( 'anyuniquetext123' => 'Gift for you' );
 
	// or in case you need 2 links
	// $new = array( 'link1' => 'Link 1', 'link2' => 'Link 2' );
 
	// array_slice() is good when you want to add an element between the other ones
	$menu_links = array_slice( $menu_links, 0, 1, true ) 
	+ $new 
	+ array_slice( $menu_links, 1, NULL, true );
 
	return $menu_links;
}
 
add_filter( 'woocommerce_get_endpoint_url', 'misha_hook_endpoint', 10, 4 );
function misha_hook_endpoint( $url, $endpoint, $value, $permalink ){
 
	if( $endpoint === 'anyuniquetext123' ) {
 
		// ok, here is the place for your custom URL, it could be external
		$url = site_url();
 
	}
	return $url;
 
}

В первой части решения вы просто добавляете один или несколько элементов в массив, отвечающий за меню. Во второй — подставляете нужный вам адрес в переменную $url (разрешается как локальный, так и внешний).

Финальной «вишенкой на торте» будет украшение в виде иконки через CSS стили. Если у вас подключен шрифт Font Awesome, можете использовать его, либо встроенные иконки WP и другие варианты.

body.woocommerce-account ul li.woocommerce-MyAccount-navigation-link--anyuniquetext123 a:before{
	content: "\f1fd"
}

Добавление страниц в личном кабинете

В данном случае мы не просто создаем линк в меню, но и сделаем так, что при клике пользователь будет продолжать находится в своем аккаунте + увидит соответствующий контент справа. Весь сниппет состоит из 4х шагов:

/*
 * Step 1. Add Link to My Account menu
 */
add_filter ( 'woocommerce_account_menu_items', 'misha_log_history_link', 40 );
function misha_log_history_link( $menu_links ){
 
	$menu_links = array_slice( $menu_links, 0, 5, true ) 
	+ array( 'log-history' => 'Log history' )
	+ array_slice( $menu_links, 5, NULL, true );
 
	return $menu_links;
 
}
/*
 * Step 2. Register Permalink Endpoint
 */
add_action( 'init', 'misha_add_endpoint' );
function misha_add_endpoint() {
 
	// WP_Rewrite is my Achilles' heel, so please do not ask me for detailed explanation
	add_rewrite_endpoint( 'log-history', EP_PAGES );
 
}
/*
 * Step 3. Content for the new page in My Account, woocommerce_account_{ENDPOINT NAME}_endpoint
 */
add_action( 'woocommerce_account_log-history_endpoint', 'misha_my_account_endpoint_content' );
function misha_my_account_endpoint_content() {
 
	// of course you can print dynamic content here, one of the most useful functions here is get_current_user_id()
	echo 'Last time you logged in: yesterday from Safari.';
 
}
/*
 * Step 4
 */
// Go to Settings > Permalinks and just push "Save Changes" button.

Приятно радует, что в коде автора есть детальные пояснения — респект. Важно! Не забудьте выполнить последний 4 этап — перейти в раздел настроек админки «Постоянные ссылки» и кликнуть по кнопке «Сохранить».

Аналогично в примере также имеется иконка для меню:

body.woocommerce-account ul li.woocommerce-MyAccount-navigation-link--log-history a:before{
	content: "\f1da";
}

После внедрения текущего сниппета появится ссылка с названием «Log history». При переходе по ней он увидит текст, заданный в функции misha_my_account_endpoint_content. Все значения, разумеется, можно менять.

Контент до и после меню в аккаунте пользователя

В качестве бонуса Misha Rudrastyh приводит еще один небольшой хак. С его помощью у вас получится добавить любой текст/HTML непосредственно перед и после навигационного элемента (<nav>).

<?php
add_action('woocommerce_before_account_navigation', 'misha_some_content_before');
function misha_some_content_before(){
	echo 'blah blah blah before';
}
 
add_action('woocommerce_after_account_navigation', 'misha_some_content_after');
function misha_some_content_after(){
	?>
	<p>blah blah blah after</p>
	<?php
}

При внедрении решения следует учитывать, что блок <nav> имеет свойство float:left в CSS.

Итого. В принципе, у меня по работе встречалась только первая рассмотренная задача — убирал лишние линки в WooCommerce кабинете покупателя дабы посетители не кликали то, что им не нужно (загрузки). Однако в процессе поиска инфы нашел заметку Misha Rudrastyh и решил ее перевести. Вставка произвольных ссылок и создание отдельных страниц вам пригодится, если вдруг попадется заказчик с нестандартными запросами.

Понравился пост? Подпишись на обновления блога по RSS, Email или twitter!

Оцените статью:

(голосов - 5, средний балл: 5,60 из 7)

Загрузка...

Категории: WooCommerce; Хаки и секреты;
Теги: вордпресс веб-разработка, интернет-магазин, меню и навигация, решение задач wordpress, сниппеты.