Добавить пункты в меню Личного кабинета Woocommerce

В Вукомерсе по умолчанию есть Личный кабинет, а в нем слева (или справа) боковое меню, например:

 

При клике на пункты вы переходите как бы по «внутренним ссылкам» вукомерса. То есть, если главная страница кабинета имеет адрес:

/my-account/

то при переходе на редактирование личной информации (логина, пароля), ссылка принимает вид:

/my-account/edit-account/

Этих страниц физически не существует, вы не можете их отредактировать из админки, так как все эти страницы выводятся одним и тем же шорткодом: [woocommerce_my_account].

Итак, предположим, клиент захотел вывести какие-то дополнительные пункты меню внутри аккаунта, а какие-то, наоборот, скрыть.

Начнем с простого. Чтобы скрыть некоторые пункты, идем в WooCommerce > Settings > Accounts.

Видим там ендпоинты. Эти ендпоинты (конечные точки) как раз и есть урл-адреса дополнительных страниц Личного кабинета. Можно просто «опустошить» их вот так:

И они уйдут из бокового меню.

Теперь про добавление. Способ первый — добавление ендпоинтов через functions.php:

Добавляем кастомные линки в само меню на фронт-енде:

/* Add custom links to WC My account menu */
function iconic_account_menu_items( $items ) {

$items['information'] = __( 'Information', 'iconic' );
 $items['information2'] = __( 'Information2', 'iconic' );
 return $items;

}

add_filter( 'woocommerce_account_menu_items', 'iconic_account_menu_items', 10, 1 );

Тут я добавила 2 — Information и Information2.

Теперь добавляем ендпоинт (чтобы на клик было не 404, а страница) и вторым экшном — наполнение этой страницы. В данном случае нужно заполнить в кавычках свой контент вместо Your new content:

/**
 * Add endpoint
 */
function iconic_add_my_account_endpoint() {
 add_rewrite_endpoint( 'information', EP_PAGES );
}
add_action( 'init', 'iconic_add_my_account_endpoint' );

/**
 * Information content
 */
function iconic_information_endpoint_content() {
 echo 'Your new content';
}
add_action( 'woocommerce_account_information_endpoint', 'iconic_information_endpoint_content' );

 

Тут всё.

Понятно, что мы можем не сильно много добавить вместо Your new content. К тому же, бывает, что нужно добавить ссылки на существующий страницы, а не на ендпоинты.

Чтобы добавить меню, ищем шаблон, который его выводит. Он лежит в плагине woocommerce по пути:

/wp-content/plugins/woocommerce/templates/myaccount

Это файл navigation.php.

 

Как кастомизировать шаблоны Вукомерс

Если кто не знает — НЕ ПРАВЬТЕ ШАБЛОНЫ ПРЯМО В ПЛАГИНЕ. После обновления плагина все ваши изменения будут стерты. Делается все очень просто и безопасно.

Необходимо в папке темы создать папку woocommerce. Далее ВНИМАНИЕ:

В папке вукомерса внутри темы не должно быть папки templates. То есть вы должны шаблоны кидать сразу в корень woocommerce. Например, если сейчас наш файл лежит тут:

/wp-content/plugins/woocommerce/templates/myaccount/navigation.php

то после переноса в тему путь будет выглядеть так:

/wp-content/themes/YOUR_THEME/woocommerce/myaccount/navigation.php

Из пути ушла папка templates.

После копирования navigation.php открываем его в редакторе и просто добавляем туда еще одно меню:

<nav class="woocommerce-MyAccount-navigation">
 <ul>
 <?php foreach ( wc_get_account_menu_items() as $endpoint => $label ) : ?>
 <li class="<?php echo wc_get_account_menu_item_classes( $endpoint ); ?>">
 <a href="<?php echo esc_url( wc_get_account_endpoint_url( $endpoint ) ); ?>"><?php echo esc_html( $label ); ?></a>
 </li>
 <?php endforeach; ?>
 </ul>
 <?php
 wp_nav_menu( array(
 'menu' => 'YOUR_MENU_NAME',
 ) );
 ?>
</nav>

 

Ну вот и все. Сюда же можно прописать прямые ссылки, вывод виджетов и т.п.