UdnlxPortfolio - Стилизуем и настраиваем личный кабинет

Файлы отвечающие за отображения всех страниц личного кабинета находятся в папке "myaccount" внутри папки "woocommerce" нашей темы.

Для начала создадим меню нашего Личного кабинета и расположим его в начальной странице аккаунта.

Возьмём файл my-account.php и заменим его.

my-account.php до изменений

<?php
/**
 * My Account page
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/myaccount/my-account.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see     https://docs.woocommerce.com/document/template-structure/
 * @package WooCommerce\Templates
 * @version 3.5.0
 */

defined( 'ABSPATH' ) || exit;

/**
 * My Account navigation.
 *
 * @since 2.6.0
 */
do_action( 'woocommerce_account_navigation' ); ?>

<div class="woocommerce-MyAccount-content">
	<?php
		/**
		 * My Account content.
		 *
		 * @since 2.6.0
		 */
		do_action( 'woocommerce_account_content' );
	?>
</div>

my-account.php после изменений

<?php
/**
 * My Account page
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/myaccount/my-account.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see     https://docs.woocommerce.com/document/template-structure/
 * @package WooCommerce\Templates
 * @version 3.5.0
 */

defined( 'ABSPATH' ) || exit;
?>

<div class="my-account-page">
	<p class="my-account-page__titletext">
		Добро пожаловать в Ваш аккаунт
	</p>
	<div class="my-account-page__link">
		<a class="my-account-page__link-lnk" href="http://new.russianwool.ru/my-account/">Панель управления</a>
		<a class="my-account-page__link-lnk" href="http://new.russianwool.ru/my-account/orders/">Заказы</a>
		<a class="my-account-page__link-lnk" href="">Мои закладки</a>
		<a class="my-account-page__link-lnk" href="">Сравнение товаров</a>
		<a class="my-account-page__link-lnk" href="http://new.russianwool.ru/my-account/edit-address/">Адрес</a>
		<a class="my-account-page__link-lnk" href="http://new.russianwool.ru/my-account/edit-account/">Детали профиля</a>
		<a class="my-account-page__link-lnk" href="http://new.russianwool.ru/my-account/customer-logout/?_wpnonce=f23f76f62d">Выйти</a>
	</div>
</div>

Теперь разместим наше меню в остальных нужных нам страницах нашего аккаунта (в данном случае нам нужны) - form-edit-account.php, form-edit-address.php, my-orders.php, orders.php, view-order.php.

меню

<div class="my-account-page__link">
		<a class="my-account-page__link-lnk" href="http://new.russianwool.ru/my-account/">Панель управления</a>
		<a class="my-account-page__link-lnk" href="http://new.russianwool.ru/my-account/orders/">Заказы</a>
		<a class="my-account-page__link-lnk" href="">Мои закладки</a>
		<a class="my-account-page__link-lnk" href="">Сравнение товаров</a>
		<a class="my-account-page__link-lnk" href="http://new.russianwool.ru/my-account/edit-address/">Адрес</a>
		<a class="my-account-page__link-lnk" href="http://new.russianwool.ru/my-account/edit-account/">Детали профиля</a>
		<a class="my-account-page__link-lnk" href="http://new.russianwool.ru/my-account/customer-logout/?_wpnonce=f23f76f62d">Выйти</a>
	</div>

Размещаем этот блок вот так (для примера):

верхний кусок кода my-orders.php

<?php
/**
 * My Orders - Deprecated
 *
 * @deprecated 2.6.0 this template file is no longer used. My Account shortcode uses orders.php.
 * @package WooCommerce\Templates
 */

defined( 'ABSPATH' ) || exit;
?>

<div class="my-account-page">
	<div class="my-account-page__link">
		<a class="my-account-page__link-lnk" href="http://new.russianwool.ru/my-account/">Панель управления</a>
		<a class="my-account-page__link-lnk" href="http://new.russianwool.ru/my-account/orders/">Заказы</a>
		<a class="my-account-page__link-lnk" href="">Мои закладки</a>
		<a class="my-account-page__link-lnk" href="">Сравнение товаров</a>
		<a class="my-account-page__link-lnk" href="http://new.russianwool.ru/my-account/edit-address/">Адрес</a>
		<a class="my-account-page__link-lnk" href="http://new.russianwool.ru/my-account/edit-account/">Детали профиля</a>
		<a class="my-account-page__link-lnk" href="http://new.russianwool.ru/my-account/customer-logout/?_wpnonce=f23f76f62d">Выйти</a>
	</div>
</div>

<?php

