В Вукомерсе по умолчанию есть Личный кабинет, а в нем слева (или справа) боковое меню, например:
При клике на пункты вы переходите как бы по «внутренним ссылкам» вукомерса. То есть, если главная страница кабинета имеет адрес:
/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>
Ну вот и все. Сюда же можно прописать прямые ссылки, вывод виджетов и т.п.
You must be logged in to post a comment.