Первое, правим основную страницу ЛК. Добавляем в нее нужные нам вкладки.
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="https://mos-miele.ru/my-account/">Панель управления</a>
<a class="my-account-page__link-lnk" href="https://mos-miele.ru/my-account/orders/">Заказы</a>
<a class="my-account-page__link-lnk" href="https://mos-miele.ru/my-account/edit-address/">Адрес</a>
<a class="my-account-page__link-lnk" href="https://mos-miele.ru/my-account/edit-account/">Детали профиля</a>
<a class="my-account-page__link-lnk" href="<?php echo wp_logout_url( home_url() ); ?>">Выйти</a>
</div>
</div>
Добавляем стили для этих кнопок.
css
/*СТИЛИ ЛИЧНОГО КАБИНЕТА*/
.container-page-002-content footer.entry-footer {
display: none;}
.container-page-002-content h1.entry-title {
text-align: center;}
.container-page-002-content p.my-account-page__titletext {
margin:0;
text-align: center;}
.my-account-page__link {
width: 100%;
display: flex;
justify-content: center;
flex-wrap: wrap;}
.my-account-page__link-lnk {
cursor: pointer;
text-decoration: none;
margin: 10px;
display: flex;
align-items: center;
justify-content: center;
width: 200px;
height: 40px;
font-family: Verdana;
font-size: 14px;
line-height: 1.3;
border: 2px solid #a2000d;
background-color: #a2000d;
color: #ffffff;
transition: 0.5s;}
.my-account-page__link-lnk:hover {
color: #ffffff;
box-shadow: 0 0 15px 6px #0000001f;
transition: 0.5s;}
Меняем orders.php.
orders.php начало
<?php
/**
* Orders
*
* Shows orders on the account page.
*
* This template can be overridden by copying it to yourtheme/woocommerce/myaccount/orders.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 7.8.0
*/
defined( 'ABSPATH' ) || exit;
?>
<div class="my-account-page">
<div class="my-account-page__link">
<a class="my-account-page__link-lnk" href="https://mos-miele.ru/my-account/">Панель управления</a>
<a class="my-account-page__link-lnk" href="https://mos-miele.ru/my-account/orders/">Заказы</a>
<a class="my-account-page__link-lnk" href="https://mos-miele.ru/my-account/edit-address/">Адрес</a>
<a class="my-account-page__link-lnk" href="https://mos-miele.ru/my-account/edit-account/">Детали профиля</a>
<a class="my-account-page__link-lnk" href="<?php echo wp_logout_url( home_url() ); ?>">Выйти</a>
</div>
</div>
<?php
do_action( 'woocommerce_before_account_orders', $has_orders ); ?>
Редактируем form-edit-address.php.
form-edit-address.php начало
<?php
/**
* Edit address form
*
* This template can be overridden by copying it to yourtheme/woocommerce/myaccount/form-edit-address.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 7.0.1
*/
defined( 'ABSPATH' ) || exit;
?>
<div class="my-account-page">
<div class="my-account-page__link">
<a class="my-account-page__link-lnk" href="https://mos-miele.ru/my-account/">Панель управления</a>
<a class="my-account-page__link-lnk" href="https://mos-miele.ru/my-account/orders/">Заказы</a>
<a class="my-account-page__link-lnk" href="https://mos-miele.ru/my-account/edit-address/">Адрес</a>
<a class="my-account-page__link-lnk" href="https://mos-miele.ru/my-account/edit-account/">Детали профиля</a>
<a class="my-account-page__link-lnk" href="<?php echo wp_logout_url( home_url() ); ?>">Выйти</a>
</div>
</div>
<?php
$page_title = ( 'billing' === $load_address ) ? esc_html__( 'Billing address', 'woocommerce' ) : esc_html__( 'Shipping address', 'woocommerce' );
Меняем form-edit-account.php.
form-edit-account.php начало
defined( 'ABSPATH' ) || exit;
?>
<div class="my-account-page">
<div class="my-account-page__link">
<a class="my-account-page__link-lnk" href="https://mos-miele.ru/my-account/">Панель управления</a>
<a class="my-account-page__link-lnk" href="https://mos-miele.ru/my-account/orders/">Заказы</a>
<a class="my-account-page__link-lnk" href="https://mos-miele.ru/my-account/edit-address/">Адрес</a>
<a class="my-account-page__link-lnk" href="https://mos-miele.ru/my-account/edit-account/">Детали профиля</a>
<a class="my-account-page__link-lnk" href="<?php echo wp_logout_url( home_url() ); ?>">Выйти</a>
</div>
</div>
<?php
do_action( 'woocommerce_before_edit_account_form' ); ?>
Добавляем меню в view-order.php.
view-order.php начало
defined( 'ABSPATH' ) || exit;
?>
<div class="my-account-page">
<div class="my-account-page__link">
<a class="my-account-page__link-lnk" href="https://mos-miele.ru/my-account/">Панель управления</a>
<a class="my-account-page__link-lnk" href="https://mos-miele.ru/my-account/orders/">Заказы</a>
<a class="my-account-page__link-lnk" href="https://mos-miele.ru/my-account/edit-address/">Адрес</a>
<a class="my-account-page__link-lnk" href="https://mos-miele.ru/my-account/edit-account/">Детали профиля</a>
<a class="my-account-page__link-lnk" href="<?php echo wp_logout_url( home_url() ); ?>">Выйти</a>
</div>
</div>
<?php
$notes = $order->get_customer_order_notes();
Если вдруг у таблицы будут кривые стили, то нужно посмотреть шпаргалку "Меняем вид корзины WooCommerce" и "Меняем вид оформления заказа WooCommerce".
Добавим стили для всех ссылок и инпутов на страницах аккаунта.
css
.container-page-002-content a {
color: #a2000d;
transition: 0.5s;}
.container-page-002-content a:hover {
color: #000000;
transition: 0.5s;}
.container-page-002-content input {
margin: 0 0 10px 0;
display: block;
width: 100%;
height: calc(1.5em + 0.75rem + 2px);
padding: 0.375rem 0.75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: 0.25rem;
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;}
.container-page-002-content label.woocommerce-form__label-for-checkbox {
display: flex!important;
align-items: center!important;}
.container-page-002-content input.woocommerce-form__input-checkbox {
margin: 0 10px 0 0;
width: fit-content;}
.container-page-002-content .woocommerce-Address {
width: 100%;}
Добавим разрешение на регистрацию клиентам, если это нужно.
Перейдем в настройки WooCommerce, на вкладку "Аккаунты и приватность" и поставим галочку "Позволять клиенту создавать учётную запись во время оформления заказа".
Добавление функционала сравнение товаров
Ставим плагин "Ever Compare". Делаем ему настройки как показано на изображениях ниже:
В страницах у нас появляется страница "Ever Compare", переименуем ее в "Сравнение товаров" и в тело страницы вставим шорт код "[evercompare_table]". Устанавливаем шаблон для нее внутренней страницы.
Или создаем свой шаблон, например так.
Шаблон для страницы сравнения товаров
<?php
/**
* Template name: Страница сравнения товаров
*/
get_header();
?>
<?php
if(get_field('fon_straniczy')) {
$fon_straniczy = get_field('fon_straniczy');
} else {
$fon_straniczy = '/wp-content/themes/mielemos/assets/images/mainback.jpg';
}
?>
<div class="container-cat-001 overlay-black" style="background-image: url(<?=$fon_straniczy;?>);">
<div class="container-cat-001-content">
<div class="container-cat-001__title">
<div class="container-cat-001__title-content">
<p class="container-cat-001__title-text"><?php wp_title("", true); ?></p>
<?php
$t_id = get_queried_object()->term_id;
//echo $t_id;
$term_meta = get_option( "taxonomy_$t_id" );
$term_meta_content = $term_meta['custom_term_meta'];
if ( $term_meta_content != '' ) {
echo '<p class="container-cat-001__banner-text">';
echo $term_meta_content;
echo '</p>';
}
?>
</div>
</div>
<div class="container-cat-001__breadcrumbs">
<?php if( function_exists('kama_breadcrumbs') ) kama_breadcrumbs(' // '); ?>
</div>
</div>
</div>
<div class="container-page-002">
<div class="container-page-002-content">
<header class="entry-header"><h1 class="entry-title">Сравнение товаров</h1></header>
<div class="my-account-page">
<div class="my-account-page__link">
<a class="my-account-page__link-lnk" href="https://mos-miele.ru/my-account/">Панель управления</a>
<a class="my-account-page__link-lnk" href="https://mos-miele.ru/sravnenie-tovarov/">Сравнение товаров</a>
<a class="my-account-page__link-lnk" href="https://mos-miele.ru/my-account/orders/">Заказы</a>
<a class="my-account-page__link-lnk" href="https://mos-miele.ru/my-account/edit-address/">Адрес</a>
<a class="my-account-page__link-lnk" href="https://mos-miele.ru/my-account/edit-account/">Детали профиля</a>
<a class="my-account-page__link-lnk" href="<?php echo wp_logout_url( home_url() ); ?>">Выйти</a>
</div>
</div>
<?php the_content(); ?>
</div>
</div>
<?php
get_footer();
Теперь, там где нужна будет кнопка добавление товара в сравнение вставляем шорт код "<? echo do_shortcode( '[evercompare_button]' ); ?>". В стилях скрываем эту кнопку и пишем скрипт, который будет нажимать на эту кнопку при клике по нужному нам элементу, плюс сделаем еще всплывающую подсказку, что товар добавлен в сравнение.
Для этого добавим к нашей кнопке класс compare_add, сделаем всплывашку "Товар добавлен в сравнение".
Рассмотрим пример когда на странице много карточек товара и много кнопок добавления в сравнение.
Пример
<div class="container-cat-002-right-items-itm-buyblock-btn">
<a class="container-cat-002-right-items-itm-buyblock-btn-lnk compare_add<?php echo $product->get_id(); ?>">
<img class="container-cat-002-right-items-itm-buyblock-btn-lnk-img" src="/wp-content/themes/mielemos/assets/images/plus.png" alt="">
</a>
<? echo do_shortcode( '[evercompare_button]' ); ?>
<p id="compare_info<?php echo $product->get_id(); ?>" class="container-cat-002-right-items-itm-buyblock-btn-comparefotxt">
Товар добавлен в сравнение
</p>
</div>
Напишем для всего этого скрипт и стилизуем.
script
<script>
$('.compare_add<?php echo $product->get_id(); ?>').click(function() {
let evercomapre_elem_parent = $(this).parent();
$(evercomapre_elem_parent).find('.htcompare-button-area a')[0].click();
$('#compare_info<?php echo $product->get_id(); ?>').addClass('compareinfo_opacity');
setTimeout(function(){
$('#compare_info<?php echo $product->get_id(); ?>').removeClass('compareinfo_opacity');
}, 3000);
});
</script>
css
/*СТИЛИ ДЛЯ ФУНКЦИОНАЛА СРАВНЕНИЕ ТОВАРОВ*/
.htcompare-button-area {
display: none;}
.container-cat-002-right-items-itm-buyblock-btn p.container-cat-002-right-items-itm-buyblock-btn-comparefotxt {
position: absolute;
bottom: 30px;
right: 0px;
margin: 0;
padding: 2px 7px;
background-color: #ffffff;
border-radius: 10px;
border: 2px solid #a2000d;
font-family: 'Verdana';
font-size: 11px;
color: #000000;
opacity: 0;
transition: 1s;}
.compareinfo_opacity {
opacity: 1!important;
transition: 1s;}
Допишем стили для адаптации под мобильные телефоны.
css
.htcolumn-field-name {
font-size: 14px!important;
text-align: left!important;}
@media (max-width: 400px) {
.htcompare-table {
font-size: 10px; }
.htcolumn-value::before {
font-size: 10px!important;}
.htcompare-primary-content-area img {
width: 100px;
height: auto;}}
Второй пример когда кнопка находится в карточке товара и она там только одна.
Пример
<div class="container-001__product-info-options-button">
<a class="container-001__product-info-options-linkbtn compare_add" style="cursor: pointer;" title="в сравнение">
<i class="fa-solid fa-clone"></i>
</a>
<? echo do_shortcode( '[evercompare_button]' ); ?>
<p id="compare_info" class="container-002__items-itm-button-cartinfotxt">
Товар добавлен в сравнение
</p>
</div>
Скрипт может быть и таким.
script
<script>
$('.compare_add').click(function() {
$('.htcompare-button-area a').trigger('click');
$('#compare_info').addClass('cartinfo_opacity');
setTimeout(function(){
$('#compare_info').removeClass('cartinfo_opacity');
}, 3000);
});
</script>
Ну а стили теже.
Теперь выведем кнопку или ссылку для открытия страницы сравнения товаров из личного кабинет.
Пример
<div class="my-account-page__link">
<a class="my-account-page__link-lnk" href="https://mos-miele.ru/my-account/">Панель управления</a>
<a class="my-account-page__link-lnk" href="https://mos-miele.ru/sravnenie-tovarov/">Сравнение товаров</a>
<a class="my-account-page__link-lnk" href="https://mos-miele.ru/my-account/orders/">Заказы</a>
<a class="my-account-page__link-lnk" href="https://mos-miele.ru/my-account/edit-address/">Адрес</a>
<a class="my-account-page__link-lnk" href="https://mos-miele.ru/my-account/edit-account/">Детали профиля</a>
<a class="my-account-page__link-lnk" href="<?php echo wp_logout_url( home_url() ); ?>">Выйти</a>
</div>
И добавляем на сайте кнопку "Сравнение товаров", если это нужно.