$my_orders_columns = apply_filters(
	'woocommerce_my_account_my_orders_columns',
	array(
		'order-number'  => esc_html__( 'Order', 'woocommerce' ),
		'order-date'    => esc_html__( 'Date', 'woocommerce' ),
		'order-status'  => esc_html__( 'Status', 'woocommerce' ),
		'order-total'   => esc_html__( 'Total', 'woocommerce' ),
		'order-actions' => '&nbsp;',
	)
);

Теперь ко всему добавим стили под стилистику нашего сайта.

CSS

/*СТИЛИ ДЛЯ АККАУНТА*/
.my-account-page__link {
	margin: 0 0 20px 0;
	display: flex;
	justify-content: space-between;}
.my-account-page__link a.my-account-page__link-lnk {
	width: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    font-family: 'Roboto-Regular';
    font-weight: 700;
    font-size: 12px;
    line-height: 1.2;
    color: #ffffff;
    padding: 10px 15px;
    background-color: #BAA063;
    margin: 0;
    text-align: center;
    transition: 0.5s;}
.my-account-page__link a.my-account-page__link-lnk:hover {
    background: #CEB478;
    color: #fff;
    transition: 0.5s;}

.woocommerce-info {
    border-top-color: #baa063;}
.woocommerce-info::before {
    color: #baa063;}
.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button {
    font-size: 100%;
    margin: 0;
    line-height: 1;
    cursor: pointer;
    position: relative;
    text-decoration: none;
    overflow: visible;
    padding: 0.618em 1em;
    font-weight: 700;
    border-radius: 0;
    left: auto;
    color: #ffffff;
    background-color: #baa063;
    border: 0;
    display: inline-block;
    background-image: none;
    box-shadow: none;
    text-shadow: none;
	transition: 0.5s;}
.woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover {
    background: #CEB478;
    color: #fff;
    text-decoration: none;
    background-image: none;
	transition: 0.5s;}
.woocommerce-orders-table__cell-order-number a {
    color: #baa063;}
.woocommerce-orders-table__cell-order-number a:hover {
    color: #000000;}
h2.woocommerce-order-details__title {
	margin: 0 0 10px 0;;
    font-family: 'Roboto-Regular';
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    color: #364B55;
    text-transform: uppercase;}
h2.woocommerce-column__title {
	margin: 0 0 10px 0;;
    font-family: 'Roboto-Regular';
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    color: #364B55;
    text-transform: uppercase;}
.woocommerce-Address-title {
	display: flex;
    justify-content: space-between;
    align-items: center;}
.woocommerce-Address-title h3 {
	margin: 0;
    font-family: 'Roboto-Regular';
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    color: #364B55;
    text-transform: uppercase;}
.woocommerce-Address-title a {
    color: #baa063;}
.woocommerce-Address-title a:hover {
    color: #000000;}
.woocommerce h3 {
	margin: 0;
    font-family: 'Roboto-Regular';
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    color: #364B55;
    text-transform: uppercase;}
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    outline: 0;
    line-height: normal;
    border: 2px solid #d0ad55;
    border-radius: 5px;}
.woocommerce form .form-row select {
    cursor: pointer;
    margin: 0;
    border: 2px solid #d0ad55;
    border-radius: 5px;}
.woocommerce form .show-password-input, .woocommerce-page form .show-password-input {
    position: absolute;
    right: 0.7em;
    top: 3px;
    cursor: pointer;}
td.product-name a {
	color: #baa063;}
td.product-name a:hover {
	color: #000000;}
.woocommerce h2 {
	margin: 0;
    font-family: 'Roboto-Regular';
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    color: #364B55;
    text-transform: uppercase;}
form.woocommerce-form a {
	color: #baa063;}
form.woocommerce-form a:hover {
	color: #000000;}



@media (max-width: 576px) {
h2.woocommerce-column__title {
	margin: 10px 0 10px 0;}	
.my-account-page__link {
    display: flex;
	flex-wrap: wrap;
	justify-content: center;}
.my-account-page__link a.my-account-page__link-lnk {
	margin: 5px;}}

Ссылка на выход из личного кабинета на главную

<a class="my-account-page__link-lnk" href="<?php echo wp_logout_url( home_url() ); ?>">Выйти</a>

Для регистрации на странице личного кабинета нужно в настройках WooCommerce дать галочкой разрешение на "Разрешить пользователям регистрироваться на странице "Мой аккаунт"" на укладке "Аккаунты и приватность".

Стилизуем и настраиваем личный кабинет на сайте с WooCommerce