Как изменить админку WooCommerce

По умолчанию админка WooCommerceвыглядит довольно просто, но мы изменим ее интерфейс и добавить функционал.

В этом гайде я буду настраивать админку Вукоммерс для мембершип сайта с помощью редактора Elementor. Вы можете использовать другой редактор, или для других целей, например, для админки интернет-магазина.

В этой статье вы узнаете 4 простых шага для кастомизации админки WooCommerce .

Отключите ненужное

По умолчанию в админке WooCommerce есть несколько эндпоинтов, которые находятся в WooCommerce — Настройки — Дополнительно — Эндпоинты учётной записи:

Чтобы отключить эндпоинт, нужно удалить его адрес.

Мембершипу не нужна доставка, поэтому вы можете отключить эндпоинт Адреса. Если вам не нужно давать доступ к файлам, вы можете отключить Загрузки.

После этого админка WooCommerce будет выглядеть так:

Измените текст на главной странице (dashboard.php)

Стандартный текст на главной странице выглядит так:

Добро пожаловать, {текущийпользователь} (не {текущийпользователь}? Выйти)

Из главной страницы аккаунта вы можете посмотреть ваши недавние заказы, настроить платежный адрес и адрес доставки, а также изменить пароль и основную информацию.

В предыдущем шаге вы отключили эндпоинт с адресами, поэтому вы можете удалить часть фразы «настроить платежный адрес и адрес доставки».

Чтобы изменить этот текст, нужно скопировать файл dashboard.php из папки WooCommerce в папку с дочерней темой и отредактировать несколько строк.

1. Скопируйте файл из /wp-content/plugins/woocommerce/templates/my-account/dashboard.php (или скачайте с Github).
2. Создайте папку /wp-content/themes/текущая_тема/woocommerce/myaccount.
3. Вставьте файл dashboard.php в созданную папку.
4. Отредактируйте скрипт, который выводит этот текст:

<p><?php
	/* translators: 1: user display name 2: logout url */
	printf(
		__( 'Вы вошли как <span style="font-size: 19px; letter-spacing: 0.1px; font-weight: 100;">%1$s</span>. <a href="%2$s">Выйти</a>', 'woocommerce' ),
		'<strong>' . esc_html( $current_user->display_name ) . '</strong>',
		esc_url( wc_logout_url( wc_get_page_permalink( 'myaccount' ) ) )
	);
?></p>

<p><?php
	printf(
		__( 'Посмотреть <a href="%1$s">Заказы</a>, отредактировать <a href="%2$s">Личные Данные</a>.', 'woocommerce' ),
		esc_url( wc_get_endpoint_url( 'orders' ) ),
		esc_url( wc_get_endpoint_url( 'edit-account' ) )
	);
?></p>

Теперь админка выглядит так:

Если такая админка вас уже устраивает, то вы можете оставить так, и сделать еще две вещи, — переименовать эндпоинты и / или изменить их порядок в меню.

Переименуйте эндпоинты

Чтобы переименовать эндпоинты, добавьте этот код в functions.php дочерней темы

/* Edit endpoint names */
 function my_account_menu_order() {
 	$menuOrder = array(
		'dashboard'          => __( 'Консоль', 'woocommerce' ),
 		'orders'             => __( 'Заказы', 'woocommerce' ),
 		'downloads'          => __( 'Загрузки', 'woocommerce' ),
 		'edit-address'       => __( 'Адреса', 'woocommerce' ),
 		'edit-account'       => __( 'Личные данные', 'woocommerce' ),
 		'customer-logout'    => __( 'Выйти', 'woocommerce' ),
 	);
 	return $menuOrder;
 }
 add_filter ( 'woocommerce_account_menu_items', 'my_account_menu_order' );

Удалите лишние эндпоинты и измените названия эндпоинтов.

Измените порядок эндпоинтов

Чтобы изменить порядок эндпоинтов, поменяйте строки местами:

/* Change endpoint order */
function my_account_menu_order() {
 	$menuOrder = array(
 		'orders'             => __( 'Заказы', 'woocommerce' ),
 		'downloads'          => __( 'Загрузки', 'woocommerce' ),
 		'edit-address'       => __( 'Адреса', 'woocommerce' ),
 		'edit-account'       => __( 'Личные данные', 'woocommerce' ),
 		'customer-logout'    => __( 'Выйти', 'woocommerce' ),
                'dashboard'          => __( 'Консоль', 'woocommerce' ),
 	);
 	return $menuOrder;
 }
 add_filter ( 'woocommerce_account_menu_items', 'my_account_menu_order' );